/* TRIAN Consultores · sistema visual 2.0 (2026-11-14)
   Azul marino, blanco cálido, grafito y verde petróleo. Titulares en Source Serif 4, texto en Archivo.
   Ambas tipografías viven en /assets/fuentes: el sitio no pide nada a terceros. */

@font-face { font-family: "Source Serif 4"; src: url("/assets/fuentes/source-serif-4-variable-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fuentes/archivo-variable-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --marino: #0A2036;
  --marino-hondo: #061627;
  --marino-medio: #15324F;
  --papel: #F8F6F1;
  --hoja: #FFFFFF;
  --grafito: #252B33;
  --grafito-suave: #56606C;
  --petroleo: #0F6E66;
  --petroleo-hondo: #0A544E;
  --menta: #8ADACC;
  --linea: #DDD8CC;
  --linea-marino: rgba(255, 255, 255, .16);
  --sobre-marino: #C9D3DD;
  --error: #A3261B;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --ancho: 76rem;
  --e1: .5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2.5rem; --e5: 4rem; --e6: 6.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--grafito); font: 400 1.0625rem/1.6 var(--sans); }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--petroleo); text-underline-offset: .18em; }
a:hover { color: var(--petroleo-hondo); }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, .serif { font-family: var(--serif); font-weight: 420; letter-spacing: -.012em; line-height: 1.12; text-wrap: balance; }
h3 { font: 600 1.05rem/1.3 var(--sans); }
:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; border-radius: 2px; }
.sobre-claro :focus-visible, main :focus-visible { outline-color: var(--petroleo); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -999px; top: 0; background: var(--hoja); color: var(--marino); padding: .6rem 1rem; z-index: 50; }
.salto:focus { left: .5rem; top: .5rem; }
.ancho { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.estrecho { max-width: 46rem; }
[hidden] { display: none !important; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.35rem;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 1.5px solid transparent; border-radius: 3px; cursor: pointer;
  background: var(--petroleo); color: #fff; transition: background .15s, color .15s, border-color .15s; }
.boton:hover { background: var(--petroleo-hondo); color: #fff; }
.boton svg { width: 1.25rem; height: 1.25rem; flex: none; }
.pie ul + h2 { margin-top: 1.4rem; }
@media (max-width: 40rem) { .flotante span { display: none; } .flotante { padding: .9rem; } }
.boton--claro { background: var(--menta); color: var(--marino-hondo); }
.boton--claro:hover { background: #fff; color: var(--marino-hondo); }
.boton--linea { background: transparent; color: var(--marino); border-color: var(--marino); }
.boton--linea:hover { background: var(--marino); color: #fff; }
.boton--linea-clara { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.boton--linea-clara:hover { background: #fff; color: var(--marino); }
.boton--chico { min-height: 2.6rem; padding: .5rem 1rem; font-size: .94rem; }
.enlace { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.enlace::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.enlace:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- cabecera comercial ---------- */
.cabecera { background: var(--marino); color: #fff; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--linea-marino); }
.cabecera__fila { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.marca { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; margin-right: auto; }
.marca img { height: 2.5rem; width: auto; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__nombre { font: 600 1.32rem/1 var(--serif); letter-spacing: .085em; }
.marca__lema { font-size: .68rem; letter-spacing: .04em; color: var(--sobre-marino); margin-top: .22rem; }
.menu { display: flex; gap: 1.5rem; }
.menu a { color: var(--sobre-marino); text-decoration: none; font-size: .95rem; padding: .4rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.menu a:hover, .menu a[aria-current] { color: #fff; border-bottom-color: var(--menta); }
.menu__boton { display: none; background: none; border: 1.5px solid var(--linea-marino); color: inherit; border-radius: 3px; width: 2.8rem; height: 2.8rem; padding: 0; cursor: pointer; }
.menu__boton svg { margin: auto; width: 1.4rem; height: 1.4rem; }
@media (max-width: 68rem) {
  .menu__boton { display: block; order: 3; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--marino-hondo); padding: .5rem 1.25rem 1.25rem; border-bottom: 1px solid var(--linea-marino); }
  .menu a { padding: .9rem 0; border-bottom: 1px solid var(--linea-marino); font-size: 1.05rem; }
  .menu-abierto .menu { display: flex; }
}
@media (max-width: 30rem) { .marca__lema { display: none; } .cabecera .boton--chico { padding-inline: .7rem; font-size: .85rem; } .cabecera__fila { gap: .6rem; } .marca img { height: 2.1rem; } }

/* ---------- cabecera del portal ---------- */
.cabecera--portal { background: var(--hoja); color: var(--marino); border-bottom: 1px solid var(--linea); }
.cabecera--portal .marca__lema { color: var(--petroleo); font-weight: 600; letter-spacing: .09em; font-size: .72rem; }
.cabecera--portal .menu a { color: var(--grafito-suave); }
.cabecera--portal .menu a:hover, .cabecera--portal .menu a[aria-current] { color: var(--marino); border-bottom-color: var(--petroleo); }
.cabecera--portal .menu__boton { border-color: var(--linea); }
.cabecera--portal .menu { background: var(--hoja); }
@media (max-width: 68rem) { .cabecera--portal .menu a { border-bottom-color: var(--linea); } }
@media (min-width: 68.01rem) {
  /* El portal tiene diez entradas: su menú va en un segundo renglón, bajo la marca. */
  .cabecera--portal .cabecera__fila { flex-wrap: wrap; row-gap: 0; padding-top: .7rem; min-height: 0; }
  .cabecera--portal .menu { order: 5; width: 100%; gap: 1.6rem; margin-top: .5rem; border-top: 1px solid var(--linea); flex-wrap: wrap; row-gap: 0; }
  .cabecera--portal .menu a { padding: .65rem 0 .55rem; font-size: .92rem; }
}
.regreso { background: var(--marino); color: var(--sobre-marino); font-size: .86rem; }
.regreso .ancho { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; }
.regreso a { color: #fff; text-decoration: none; font-weight: 600; }

/* ---------- portada: hero ---------- */
.hero { background: var(--marino); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--linea-marino) 1px, transparent 1px), linear-gradient(90deg, var(--linea-marino) 1px, transparent 1px);
  background-size: 100% 5.5rem, 5.5rem 100%; opacity: .32; mask-image: linear-gradient(100deg, transparent 5%, #000 70%); -webkit-mask-image: linear-gradient(100deg, transparent 5%, #000 70%); }
.hero__rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--e5); align-items: center; padding-block: var(--e5) var(--e6); }
.hero h1 { font-size: clamp(2.15rem, 4.9vw, 4.15rem); font-weight: 400; }
.hero__texto { color: var(--sobre-marino); font-size: 1.15rem; max-width: 34rem; margin-top: var(--e3); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--e4); }
.hero__firma { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linea-marino); color: var(--sobre-marino); font-size: .93rem; max-width: 34rem; }
.hero__firma strong { color: #fff; font-weight: 600; }
.accesos { background: var(--hoja); color: var(--grafito); border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.accesos h2 { font-size: 1.45rem; padding: 1.5rem 1.6rem 1.1rem; color: var(--marino); }
.acceso { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1.05rem 1.6rem; border-top: 1px solid var(--linea); text-decoration: none; color: inherit; transition: background .15s; }
.acceso:hover { background: var(--papel); color: inherit; }
.acceso__servicio { display: block; font-size: .8rem; font-weight: 600; color: var(--petroleo); letter-spacing: .02em; }
.acceso__frase { display: block; font: 500 1.08rem/1.3 var(--sans); color: var(--marino); margin-top: .15rem; }
.acceso svg { width: 1.5rem; height: 1.5rem; color: var(--petroleo); transition: transform .15s; }
.acceso:hover svg { transform: translateX(4px); }
@media (max-width: 60rem) {
  .hero__rejilla { grid-template-columns: 1fr; gap: var(--e3); padding-block: var(--e3) var(--e4); }
  .hero__texto { font-size: 1.02rem; margin-top: var(--e2); }
  .hero__acciones { margin-top: var(--e3); }
  .hero__firma { display: none; }
  .accesos h2 { font-size: 1.2rem; padding: 1rem 1.1rem .8rem; }
  .acceso { padding: .7rem 1.1rem; }
  .acceso__frase { font-size: .98rem; }
}

/* ---------- secciones ---------- */
.seccion { padding-block: var(--e6); }
.seccion--hoja { background: var(--hoja); }
.seccion--marino { background: var(--marino); color: #fff; }
.seccion--marino p { color: var(--sobre-marino); }
.seccion--ceñida { padding-block: var(--e5); }
.titulo { font-size: clamp(1.8rem, 3.4vw, 2.75rem); max-width: 22ch; }
.titulo--largo { max-width: 28ch; }
.bajada { font-size: 1.14rem; color: var(--grafito-suave); max-width: 40rem; margin-top: var(--e2); }
.seccion--marino .bajada { color: var(--sobre-marino); }
.dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e5); align-items: start; }
.dos p + p { margin-top: var(--e2); }
@media (max-width: 56rem) { .seccion { padding-block: var(--e5); } .dos { grid-template-columns: 1fr; gap: var(--e3); } }

/* cadena: cómo se relacionan los cuatro servicios */
.cadena { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--e5); border-top: 2px solid var(--marino); }
.cadena li { padding: 1.2rem 1.2rem 0 0; position: relative; }
.cadena li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--petroleo); box-shadow: 0 0 0 4px var(--hoja); }
.cadena strong { display: block; font: 500 1.3rem/1.2 var(--serif); color: var(--marino); }
.cadena span { color: var(--grafito-suave); font-size: .98rem; }
@media (max-width: 48rem) { .cadena { grid-template-columns: 1fr 1fr; row-gap: var(--e3); } }

/* soluciones: cuatro renglones, no cuatro tarjetas */
.soluciones { margin-top: var(--e4); border-top: 1px solid var(--linea); }
.solucion { display: grid; grid-template-columns: 7.5rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: var(--e4); align-items: center; padding-block: var(--e3); border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; transition: background .2s; }
.solucion:hover { background: var(--papel); color: inherit; }
.solucion__lamina { width: 7.5rem; height: 7.5rem; background: var(--marino); color: var(--menta); border-radius: 3px; padding: 1.1rem; }
.solucion h3 { font: 420 1.75rem/1.15 var(--serif); color: var(--marino); letter-spacing: -.01em; }
.solucion p { color: var(--grafito-suave); }
.solucion .enlace { color: var(--petroleo); white-space: nowrap; }
@media (max-width: 60rem) {
  .solucion { grid-template-columns: 4.5rem 1fr; gap: var(--e2) var(--e3); align-items: start; }
  .solucion__lamina { width: 4.5rem; height: 4.5rem; padding: .7rem; grid-row: span 3; }
  .solucion h3 { font-size: 1.4rem; }
  .solucion p, .solucion .enlace { grid-column: 2; }
}

/* por qué TRIAN */
.razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4) var(--e5); margin-top: var(--e5); }
.razones li { border-top: 1px solid var(--linea); padding-top: 1.1rem; }
.razones h3 { font: 500 1.3rem/1.2 var(--serif); color: var(--marino); margin-bottom: .4rem; }
.razones p { color: var(--grafito-suave); font-size: 1rem; }
.seccion--marino .razones li { border-top-color: var(--linea-marino); }
.seccion--marino .razones h3 { color: #fff; }
.seccion--marino .razones p { color: var(--sobre-marino); }
@media (max-width: 60rem) { .razones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .razones { grid-template-columns: 1fr; gap: var(--e3); } }

/* método: sí es una secuencia, por eso va numerado */
.metodo { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); margin-top: var(--e5); counter-reset: paso; }
.metodo li { counter-increment: paso; border-top: 2px solid var(--marino); padding-top: 1rem; }
.metodo li::before { content: counter(paso); font: 400 2.6rem/1 var(--serif); color: var(--petroleo); display: block; margin-bottom: .5rem; }
.metodo h3 { font: 500 1.25rem/1.2 var(--serif); color: var(--marino); margin-bottom: .4rem; }
.metodo p { color: var(--grafito-suave); font-size: 1rem; }
.metodo dl { margin-top: .9rem; font-size: .93rem; }
.metodo dt { font-weight: 600; color: var(--marino); margin-top: .6rem; }
.metodo dd { color: var(--grafito-suave); }
@media (max-width: 60rem) { .metodo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .metodo { grid-template-columns: 1fr; gap: var(--e3); } }

/* respaldo */
.respaldo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e5); align-items: center; }
.respaldo__foto { border-radius: 3px; overflow: hidden; }
.respaldo__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }
.credenciales { margin-top: var(--e4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3) var(--e4); }
.credenciales li { border-top: 1px solid var(--linea-marino); padding-top: .9rem; }
.credenciales strong { display: block; font: 500 1.15rem/1.25 var(--serif); color: #fff; }
.credenciales span { color: var(--sobre-marino); font-size: .95rem; }
.sobre-claro .credenciales li { border-top-color: var(--linea); }
.sobre-claro .credenciales strong { color: var(--marino); }
.sobre-claro .credenciales span { color: var(--grafito-suave); }
@media (max-width: 56rem) { .respaldo { grid-template-columns: 1fr; } .credenciales { grid-template-columns: 1fr; } }

/* selección de conocimiento */
.seleccion { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); margin-top: var(--e4); }
.pieza { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-top: 2px solid var(--marino); padding-top: 1rem; }
.pieza__cat { font-size: .82rem; font-weight: 600; color: var(--petroleo); }
.pieza h3 { font: 500 1.3rem/1.22 var(--serif); color: var(--marino); margin: .35rem 0 .5rem; }
.pieza p { color: var(--grafito-suave); font-size: .98rem; }
.pieza:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; }
.fila-titulo { display: flex; justify-content: space-between; align-items: end; gap: var(--e3); flex-wrap: wrap; }
@media (max-width: 56rem) { .seleccion { grid-template-columns: 1fr; gap: var(--e3); } }

/* captación */
.captacion { background: var(--petroleo); color: #fff; padding-block: var(--e5); }
.captacion__fila { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e5); align-items: center; }
.captacion h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.captacion p { color: #D9F0EC; margin-top: var(--e2); max-width: 34rem; }
.captacion__acciones { display: grid; gap: .7rem; }
.captacion .boton { justify-content: space-between; background: #fff; color: var(--marino); }
.captacion .boton:hover { background: var(--marino); color: #fff; }
.captacion .boton--linea-clara { background: transparent; color: #fff; }
@media (max-width: 56rem) { .captacion__fila { grid-template-columns: 1fr; gap: var(--e3); } }

/* ---------- pie ---------- */
.pie { background: var(--marino-hondo); color: var(--sobre-marino); padding-block: var(--e5) var(--e3); font-size: .96rem; }
.pie a { color: var(--sobre-marino); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--e4); }
.pie h2 { font: 600 .95rem/1.3 var(--sans); color: #fff; letter-spacing: 0; margin-bottom: .8rem; }
.pie li { margin-bottom: .45rem; }
.pie .marca { margin-bottom: 1rem; color: #fff; }
.pie__contacto button { display: block; background: none; border: 0; padding: 0; margin-bottom: .55rem; color: var(--menta); font: 600 .96rem var(--sans); cursor: pointer; text-align: left; }
.pie__contacto button:hover { color: #fff; text-decoration: underline; }
.pie__legal { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linea-marino); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .86rem; }
@media (max-width: 56rem) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .pie__rejilla { grid-template-columns: 1fr; } }

/* ---------- páginas interiores ---------- */
.portadilla { background: var(--marino); color: #fff; padding-block: var(--e4) var(--e5); position: relative; overflow: hidden; }
.portadilla::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 28rem; height: 28rem; border: 1px solid var(--linea-marino); border-radius: 50%; box-shadow: 0 0 0 4.5rem rgba(255, 255, 255, .025), 0 0 0 9rem rgba(255, 255, 255, .02); pointer-events: none; }
.portadilla .ancho { position: relative; z-index: 1; }
.portadilla h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); max-width: 20ch; margin-top: var(--e3); }
.portadilla__bajada { color: var(--sobre-marino); font-size: 1.15rem; max-width: 42rem; margin-top: var(--e3); }
.portadilla .hero__acciones { margin-top: var(--e3); }
.migas { font-size: .88rem; color: var(--sobre-marino); }
.migas a { color: var(--sobre-marino); text-decoration: none; }
.migas a:hover { color: #fff; text-decoration: underline; }
.migas span { margin-inline: .4rem; opacity: .6; }
.sobre-claro .migas, .sobre-claro .migas a { color: var(--grafito-suave); }
.sobre-claro .migas a:hover { color: var(--marino); }

.servicio { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--e5); align-items: start; }
.servicio__lado { position: sticky; top: 6rem; background: var(--hoja); border: 1px solid var(--linea); border-top: 3px solid var(--petroleo); padding: 1.5rem; border-radius: 3px; }
.servicio__lado h2 { font-size: 1.35rem; color: var(--marino); }
.servicio__lado p { color: var(--grafito-suave); font-size: .96rem; margin: .6rem 0 1rem; }
.servicio__lado .boton { width: 100%; margin-bottom: .6rem; }
.servicio__lado small { display: block; color: var(--grafito-suave); font-size: .82rem; line-height: 1.45; margin-top: .5rem; }
.bloque { padding-block: var(--e4); border-top: 1px solid var(--linea); }
.bloque:first-child { border-top: 0; padding-top: 0; }
.bloque h2 { font-size: 1.75rem; color: var(--marino); margin-bottom: var(--e2); }
.bloque > p { font-size: 1.12rem; max-width: 42rem; }
.senales li { position: relative; padding: .7rem 0 .7rem 2rem; border-bottom: 1px solid var(--linea); max-width: 44rem; }
.senales li::before { content: ""; position: absolute; left: .2rem; top: 1.2rem; width: .65rem; height: .65rem; border: 2px solid var(--petroleo); border-radius: 50%; }
.incluye { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4); }
.incluye li { padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.incluye strong { display: block; font: 500 1.15rem/1.25 var(--serif); color: var(--marino); }
.incluye span { color: var(--grafito-suave); font-size: .97rem; }
.pasos-cortos { counter-reset: paso; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3); }
.pasos-cortos li { counter-increment: paso; font-size: .96rem; color: var(--grafito-suave); }
.pasos-cortos li::before { content: counter(paso); display: block; font: 400 1.9rem/1 var(--serif); color: var(--petroleo); margin-bottom: .3rem; }
.pasos-cortos strong { display: block; color: var(--marino); }
.preguntas details { border-bottom: 1px solid var(--linea); max-width: 46rem; }
.preguntas summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 600; color: var(--marino); list-style: none; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: .2rem; top: .8rem; font: 400 1.5rem/1 var(--serif); color: var(--petroleo); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { padding-bottom: 1.1rem; color: var(--grafito-suave); }
.relacionados { margin-top: var(--e2); }
.relacionados li { border-bottom: 1px solid var(--linea); }
.relacionados a { display: block; padding: .8rem 0; text-decoration: none; color: var(--marino); font-weight: 500; }
.relacionados a:hover { color: var(--petroleo); }
@media (max-width: 62rem) {
  .servicio { grid-template-columns: 1fr; }
  .servicio__lado { position: static; }
  .incluye, .pasos-cortos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 36rem) { .incluye, .pasos-cortos { grid-template-columns: 1fr; } }

/* sectores */
.grupo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e5); padding-block: var(--e4); border-top: 1px solid var(--linea); }
.grupo h2 { font-size: 1.9rem; color: var(--marino); }
.grupo > div > p { color: var(--grafito-suave); margin-top: .5rem; }
.grupo__lista a { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: var(--e3); align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; }
.grupo__lista a:hover strong { color: var(--petroleo); }
.grupo__lista strong { font: 500 1.12rem/1.25 var(--serif); color: var(--marino); }
.grupo__lista span { color: var(--grafito-suave); font-size: .96rem; }
.grupo__lista svg { width: 1.2rem; height: 1.2rem; color: var(--petroleo); }
@media (max-width: 56rem) { .grupo { grid-template-columns: 1fr; gap: var(--e2); } .grupo__lista a { grid-template-columns: 1fr auto; } .grupo__lista span { grid-column: 1; } .grupo__lista svg { grid-row: 1 / span 2; grid-column: 2; } }

