/* ============================================================
   Bloques de contenido: certificaciones, premios, línea de tiempo, equipo y fichas
   ============================================================ */

.flat-block{ border-top:1px solid var(--line); padding-top:var(--sp-6); }
/* Variante con foto: la imagen a la izquierda, angosta, para que no compita
   con el texto —son originales del catálogo y no aguantan tamaños grandes. */
.flat-block.has-media{ display:grid; grid-template-columns:180px 1fr; gap:clamp(var(--sp-4),2vw,var(--sp-8)); align-items:start; }
.variante-media{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-sm); background:var(--blue-100); }
.variante-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .flat-block.has-media{ grid-template-columns:1fr; } .variante-media{ max-width:220px; } }

.cert-list{ display:flex; flex-direction:column; }
.cert-row{ display:grid; grid-template-columns:150px 1fr 260px; gap:clamp(var(--sp-5),3vw,var(--sp-12)); padding:var(--sp-8) 0; border-top:1px solid var(--line); align-items:start; }
.cert-list .cert-row:last-child{ border-bottom:1px solid var(--line); }
.cert-mark{ display:flex; align-items:flex-start; }
.cert-mark img{ max-width:100%; width:auto; filter:brightness(0); opacity:.8; }
.cert-meta{ border-top:2px solid var(--navy); padding-top:var(--sp-4); }
.cert-meta dt{ font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
.cert-meta dd{ margin:var(--sp-2) 0 0; font-weight:600; font-size:var(--fs-xs); color:var(--navy); }
@media (max-width:900px){ .cert-row{ grid-template-columns:1fr; gap:var(--sp-4); } .cert-meta{ max-width:320px; } }

.award-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--sp-6),4vw,var(--sp-16)); }
/* Columna flexible para que el lugar quede a la misma altura en ambas tarjetas:
   uno de los premios lleva subtítulo y el otro no. */
.award{ border-top:2px solid var(--navy); padding-top:var(--sp-6); display:flex; flex-direction:column; }
.award .award-place{ margin-top:auto; padding-top:var(--sp-4); }
/* Soporte para la fotografía del galardón. Mientras no llegue, la placa
   dibujada mantiene el bloque compuesto sin fingir una evidencia. */
.award-media{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); margin-bottom:var(--sp-6); background:var(--navy); }
/* El trofeo es una pieza vertical fotografiada de frente: se muestra entero,
   como en vitrina. Recortarlo a lo ancho le cortaría la placa grabada. */
.award-media img{ width:100%; height:100%; object-fit:contain; padding:var(--sp-4); }
.award-plate{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--sp-4); padding:var(--sp-5); text-align:center; color:var(--yellow);
}
.award-plate svg{ width:52px; height:52px; }
.award-plate-note{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-dark-600);
}
/* Sobre la placa oscura, el aviso de dato pendiente necesita su propio borde. */
.award-plate .tag-pending{ color:var(--on-dark-600); border-color:rgba(255,255,255,.24); }
.award-year{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:var(--fs-fig); color:var(--yellow-ochre-deep); line-height:1; }
.award-place{ font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.06em; text-transform:uppercase; color:var(--steel); }
@media (max-width:700px){ .award-grid{ grid-template-columns:1fr; } }

/* Línea de tiempo navegable: el riel es el eje del tiempo y cada año es una
   pestaña. Se recorre con clic, flechas del teclado o los botones. */
