/* ==========================================================================
   Páginas internas: Nosotros y Recursos.
   ========================================================================== */

/* --- Encabezado de página ------------------------------------------------ */
/* No es un héroe: es una entrada corta. Un héroe completo en cada página
   interna obliga a bajar antes de leer nada útil. */
.pagina-cab{
  position:relative;
  padding:58px 0 34px;
  border-bottom:1px solid var(--linea);
  overflow:hidden;
}
.pagina-cab::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(112deg, var(--rojo-tenue) 0 22%, transparent 22.6%),
    radial-gradient(120% 90% at 8% 0%, rgba(224,27,34,.07), transparent 60%);
  pointer-events:none;
}
.pagina-cab > .wrap{position:relative}
.pagina-cab h1{margin:14px 0 12px;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.02}
.pagina-cab__sub{
  color:var(--texto-2);max-width:56ch;font-size:1.02rem;line-height:1.6;font-weight:500;
}

/* --- Nosotros: dos columnas + cifras ------------------------------------- */
.nos-dos{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:40px;align-items:start;
}
.nos-dos h2{margin:12px 0 12px}
.nos-dos p{color:var(--texto-2);line-height:1.65;margin-bottom:12px;max-width:52ch}

.nos-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nos-cifra{
  padding:20px 18px;border-radius:var(--r-lg);
  background:var(--carta);border:1px solid var(--linea);
}
.nos-cifra__n{
  display:block;
  font-family:var(--font-display);font-weight:800;font-style:italic;
  font-size:1.9rem;line-height:1;letter-spacing:-.02em;color:var(--rojo-claro);
}
html[data-tema="claro"] .nos-cifra__n{color:var(--rojo)}
.nos-cifra__k{
  display:block;margin-top:8px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-3);line-height:1.45;
}

/* Fotos de planta. Vacío por ahora: el contenedor se queda oculto hasta que
   haya imágenes, para no dejar marcos en blanco en la página. */
.nos-planta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin-top:24px;
}
.nos-planta img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  border-radius:var(--r-lg);border:1px solid var(--linea);display:block;
}

/* --- Llamado de cierre ---------------------------------------------------- */
.cta-linea{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;
  padding:26px 30px;border-radius:var(--r-lg);
  background:var(--carta);border:1px solid var(--linea);
  position:relative;overflow:hidden;
}
.cta-linea::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--rojo) 0 58%,var(--rojo-osc) 58% 100%);
}

/* --- Recursos ------------------------------------------------------------- */
.rec-filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.rec-filtro{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;
  padding:8px 14px;border-radius:100px;cursor:pointer;
  background:var(--carta);color:var(--texto-3);
  border:1px solid var(--linea);transition:all .14s ease;
}
.rec-filtro:hover{color:var(--texto);border-color:var(--texto-3)}
.rec-filtro[aria-selected="true"]{
  background:var(--rojo);border-color:var(--rojo);color:#fff;
}

.rec-lista{display:grid;gap:10px}
.rec-item{
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;text-decoration:none;color:inherit;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  transition:border-color .14s ease,transform .14s ease;
}
.rec-item:hover{border-color:var(--rojo);transform:translateX(2px)}
.rec-item__ico{
  flex:none;width:42px;height:42px;border-radius:var(--r);
  display:grid;place-items:center;
  background:var(--rojo-tenue);color:var(--rojo-claro);
}
html[data-tema="claro"] .rec-item__ico{color:var(--rojo)}
.rec-item__cuerpo{flex:1;min-width:0}
.rec-item__t{font-weight:700;font-size:.98rem;margin-bottom:3px}
.rec-item__m{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-3);
}
.rec-item__peso{
  flex:none;font-family:var(--font-mono);font-size:.72rem;color:var(--texto-3);
}

.rec-vacio{
  text-align:center;padding:56px 24px;
  border:1px dashed var(--linea);border-radius:var(--r-lg);
}
.rec-vacio__ico{
  width:60px;height:60px;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;
  background:var(--carta-2);color:var(--texto-3);border:1px solid var(--linea);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:860px){
  .nos-dos{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:560px){
  .pagina-cab{padding:40px 0 26px}
  .nos-cifras{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .nos-cifra{padding:16px 14px}
  .nos-cifra__n{font-size:1.55rem}
  .cta-linea{padding:22px 22px 22px 26px}
  .rec-item{gap:12px;padding:14px}
  .rec-item__peso{display:none}
}

/* ==========================================================================
   Tecnología
   Nombres en texto, sin logotipos. Un nombre suelto no dice nada; lo que
   convierte la lista en argumento es para qué se usa cada herramienta.
   ========================================================================== */
.tec-lista{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;
}
.tec-item{
  position:relative;
  padding:16px 18px 16px 20px;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
}
/* Pleca diagonal: el mismo gesto que remata el héroe y el aviso de instalación */
.tec-item::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:var(--rojo);transform:skewX(-11deg);border-radius:2px;
}
.tec-item__n{
  display:block;
  font-family:var(--font-display);font-weight:800;font-style:italic;
  font-size:1.02rem;letter-spacing:-.01em;color:var(--texto);
}
.tec-item__p{
  display:block;margin-top:5px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--texto-3);line-height:1.45;
}

@media (max-width:520px){
  .tec-lista{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .tec-item{padding:13px 14px 13px 16px}
  .tec-item__n{font-size:.94rem}
}