/* nosotros */
.valores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); margin-top: var(--e4); }
.valores li { border-top: 2px solid var(--petroleo); padding-top: 1rem; }
.valores strong { display: block; font: 500 1.2rem/1.25 var(--serif); color: var(--marino); margin-bottom: .3rem; }
.valores span { color: var(--grafito-suave); font-size: .97rem; }
.oficinas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin-top: var(--e4); }
.oficina img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.oficina h3 { font: 500 1.4rem/1.2 var(--serif); color: var(--marino); margin-top: 1rem; }
.oficina p { color: var(--grafito-suave); }
.cita { font: 400 clamp(1.4rem, 2.6vw, 2rem)/1.3 var(--serif); color: var(--marino); max-width: 32ch; border-left: 3px solid var(--petroleo); padding-left: 1.5rem; }
@media (max-width: 56rem) { .valores { grid-template-columns: 1fr 1fr; } .oficinas { grid-template-columns: 1fr; } }

/* ---------- formularios ---------- */
.forma { background: var(--hoja); border: 1px solid var(--linea); border-radius: 3px; padding: clamp(1.25rem, 3vw, 2.25rem); }
.forma fieldset { border: 0; padding: 0; margin: 0 0 var(--e3); }
.forma legend, .forma label.rotulo { font-weight: 600; color: var(--marino); padding: 0; margin-bottom: .5rem; display: block; }
.forma input[type=text], .forma select, .forma textarea { width: 100%; font: inherit; color: var(--grafito); background: var(--hoja); border: 1.5px solid #B9B3A4; border-radius: 3px; padding: .7rem .8rem; min-height: 3rem; }
.forma textarea { min-height: 7rem; resize: vertical; }
.forma input:focus, .forma select:focus, .forma textarea:focus { border-color: var(--petroleo); outline: 3px solid rgba(15, 110, 102, .25); outline-offset: 0; }
.forma [aria-invalid=true] { border-color: var(--error); }
.forma .error { color: var(--error); font-size: .9rem; margin-top: .3rem; }
.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones label { position: relative; cursor: pointer; }
.opciones input { position: absolute; opacity: 0; inset: 0; }
.opciones span { display: block; padding: .6rem .95rem; border: 1.5px solid #B9B3A4; border-radius: 3px; font-size: .97rem; background: var(--hoja); }
.opciones input:checked + span { background: var(--marino); border-color: var(--marino); color: #fff; }
.opciones input:focus-visible + span { outline: 3px solid var(--petroleo); outline-offset: 2px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.forma__envio { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding-top: var(--e3); border-top: 1px solid var(--linea); }
.forma__nota { font-size: .88rem; color: var(--grafito-suave); margin-top: 1rem; }
.aviso-seguro { background: #EAF3F1; border-left: 3px solid var(--petroleo); padding: .9rem 1.1rem; font-size: .94rem; color: var(--grafito); margin-bottom: var(--e3); }
.medios { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); margin-bottom: var(--e5); }
.medio { background: var(--hoja); border: 1px solid var(--linea); border-top: 3px solid var(--marino); padding: 1.5rem; border-radius: 3px; display: flex; flex-direction: column; gap: .6rem; }
.medio h2 { font-size: 1.35rem; color: var(--marino); }
.medio p { color: var(--grafito-suave); font-size: .97rem; flex: 1; }
@media (max-width: 56rem) { .campos, .medios { grid-template-columns: 1fr; } }

/* ---------- conocimiento ---------- */
.portal-cabeza { background: var(--hoja); border-bottom: 1px solid var(--linea); padding-block: var(--e5) var(--e4); }
.portal-cabeza h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); color: var(--marino); max-width: 18ch; }
.portal-cabeza p { font-size: 1.15rem; color: var(--grafito-suave); max-width: 40rem; margin-top: var(--e2); }
.buscador { display: flex; gap: .5rem; margin-top: var(--e3); max-width: 36rem; }
.buscador input { flex: 1; font: inherit; padding: .75rem 1rem; border: 1.5px solid var(--marino); border-radius: 3px; min-height: 3rem; background: var(--hoja); min-width: 0; }
.categorias { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e3); }
.categorias a, .etiqueta { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--linea); border-radius: 2rem; text-decoration: none; color: var(--marino); font-size: .9rem; background: var(--hoja); }
.categorias a:hover, .categorias a[aria-current] { background: var(--marino); border-color: var(--marino); color: #fff; }
.etiqueta { font-size: .8rem; color: var(--grafito-suave); padding: .2rem .65rem; }
.destacada { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e5); align-items: center; text-decoration: none; color: inherit; padding-block: var(--e4); }
.destacada h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: var(--marino); margin: .5rem 0 .8rem; }
.destacada p { color: var(--grafito-suave); font-size: 1.1rem; }
.destacada:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; }
.lamina { background: var(--marino); color: #fff; border-radius: 3px; padding: clamp(1.4rem, 3vw, 2.2rem); aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.lamina::after { content: ""; position: absolute; right: -4rem; bottom: -4rem; width: 14rem; height: 14rem; border-radius: 50%; border: 1px solid var(--linea-marino); box-shadow: 0 0 0 2.5rem rgba(255, 255, 255, .03), 0 0 0 5rem rgba(255, 255, 255, .02); }
.lamina__cat { font-size: .85rem; font-weight: 600; color: var(--menta); }
.lamina__dato { font: 400 clamp(2.4rem, 6vw, 4.2rem)/1 var(--serif); }
.lamina__pie { font-size: .95rem; color: var(--sobre-marino); max-width: 26ch; position: relative; z-index: 1; }
.rejilla-notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4) var(--e4); }
.rejilla-notas .pieza .etiquetas { margin-top: .7rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.cat-bloque { padding-block: var(--e4); border-top: 1px solid var(--linea); }
.cat-bloque > .fila-titulo { margin-bottom: var(--e3); }
.cat-bloque h2 { font-size: 1.8rem; color: var(--marino); }
.sin-resultados { padding: var(--e4) 0; color: var(--grafito-suave); font-size: 1.1rem; }
@media (max-width: 60rem) { .rejilla-notas { grid-template-columns: 1fr 1fr; } .destacada { grid-template-columns: 1fr; gap: var(--e3); } }
@media (max-width: 36rem) { .rejilla-notas { grid-template-columns: 1fr; } }

/* artículo */
.nota { background: var(--hoja); padding-block: var(--e4) var(--e5); }
.nota h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); color: var(--marino); margin: var(--e2) 0; }
.nota__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .9rem; color: var(--grafito-suave); padding-bottom: var(--e2); border-bottom: 1px solid var(--linea); }
.nota__corto { font: 400 1.3rem/1.5 var(--serif); color: var(--grafito); margin-block: var(--e3); }
.nota__cuerpo h2, .nota__datos h2, .nota__fuentes h2, .nota__mas h2 { font-size: 1.55rem; color: var(--marino); margin: var(--e4) 0 var(--e2); }
.nota__cuerpo p { margin-bottom: 1rem; }
.nota__cuerpo ul, .nota__datos ul { margin: 0 0 1rem; }
.nota__cuerpo li, .nota__datos li { position: relative; padding: .35rem 0 .35rem 1.5rem; }
.nota__cuerpo li::before, .nota__datos li::before { content: ""; position: absolute; left: .15rem; top: .95rem; width: .45rem; height: .45rem; background: var(--petroleo); border-radius: 50%; }
.nota__datos { background: var(--papel); padding: .1rem 1.5rem 1.2rem; border-radius: 3px; margin-top: var(--e4); }
.nota__fuentes { font-size: .93rem; color: var(--grafito-suave); }
.nota__fuentes li { padding: .2rem 0; }
.nota__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--e3); }
.info { background: var(--marino); color: #fff; border-radius: 3px; padding: clamp(1.25rem, 3vw, 2rem); margin-block: var(--e3); }
.info figcaption { font: 500 1.3rem/1.25 var(--serif); margin-bottom: 1.2rem; }
.info__fuente { font-size: .8rem; color: var(--sobre-marino); margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--linea-marino); }
.info__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.2rem; }
.info__numero { font: 400 2.9rem/1 var(--serif); color: var(--menta); }
.info__unidad { font-weight: 600; margin: .25rem 0; }
.info__cifra p:last-child { color: var(--sobre-marino); font-size: .92rem; }
.info__linea { border-left: 2px solid var(--menta); margin-left: .4rem; }
.info__linea li { position: relative; padding: 0 0 1.1rem 1.4rem; display: grid; }
.info__linea li::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--menta); }
.info__lapso { color: var(--menta); font-weight: 600; font-size: .9rem; }
.info__linea span:last-child { color: var(--sobre-marino); font-size: .93rem; }
.info__fila { display: grid; grid-template-columns: minmax(6rem, 13rem) 1fr auto; gap: .8rem; align-items: center; padding: .4rem 0; font-size: .95rem; }
.info__pista { background: rgba(255, 255, 255, .12); height: .75rem; border-radius: 2px; overflow: hidden; }
.info__barra { display: block; height: 100%; background: var(--menta); }
.info__valor { font-weight: 600; white-space: nowrap; }
.info__comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.info__comparar h3 { color: var(--menta); margin-bottom: .5rem; }
.info__comparar li, .info__lista li { padding: .35rem 0; border-top: 1px solid var(--linea-marino); font-size: .95rem; }
@media (max-width: 34rem) { .info__comparar { grid-template-columns: 1fr; } .info__fila { grid-template-columns: 1fr auto; } .info__pista { grid-column: 1 / -1; order: 3; } }
.w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; }
.w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }
.banner { display: grid; grid-template-columns: 1fr auto; gap: var(--e3); align-items: center; border: 1px solid var(--linea); border-left: 3px solid var(--petroleo); background: var(--papel); padding: 1.3rem 1.5rem; margin-block: var(--e3); border-radius: 3px; }
.banner__titulo { font: 500 1.25rem/1.25 var(--serif); color: var(--marino); }
.banner p + p, .banner div p:last-child { color: var(--grafito-suave); font-size: .97rem; }
@media (max-width: 40rem) { .banner { grid-template-columns: 1fr; } }