.tl{ margin-top:var(--sp-2); }
.tl-rail{ position:relative; padding-top:var(--sp-2); }
.tl-track{ position:absolute; left:0; right:0; top:19px; height:2px; background:var(--line); }
.tl-fill{ display:block; height:100%; background:var(--yellow); width:0; transition:width .45s cubic-bezier(.2,.75,.2,1); }
.tl-years{ position:relative; display:flex; justify-content:space-between; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; }
.tl-years::-webkit-scrollbar{ display:none; }
.tl-y{
  flex:0 0 auto; background:none; border:none; padding:0 var(--sp-2); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600; letter-spacing:.06em;
  color:var(--steel-light); transition:color .2s ease;
}
.tl-dot{
  width:13px; height:13px; border-radius:50%; background:var(--paper);
  border:2px solid var(--line); transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.tl-y:hover{ color:var(--navy); }
.tl-y:hover .tl-dot{ border-color:var(--yellow-ochre); }
.tl-y:focus-visible{ outline:2px solid var(--yellow); outline-offset:4px; }
.tl-y.is-active{ color:var(--navy); }
.tl-y.is-active .tl-dot{ background:var(--yellow); border-color:var(--yellow); transform:scale(1.25); }

.tl-panel{
  display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(var(--sp-6),4vw,var(--sp-12));
  align-items:start; margin-top:var(--sp-12); min-height:300px;
}
.tl-media{ margin:0; background:var(--surface-alt, var(--blue-100)); overflow:hidden; }
.tl-media img{ width:100%; aspect-ratio:16/11; object-fit:cover; display:block; }
.tl-media:empty{ display:none; }
.tl-panel.no-media{ grid-template-columns:1fr; }
.tl-panel.is-swapping .tl-copy, .tl-panel.is-swapping .tl-media{ opacity:0; }
.tl-copy, .tl-media{ transition:opacity .25s ease; }
.tl-panel-year{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  font-size:var(--fs-fig); line-height:1; color:var(--yellow-ochre-deep);
}
.tl-copy h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:var(--fs-d5); color:var(--navy); margin:var(--sp-4) 0 var(--sp-3); }
.tl-copy p{ font-size:var(--fs-body); line-height:1.7; color:var(--steel); max-width:52ch; }

.tl-nav{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--line); }
.tl-arrow{
  width:44px; height:44px; border:1px solid var(--line); background:transparent; color:var(--navy);
  display:grid; place-items:center; cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.tl-arrow svg{ width:20px; height:20px; }
.tl-arrow:hover:not(:disabled){ background:var(--navy); border-color:var(--navy); color:var(--white); }
.tl-arrow:disabled{ opacity:.3; cursor:default; }
.tl-count{ font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.1em; color:var(--steel-light); font-variant-numeric:tabular-nums; }

@media (max-width:820px){
  .tl-panel{ grid-template-columns:1fr; margin-top:var(--sp-8); min-height:0; }
  .tl-years{ justify-content:flex-start; gap:var(--sp-6); padding-bottom:var(--sp-1); }
  /* El riel se alarga para acompañar los años desplazables; .tl-rail lo recorta
     en el borde del contenedor para que no genere scroll horizontal en el body. */
  .tl-rail{ overflow:hidden; }
  .tl-track{ right:auto; width:max(100%, 640px); }
}

/* Tarjetas de ficha con fotografía */
.ficha-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(var(--sp-4),2vw,var(--sp-6)); }
/* Sin esto las tres columnas se mantenían en móvil y las tarjetas quedaban
   angostas y estiradas. */
@media (max-width:900px){ .ficha-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ficha-grid{ grid-template-columns:1fr; } }
.ficha{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); transition:border-color .25s ease, transform .25s ease; }
.ficha:hover{ border-color:var(--navy); transform:translateY(-3px); }
.ficha-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--blue-100); }
.ficha-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.ficha:hover .ficha-media img{ transform:scale(1.05); }
/* Esquemas del catálogo: fondo blanco y sin recorte, para que la pieza se vea entera. */
.ficha-media img.fit-contain{
  object-fit:contain; padding:clamp(var(--sp-3),1.4vw,var(--sp-5)); background:var(--white);
}
.ficha-ref{
  position:absolute; right:0; top:0; background:rgba(0,30,56,.86); color:var(--on-dark-200);
  font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.09em;
  text-transform:uppercase; padding:var(--sp-1) var(--sp-2);
}
.ficha h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:var(--fs-d6); color:var(--navy); margin:var(--card-pad); line-height:1.25; }
.ficha p{ font-size:var(--fs-xs); line-height:1.55; color:var(--steel); margin:0 var(--card-pad); flex:1; }
.ficha-link{ display:inline-flex; align-items:center; gap:var(--sp-2); margin:var(--sp-4) var(--card-pad) var(--card-pad); font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--yellow-dim); }
.ficha:hover .ficha-link{ color:var(--navy); }