/* texto legal */
.texto { background: var(--hoja); padding-block: var(--e4) var(--e5); }
.texto h1 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--marino); margin-bottom: var(--e2); }
.texto h2 { font-size: 1.4rem; color: var(--marino); margin: var(--e3) 0 .6rem; }
.texto p, .texto ul { margin-bottom: 1rem; }
.texto li { padding-left: 1.2rem; position: relative; }
.texto li::before { content: "–"; position: absolute; left: 0; color: var(--petroleo); }
.pendiente { background: #FFF3C9; padding: 0 .25rem; }

/* ---------- asistente ---------- */
.flotante { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40; display: inline-flex; align-items: center; gap: .55rem; background: var(--petroleo); color: #fff; border: 0; border-radius: 2rem; padding: .85rem 1.25rem; font: 600 .98rem var(--sans); cursor: pointer; box-shadow: 0 12px 30px -10px rgba(6, 22, 39, .7); }
.flotante:hover { background: var(--petroleo-hondo); }
.flotante svg { width: 1.3rem; height: 1.3rem; }
.con-asistente .flotante, .sin-flotante .flotante { display: none; }
.asistente { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 45; width: min(26rem, calc(100vw - 1.5rem)); height: min(40rem, calc(100dvh - 2rem)); background: var(--hoja); border-radius: 6px; box-shadow: 0 30px 70px -20px rgba(6, 22, 39, .75); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linea); }
.asistente__barra { background: var(--marino); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; }
.asistente__barra h2 { font: 500 1.1rem var(--serif); letter-spacing: 0; }
.asistente__cerrar { background: none; border: 0; color: #fff; width: 2.5rem; height: 2.5rem; cursor: pointer; border-radius: 3px; }
.asistente__cerrar svg { width: 1.3rem; height: 1.3rem; margin: auto; }
.asistente__platica { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--papel); }
.burbuja { max-width: 88%; padding: .65rem .9rem; border-radius: 4px; font-size: .97rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja--bot { background: var(--hoja); border: 1px solid var(--linea); align-self: flex-start; }
.burbuja--yo { background: var(--marino); color: #fff; align-self: flex-end; }
.burbuja--resumen { border-left: 3px solid var(--petroleo); font-size: .92rem; }
.asistente__opciones { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem 1rem; max-height: 14rem; overflow-y: auto; border-top: 1px solid var(--linea); }
.asistente__opciones:empty { display: none; }
.ficha { background: var(--hoja); border: 1.5px solid var(--marino); color: var(--marino); border-radius: 3px; padding: .5rem .8rem; font: 500 .93rem var(--sans); cursor: pointer; text-align: left; }
@media (hover: hover) { .ficha:hover { background: var(--marino); color: #fff; } }
.ficha--fuerte { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.ficha--suave { border-color: #B9B3A4; color: var(--grafito-suave); }
.asistente__entrada { display: flex; gap: .4rem; padding: .7rem 1rem; border-top: 1px solid var(--linea); }
.asistente__entrada input { flex: 1; min-width: 0; font: inherit; padding: .6rem .8rem; border: 1.5px solid #B9B3A4; border-radius: 3px; }
.asistente__entrada button { background: var(--marino); color: #fff; border: 0; border-radius: 3px; width: 2.9rem; cursor: pointer; }
.asistente__entrada svg { width: 1.3rem; height: 1.3rem; margin: auto; }
.asistente__pie { font-size: .76rem; color: var(--grafito-suave); padding: 0 1rem .7rem; }
.sin-js { background: #FFF3C9; padding: 1rem; text-align: center; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .cabecera, .regreso, .pie, .flotante, .asistente, .banner, .nota__mas, .nota__acciones, .captacion { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .nota { padding: 0; }
  .info { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .impreso { display: block !important; }
}
.impreso { display: none; border-top: 2px solid var(--marino); margin-top: 2rem; padding-top: .8rem; font-size: .9rem; color: var(--grafito-suave); }

/* ============ 2.1 · fotografía, cifras, tarjetas e iconos (2026-11-14) ============ */
.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.icono { width: 2.4rem; height: 2.4rem; color: var(--petroleo); margin-bottom: .9rem; }
.seccion--marino .icono { color: var(--menta); }

/* portada con fotografía */
.hero--foto { isolation: isolate; }
.hero--foto::before { z-index: 1; opacity: .18; }
.hero--foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(6, 22, 39, .95) 0%, rgba(6, 22, 39, .78) 40%, rgba(6, 22, 39, .22) 100%), linear-gradient(0deg, rgba(6, 22, 39, .92) 0%, rgba(6, 22, 39, 0) 34%); }
.hero--foto > .ancho { position: relative; z-index: 2; }
.hero--foto .hero__rejilla { padding-block: var(--e5) var(--e4); }
.hero__sobre { display: inline-block; font-weight: 600; color: var(--menta); font-size: .95rem; letter-spacing: .02em; margin-bottom: 1.1rem; padding-left: 2.6rem; position: relative; }
.hero__sobre::before { content: ""; position: absolute; left: 0; top: 50%; width: 2rem; height: 2px; background: var(--menta); }
.hero--foto h1 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); text-shadow: 0 2px 30px rgba(6, 22, 39, .5); }
.hero--foto .hero__texto { color: #E3E9EE; font-size: 1.22rem; max-width: 31rem; }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .22); margin-top: var(--e3); }
.cifras li { padding: 1.6rem 1.5rem 2.2rem 0; }
.cifras li + li { padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, .22); }
.cifras strong { display: block; font: 400 clamp(2.4rem, 4.6vw, 3.9rem)/1 var(--serif); color: var(--menta); letter-spacing: -.02em; }
.cifras span { display: block; color: #E3E9EE; font-size: .98rem; margin-top: .5rem; max-width: 14rem; }
.seccion--cifras { background: var(--marino-hondo); color: #fff; }
.seccion--cifras .cifras { border-top: 0; margin-top: 0; }
@media (max-width: 60rem) {
  .hero--foto::after { background: linear-gradient(180deg, rgba(6, 22, 39, .93) 0%, rgba(6, 22, 39, .86) 100%); }
  .hero--foto .hero__rejilla { padding-block: var(--e3) var(--e3); }
  .hero__sobre { font-size: .82rem; margin-bottom: .6rem; }
  .hero--foto .hero__texto { font-size: 1.02rem; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifras li { padding: 1.1rem 1rem 1.2rem 0; }
  .cifras li + li { padding-left: 0; border-left: 0; }
  .cifras li:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .22); }
  .cifras li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .22); }
}

/* tarjetas de servicio con fotografía */
.tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: var(--e4); }
.tarjeta { position: relative; display: flex; align-items: flex-end; min-height: 32rem; border-radius: 4px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: var(--marino); }
.tarjeta__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
.tarjeta__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 22, 39, .15) 0%, rgba(6, 22, 39, .55) 45%, rgba(6, 22, 39, .96) 100%); transition: background .3s; }
.tarjeta__cuerpo { position: relative; z-index: 2; padding: 1.6rem 1.5rem; display: block; }
.tarjeta__icono { display: block; width: 3rem; height: 3rem; color: var(--menta); margin-bottom: 1rem; }
.tarjeta h3 { font: 420 1.7rem/1.12 var(--serif); letter-spacing: -.01em; }
.tarjeta p { color: #D5DEE6; margin: .6rem 0 1.1rem; font-size: 1rem; }
.tarjeta .enlace { color: var(--menta); }
.tarjeta:hover { color: #fff; }
.tarjeta:hover .tarjeta__foto { transform: scale(1.05); }
.tarjeta:hover .tarjeta__velo { background: linear-gradient(180deg, rgba(15, 110, 102, .25) 0%, rgba(6, 22, 39, .7) 45%, rgba(6, 22, 39, .98) 100%); }
@media (max-width: 70rem) { .tarjetas { grid-template-columns: 1fr 1fr; } .tarjeta { min-height: 22rem; } }
@media (max-width: 34rem) { .tarjetas { grid-template-columns: 1fr; } .tarjeta { min-height: 17rem; } }

/* sección partida: foto y texto */
.partida { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e5); align-items: center; isolation: isolate; }
.partida__foto { position: relative; }
.partida__foto img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 4px; }
.partida__foto::after { content: ""; position: absolute; left: -1.2rem; bottom: -1.2rem; width: 45%; height: 45%; border-left: 3px solid var(--petroleo); border-bottom: 3px solid var(--petroleo); z-index: -1; }
.cadena--vertical { grid-template-columns: 1fr 1fr; border-top: 0; margin-top: var(--e4); gap: 0 var(--e4); }
.cadena--vertical li { border-top: 2px solid var(--marino); padding: 1rem 0 1.4rem; }
.cadena--vertical li::before { box-shadow: 0 0 0 4px var(--papel); top: -7px; }
@media (max-width: 56rem) { .partida { grid-template-columns: 1fr; gap: var(--e4); } .partida__foto::after { display: none; } }

/* razones y método con iconos */
.razones--iconos { gap: 1.1rem; }
.razones--iconos li { border-top: 0; padding: 1.6rem; background: rgba(255, 255, 255, .05); border: 1px solid var(--linea-marino); border-radius: 4px; }
.seccion:not(.seccion--marino) .razones--iconos li { background: var(--hoja); border-color: var(--linea); }
.metodo--iconos { position: relative; gap: 1.1rem; }
.metodo--iconos li { background: var(--papel); border-top: 3px solid var(--petroleo); padding: 1.5rem; border-radius: 0 0 4px 4px; position: relative; }
.metodo--iconos li::before { position: absolute; right: 1.2rem; top: 1rem; font-size: 3.2rem; color: #C9D6D3; margin: 0; }

/* banda con fotografía */
.banda { position: relative; isolation: isolate; color: #fff; padding-block: var(--e6); overflow: hidden; background: var(--marino); }
.banda::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6, 22, 39, .96) 0%, rgba(6, 22, 39, .82) 48%, rgba(6, 22, 39, .2) 100%); }
.banda__cuerpo { position: relative; z-index: 2; }
.banda__cuerpo > * { max-width: 46rem; }
.banda .credenciales strong { font-size: 1.25rem; }
.autoridades { margin-top: var(--e4); }
.autoridades p { font-size: .85rem; color: var(--menta); font-weight: 600; margin-bottom: .7rem; }
.autoridades ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.autoridades li { border: 1px solid rgba(255, 255, 255, .35); border-radius: 3px; padding: .45rem .9rem; font-weight: 600; font-size: .92rem; letter-spacing: .03em; }

/* piezas de conocimiento con lámina */
.pieza--lamina { border-top: 0; padding-top: 0; }
.pieza--lamina .lamina { aspect-ratio: 16 / 9; margin-bottom: 1rem; padding: 1.3rem; transition: transform .25s; }
.pieza--lamina .lamina__dato { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.pieza--lamina .lamina__pie { font-size: .86rem; }
.pieza--lamina:hover .lamina { transform: translateY(-4px); }
.rejilla-notas .pieza--lamina:nth-child(3n+2) .lamina { background: var(--petroleo-hondo); }
.rejilla-notas .pieza--lamina:nth-child(3n) .lamina { background: var(--marino-medio); }
.seleccion .pieza--lamina:nth-child(2) .lamina { background: var(--petroleo-hondo); }
.seleccion .pieza--lamina:nth-child(3) .lamina { background: var(--marino-medio); }

/* portadillas y cabeza del portal con fotografía */
.portadilla--foto { isolation: isolate; padding-block: var(--e4) var(--e5); min-height: 24rem; display: flex; align-items: flex-end; }
.portadilla--foto::after { inset: 0; right: 0; top: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; z-index: 1; background: linear-gradient(90deg, rgba(6, 22, 39, .96) 0%, rgba(6, 22, 39, .84) 48%, rgba(6, 22, 39, .4) 100%); }
.portadilla--foto .ancho { z-index: 2; }
.portal-cabeza--foto { position: relative; isolation: isolate; background: var(--marino); border-bottom: 0; color: #fff; overflow: hidden; }
.portal-cabeza--foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6, 22, 39, .96) 0%, rgba(6, 22, 39, .86) 55%, rgba(6, 22, 39, .5) 100%); }
.portal-cabeza--foto .ancho { position: relative; z-index: 2; }
.portal-cabeza--foto h1 { color: #fff; }
.portal-cabeza--foto p { color: #E3E9EE; }
.portal-cabeza--foto .buscador input { border-color: #fff; }
.portal-cabeza--foto .buscador .boton { background: var(--menta); color: var(--marino-hondo); }
.portal-cabeza--foto .categorias a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: #fff; }
.portal-cabeza--foto .categorias a:hover { background: #fff; color: var(--marino); }

/* captación con fotografía */
.captacion { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--e6); }
.captacion .fondo { opacity: .22; mix-blend-mode: luminosity; }
.captacion__fila { position: relative; z-index: 2; }
.captacion h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }

/* servicio: lo que incluye, con palomita */
.incluye li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.incluye .icono { width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; }
.pasos-cortos li { background: var(--papel); padding: 1rem 1.1rem; border-top: 3px solid var(--petroleo); }
.bloque > p { font: 400 1.3rem/1.5 var(--serif); color: var(--grafito); }

/* ============ 2.2 · claro, con la fotografía a la vista y el verde del logotipo (2026-11-14) ============
   Se compara contra los sitios que Victor sí aprueba (uaalze, vinculatalento, ipandl, mintus): fondo claro,
   foto de gente sin velo oscuro, títulos con peso y un color vivo de marca. */
:root {
  --verde: #007A3D;            /* el verde del logotipo de TRIAN, medido del archivo */
  --verde-hondo: #005C2E;
  --verde-vivo: #2FCB73;
  --petroleo: #007A3D;
  --petroleo-hondo: #005C2E;
  --menta: #5FE39A;
  --papel: #F5F7F6;
  --grafito: #1B2430;
  --grafito-suave: #47525F;
  --serif: "Archivo", "Segoe UI", system-ui, sans-serif;
}
body { font-size: 1.09rem; }
h1, h2, .serif { font-weight: 750; letter-spacing: -.028em; line-height: 1.08; }
.titulo { font-size: clamp(2rem, 3.8vw, 3.1rem); }
.bajada { font-size: 1.2rem; color: var(--grafito-suave); }
.boton { border-radius: 6px; font-weight: 700; min-height: 3.2rem; padding-inline: 1.6rem; }
.boton--claro { background: var(--verde-vivo); color: #04210F; }
.boton--claro:hover { background: #fff; color: #04210F; }
.marca__nombre { font-weight: 800; letter-spacing: .06em; }
.menu a:hover, .menu a[aria-current] { border-bottom-color: var(--verde-vivo); }

/* portada: gente a la vista, texto a la izquierda */
.hero--foto { background: #0A2036; }
.hero--foto::before { display: none; }
.hero--foto::after { background: linear-gradient(90deg, rgba(6, 22, 39, .97) 0%, rgba(6, 22, 39, .88) 34%, rgba(6, 22, 39, .35) 62%, rgba(6, 22, 39, 0) 82%); }
.hero--foto .fondo { object-position: 70% 30%; }
.hero--foto .hero__rejilla { grid-template-columns: minmax(0, 40rem); padding-block: clamp(4rem, 9vw, 8rem) clamp(8rem, 12vw, 11rem); }
.hero--foto h1 { font-size: clamp(2.5rem, 5.6vw, 4.7rem); font-weight: 800; text-shadow: none; }
.hero--foto .hero__texto { font-size: 1.3rem; color: #fff; max-width: 32rem; }
.hero__sobre { color: var(--verde-vivo); font-weight: 700; font-size: 1rem; }
.hero__sobre::before { background: var(--verde-vivo); }

/* los cuatro accesos: una tira de tarjetas montada sobre el borde de la portada */
.accesos--tira { position: relative; z-index: 3; margin-top: -6.5rem; border-radius: 10px; box-shadow: 0 30px 70px -30px rgba(6, 22, 39, .55); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-top: 5px solid var(--verde); }
.accesos--tira h2 { grid-column: 1 / -1; font-size: 1.5rem; padding: 1.4rem 1.7rem 1.1rem; font-weight: 750; }
.accesos--tira .acceso { border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); padding: 1.4rem 1.5rem 1.6rem; grid-template-columns: 1fr; align-items: start; gap: .9rem; }
.accesos--tira .acceso:nth-of-type(1) { border-left: 0; }
.accesos--tira .acceso__servicio { font-size: .85rem; font-weight: 700; color: var(--verde); }
.accesos--tira .acceso__frase { font-size: 1.12rem; font-weight: 600; margin-top: .3rem; }
.accesos--tira .acceso svg { width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: 50%; background: var(--verde); color: #fff; }
.accesos--tira .acceso:hover { background: #EAF6EF; }
@media (max-width: 62rem) {
  .hero--foto::after { background: linear-gradient(180deg, rgba(6, 22, 39, .9) 0%, rgba(6, 22, 39, .8) 60%, rgba(6, 22, 39, .92) 100%); }
  .hero--foto .hero__rejilla { padding-block: 2rem 5.5rem; }
  .hero--foto .hero__texto { font-size: 1.05rem; }
  .accesos--tira { grid-template-columns: 1fr; margin-top: -4.2rem; }
  .accesos--tira h2 { font-size: 1.15rem; padding: .9rem 1.1rem .7rem; }
  .accesos--tira .acceso { grid-template-columns: 1fr auto; align-items: center; padding: .7rem 1.1rem; border-left: 0; }
  .accesos--tira .acceso__frase { font-size: .98rem; }
}

/* cifras: claras y grandes */
.seccion--cifras { background: var(--hoja); color: var(--grafito); padding-block: var(--e4) 0; }
.seccion--cifras .cifras, .cifras { border-top: 0; margin-top: 0; }
.cifras li { padding: 1rem 1.5rem 1rem 0; }
.cifras li + li { border-left: 1px solid var(--linea); }
.cifras strong { color: var(--verde); font-weight: 800; font-size: clamp(2.8rem, 5.4vw, 4.6rem); }
.cifras span { color: var(--grafito); font-weight: 600; font-size: 1.05rem; }
@media (max-width: 60rem) { .cifras li:nth-child(even) { border-left: 1px solid var(--linea); } .cifras li:nth-child(n+3) { border-top: 1px solid var(--linea); } }

/* tarjetas de servicio: la foto arriba, sin velo; el texto abajo, sobre blanco */
.tarjetas { gap: 1.4rem; }
.tarjeta { display: flex; flex-direction: column; align-items: stretch; min-height: 0; background: var(--hoja); color: var(--grafito); border-radius: 10px; box-shadow: 0 1px 0 var(--linea), 0 18px 40px -28px rgba(6, 22, 39, .45); border: 1px solid var(--linea); transition: transform .25s, box-shadow .25s; }
.tarjeta__foto { position: static; height: 13.5rem; flex: none; }
.tarjeta__velo { display: none; }
.tarjeta__cuerpo { padding: 0 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta__icono { width: 3.6rem; height: 3.6rem; padding: .7rem; margin: -1.8rem 0 1rem; background: var(--verde); color: #fff; border-radius: 10px; position: relative; z-index: 2; box-shadow: 0 10px 20px -10px rgba(0, 122, 61, .8); }
.tarjeta h3 { font: 750 1.45rem/1.15 var(--sans); color: var(--marino); letter-spacing: -.02em; }
.tarjeta p { color: var(--grafito-suave); flex: 1; }
.tarjeta .enlace { color: var(--verde); }
.tarjeta:hover { color: var(--grafito); transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(6, 22, 39, .55); }
.tarjeta:hover .tarjeta__foto { transform: none; }
@media (max-width: 34rem) { .tarjeta { min-height: 0; } }

/* secciones */
.seccion--marino { background: var(--marino); }
.razones--iconos li { border-radius: 10px; padding: 1.8rem; }
.razones h3, .metodo h3, .valores strong, .credenciales strong, .incluye strong, .grupo__lista strong, .cadena strong, .pieza h3, .oficina h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.015em; }
.icono { width: 2.8rem; height: 2.8rem; color: var(--verde); }
.seccion--marino .icono { color: var(--verde-vivo); }
.metodo--iconos li { background: var(--hoja); border: 1px solid var(--linea); border-top: 4px solid var(--verde); border-radius: 0 0 10px 10px; }
.metodo--iconos li::before { color: #D5E9DD; font-weight: 800; }
.seccion--hoja .metodo--iconos li { background: var(--papel); }
.partida__foto img { border-radius: 10px; box-shadow: 0 30px 60px -35px rgba(6, 22, 39, .6); }
.partida__foto::after { border-color: var(--verde); }
.cadena li::before { background: var(--verde); }

/* banda de respaldo: la foto se ve */
.banda::after { background: linear-gradient(90deg, rgba(6, 22, 39, .96) 0%, rgba(6, 22, 39, .86) 40%, rgba(6, 22, 39, .25) 75%, rgba(6, 22, 39, .05) 100%); }
.autoridades p { color: var(--verde-vivo); }
.autoridades li { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); border-radius: 6px; }

/* láminas y captación */
.lamina { border-radius: 10px; }
.lamina__cat { color: var(--verde-vivo); }
.lamina__dato { font-weight: 800; letter-spacing: -.03em; }
.rejilla-notas .pieza--lamina:nth-child(3n+2) .lamina, .seleccion .pieza--lamina:nth-child(2) .lamina { background: var(--verde); }
.captacion { background: var(--verde); }
.captacion .fondo { opacity: .28; }
.captacion p { color: #E6F5EC; }
.captacion .boton { border-radius: 6px; }

/* portadillas interiores: la foto se ve a la derecha */
.portadilla--foto::after { background: linear-gradient(90deg, rgba(6, 22, 39, .97) 0%, rgba(6, 22, 39, .86) 40%, rgba(6, 22, 39, .3) 72%, rgba(6, 22, 39, .08) 100%); }
.portadilla--foto { min-height: 27rem; }
.portadilla h1 { font-weight: 800; }
.portal-cabeza--foto::after { background: linear-gradient(90deg, rgba(6, 22, 39, .96) 0%, rgba(6, 22, 39, .84) 45%, rgba(6, 22, 39, .3) 100%); }
.servicio__lado { border-radius: 10px; border-top: 5px solid var(--verde); box-shadow: 0 20px 45px -30px rgba(6, 22, 39, .5); }
.bloque > p { font: 500 1.3rem/1.5 var(--sans); }
.bloque h2 { font-size: 1.9rem; }
.medio, .forma { border-radius: 10px; }
.medio { border-top: 5px solid var(--verde); }
.flotante { background: var(--verde); }
.info__numero, .info__lapso, .info__comparar h3 { color: var(--verde-vivo); }
.info__barra { background: var(--verde-vivo); }
.info__linea { border-left-color: var(--verde-vivo); }
.info__linea li::before { background: var(--verde-vivo); }
.info { border-radius: 10px; }