/* Beneficios al personal */
/* Beneficios al personal: tarjetas blancas sobre fondo papel. Flex con
   envoltura centrada y no retícula: en escritorio caben las cinco en una
   fila; cuando no caben, la fila incompleta queda centrada (3 + 2) en vez
   de dejar una tarjeta huérfana a la izquierda. */
.benefit-grid{ --ben-gap:clamp(16px,2vw,24px); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ben-gap); }
.benefit-card{
  flex:1 1 200px; max-width:300px;
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
/* Cabecera de la tarjeta: banda azul con el ícono. El radio va en la propia
   banda (no sólo en el recorte de la tarjeta) para que sobreviva al exportar. */
.benefit-media{
  position:relative; height:112px;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-deep); color:var(--yellow);
  border-radius:var(--radius) var(--radius) 0 0;
}
.benefit-icon{ width:44px; height:44px; }
.benefit-n{
  position:absolute; top:14px; left:16px;
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.08em; color:var(--on-dark-600);
}
.benefit-body{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-2); padding:var(--card-pad); }
.benefit-body p{ font-size:var(--fs-xs); line-height:1.6; color:var(--steel); }
/* Por debajo de 1200 px ya no caben cinco: tres por fila (3 + 2), luego
   dos (2 + 2 + 1) y en móvil una. Ancho fijo por tramo para que las
   tarjetas de la última fila no se estiren más que las de arriba. */
@media (max-width:1199px){
  .benefit-card{ flex:0 0 calc((100% - 2 * var(--ben-gap)) / 3); max-width:none; }
}
@media (max-width:819px){
  .benefit-card{ flex-basis:calc((100% - var(--ben-gap)) / 2); }
}
@media (max-width:560px){
  .benefit-card{ flex-basis:100%; }
}
.foto.mb-48 img{ aspect-ratio:21/9; }

/* Accionistas: misma tarjeta de equipo que los ejecutivos, sin línea de cargo. */

.ficha-doc{ max-width:820px; margin-top:var(--sp-8); }
.ficha-doc > * + *{ margin-top:var(--sp-6); }
/* En columna de lectura, una foto a su proporción natural se come la pantalla. */
.ficha-doc .foto img{ aspect-ratio:16/9; }
.cta-row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; padding-top:var(--sp-2); }
.btn-back{ color:var(--steel); border-color:var(--line); }
.btn-back:hover{ color:var(--navy); border-color:var(--navy); }
.btn-back:hover svg{ transform:translateX(-4px); }
/* Reproducción de un documento: se muestra a su tamaño, nunca ampliada. */
.doc-shot{ max-width:280px; }
.doc-shot img{ width:100%; height:auto; object-fit:contain; }

/* ============================================================
   Galería en movimiento: la fila se desplaza sola, de izquierda a
   derecha, sin flechas ni puntos que tocar. El truco del loop continuo es
   duplicar el set una vez y recorrer sólo la mitad de la pista —el punto
   de reinicio cae sobre una copia idéntica, así que no se nota el salto.
   ============================================================ */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex; width:max-content; gap:var(--sp-4);
  animation:marquee-scroll 36s linear infinite;
}
/* Se detiene con el cursor encima: es la única forma de leer con calma
   algo que se mueve solo. */
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ flex:0 0 auto; width:clamp(220px,22vw,300px); aspect-ratio:4/3; margin:0; overflow:hidden; border-radius:var(--radius-sm); background:var(--blue-100); }
.marquee-item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* -50% y no -100%: el set está duplicado, así que la mitad de la pista es
   exactamente un set completo. Recorrer esa mitad hace que el punto de
   llegada sea indistinguible del de partida. */
@keyframes marquee-scroll{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}
@media (max-width:560px){
  .marquee-item{ width:clamp(160px,58vw,220px); }
}