/*!
 * Portón & Construcción — estilos de la página NOSOTROS para WordPress + Elessi.
 * Generado desde preview/assets/interior.css. NO editar a mano.
 *
 * Es autónomo: no depende de porton-home.css. La página sólo usaba de la hoja
 * común la tipografía de titulares, así que se declara aquí y se ahorra cargar
 * los 43 KB de la home en una página que no los necesita.
 *
 * Todo va acotado bajo `.pc-nosotros` para no pisar los estilos de Elessi.
 * Cabecera, menú y pie no están aquí: se montan aparte.
 */

/* ==========================================================================
   RAÍZ — tipografías de marca y tipografía base
   En la maqueta esto lo ponía el <body>. Al acotar hay que declararlo en el
   contenedor, o la página heredaría la tipografía de Elessi.
   ========================================================================== */
.pc-nosotros{
  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  font-family:var(--font-body);
  color:#0A0A0A;
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* ==========================================================================
   ARMADURA CONTRA EL TEMA ANFITRIÓN
   La maqueta daba por hecho que color, tipografía e interlineado se heredaban
   del <body>. Elessi define `h1,h2,h3`, `p` y `a` con valores propios, y esas
   reglas ganan a la herencia aunque nuestro CSS esté acotado: la herencia no
   compite en especificidad. Este bloque devuelve la herencia dentro de
   `.pc-nosotros` y va PRIMERO, para que las reglas reales lo sobrescriban.
   ========================================================================== */
.pc-nosotros,.pc-nosotros *,.pc-nosotros *::before,.pc-nosotros *::after{box-sizing:border-box}
.pc-nosotros h1,.pc-nosotros h2,.pc-nosotros h3,.pc-nosotros h4,.pc-nosotros h5,.pc-nosotros h6,
.pc-nosotros p,.pc-nosotros span,.pc-nosotros li,.pc-nosotros dt,.pc-nosotros dd,
.pc-nosotros small,.pc-nosotros strong,.pc-nosotros b,.pc-nosotros em,.pc-nosotros i,
.pc-nosotros label,.pc-nosotros legend,.pc-nosotros figcaption,.pc-nosotros blockquote,
.pc-nosotros th,.pc-nosotros td,.pc-nosotros a{
  /* Sólo estas tres. `letter-spacing`, `text-transform` y `text-shadow` NO se
     tocan: el diseño los hereda a propósito (el <em> rojo dentro de un titular
     en mayúsculas, por ejemplo). Neutralizarlos rompía ese heredado. */
  color:inherit;font-family:inherit;line-height:inherit;margin:0}
.pc-nosotros a{text-decoration:none}
.pc-nosotros ul,.pc-nosotros ol{list-style:none;margin:0;padding:0}
.pc-nosotros img{max-width:100%;height:auto;display:block;border:0}
.pc-nosotros video{display:block;border:0}
.pc-nosotros button{font:inherit;color:inherit;background:none;border:0}

/* Base de titulares. En la maqueta venía de porton.css; aquí se replica para
   que los <h*> que interior.css no acota (por ejemplo el del cierre) tengan
   el mismo interletrado. Va antes que las reglas reales, que la sobrescriben. */
.pc-nosotros h1,.pc-nosotros h2,.pc-nosotros h3,.pc-nosotros h4{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;
  margin:0;font-weight:800;line-height:1.1}

/* ==========================================================================
   NOSOTROS — sistema visual propio.
   La home es clara con tarjetas redondeadas y carruseles. Esta página es
   editorial: base blanca, esquinas rectas, filetes de un pixel, numerales
   enormes y una sola foto por idea. Del sitio hereda color, tipografía,
   cabecera y pie; el resto vive aquí y no toca a ninguna otra página.

   El contraste se apoya en la FOTO, no en el fondo: la portada y los paneles
   de misión/visión/valores son las únicas piezas oscuras, y son imágenes.
   ========================================================================== */
.pc-nosotros .ns{
  --papel:#FFFFFF;          /* fondo base */
  --papel-2:#F4F4F4;        /* banda alterna */
  --papel-3:#EDEDED;
  --filete:rgba(0,0,0,.12);
  --filete-fuerte:rgba(0,0,0,.26);
  --texto:#141414;
  --texto-2:#5A5A5A;
  --alto:#E4221D;           /* rojo de marca: titulares, filetes, iconos */
  --alto-txt:#B81813;       /* misma familia, oscurecida para texto pequeño (AA) */
  --medida:1320px;          /* más ancho que la home: aquí manda la imagen */
  --canal:clamp(20px,5vw,64px);
  background:var(--papel);
  color:var(--texto);
}
.pc-nosotros .ns *{box-sizing:border-box}
.pc-nosotros .ns ::selection{background:var(--alto);color:#fff}

.pc-nosotros .ns-caja{width:100%;max-width:var(--medida);margin:0 auto;padding-left:var(--canal);padding-right:var(--canal)}
.pc-nosotros .ns-caja--ancha{max-width:1680px}

/* ---------- Ritmo vertical ---------- */
.pc-nosotros .ns-bloque{position:relative;padding-top:clamp(72px,10vw,144px);padding-bottom:clamp(72px,10vw,144px)}

/* ---------- Titulares ---------- */
.pc-nosotros .ns-titular{font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;line-height:.94;letter-spacing:-.01em;
  font-size:clamp(2.25rem,6.2vw,4.75rem);margin:0;color:#0B0B0B;text-wrap:balance}
.pc-nosotros .ns-titular em{color:var(--alto);font-style:italic}
.pc-nosotros .ns-entrada{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.62;color:var(--texto-2);
  max-width:62ch;margin:clamp(20px,2.5vw,28px) 0 0}

/* ==========================================================================
   1. BANNER DE PÁGINA
   Una franja, no una portada: sólo el nombre de la sección sobre la foto,
   con el filete rojo abajo. El contenido empieza sin hacer scroll.
   ========================================================================== */
.pc-nosotros .ns-banner{position:relative;overflow:hidden;background:#000;
  min-height:clamp(190px,20vw,280px);display:grid;place-items:center;
  border-bottom:3px solid var(--alto)}
.pc-nosotros .ns-banner__foto{position:absolute;inset:0;z-index:0}
.pc-nosotros .ns-banner__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.pc-nosotros .ns-banner__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,8,.62) 0%,rgba(8,8,8,.50) 50%,rgba(8,8,8,.68) 100%)}
.pc-nosotros .ns-banner__in{position:relative;z-index:2;text-align:center;
  padding:clamp(48px,7vw,72px) 0}
.pc-nosotros .ns-banner h1{font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;line-height:1;letter-spacing:.01em;margin:0;color:#fff;
  font-size:clamp(2rem,5.4vw,4rem);
  text-shadow:0 2px 18px rgba(0,0,0,.55);
  animation:ns-entrar .7s cubic-bezier(.16,1,.3,1) both}
@keyframes ns-entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Cinta de cifras: corte limpio entre la franja y el papel blanco */
.pc-nosotros .ns-cinta{position:relative;z-index:3;background:var(--papel);
  border-bottom:1px solid var(--filete)}
.pc-nosotros .ns-cinta__in{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.pc-nosotros .ns-cinta__in{grid-template-columns:repeat(4,1fr)}}
.pc-nosotros .ns-dato{padding:clamp(22px,2.8vw,34px) clamp(14px,2vw,28px);border-left:1px solid var(--filete)}
.pc-nosotros .ns-dato:first-child{border-left:0}
@media(max-width:859px){.pc-nosotros .ns-dato:nth-child(3), .pc-nosotros .ns-dato:nth-child(4){border-top:1px solid var(--filete)}
  .pc-nosotros .ns-dato:nth-child(odd){border-left:0}}
.pc-nosotros .ns-dato b{display:block;font-family:var(--font-display);font-weight:800;font-style:italic;
  font-size:clamp(2.75rem,6vw,4.25rem);line-height:1;color:#0B0B0B}
/* Ojo con el selector: el número vive dentro de un <span data-contador> del
   <b>, así que `.ns-dato span` a secas se lo comía y lo dejaba en 12px. */
.pc-nosotros .ns-dato b span{font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  text-transform:none;color:inherit;margin:0}
.pc-nosotros .ns-dato > span{display:block;margin-top:10px;font-size:.875rem;font-weight:600;
  letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--texto-2)}

/* ==========================================================================
   2. RELATO — foto fija a la izquierda, texto que corre a la derecha
   ========================================================================== */
.pc-nosotros .ns-rel{display:grid;gap:clamp(32px,5vw,64px)}
@media(min-width:1000px){.pc-nosotros .ns-rel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
/* En móvil también se queda fija, pero más baja: así la foto sigue en pantalla
   mientras se leen los cuatro pasos y el cruce de imágenes se ve de verdad.
   La cabecera del sitio mide 73px y es sticky, de ahí el desfase. */
.pc-nosotros .ns-rel__visor{position:sticky;top:81px;z-index:2;width:100%;height:min(42vh,340px);
  overflow:hidden;background:#111;border:1px solid var(--filete)}
@media(min-width:1000px){.pc-nosotros .ns-rel__visor{top:97px;height:auto;aspect-ratio:3/4;
  max-height:calc(100vh - 130px)}}
.pc-nosotros .ns-rel__visor video{width:100%;height:100%;object-fit:cover;display:block}
.pc-nosotros .ns-rel__pasos{display:grid;gap:clamp(28px,5vw,56px);position:relative;z-index:1}
@media(min-width:1000px){.pc-nosotros .ns-rel__pasos{padding:clamp(8px,4vw,56px) 0}}
/* El párrafo que se está leyendo se oscurece; los demás bajan a #6E6E6E, que
   sigue dando 4,9:1 sobre blanco. Antes se atenuaban con opacidad y el texto
   inactivo se quedaba en 2,3:1, ilegible para quien no hace scroll. */
.pc-nosotros .ns-paso{position:relative;border-top:1px solid var(--filete);padding-top:24px;
  background:var(--papel);color:#6E6E6E;transition:color .45s ease}
.pc-nosotros .ns-paso.is-activo{color:var(--texto)}
.pc-nosotros .ns-paso::before{content:"";position:absolute;left:0;top:-1px;width:0;height:3px;
  background:var(--alto);transition:width .55s cubic-bezier(.16,1,.3,1)}
.pc-nosotros .ns-paso.is-activo::before{width:64px}
.pc-nosotros .ns-paso p{margin:0;color:inherit;max-width:54ch;
  font-size:clamp(1rem,1.3vw,1.0625rem);line-height:1.72}
/* La firma de cierre: el único bloque que cambia de voz tipográfica. */
.pc-nosotros .ns-paso--firma p{font-family:var(--font-display);font-weight:700;font-style:italic;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.12;
  font-size:clamp(1.375rem,2.4vw,1.875rem)}
.pc-nosotros .ns-paso--firma em{color:var(--alto);font-style:italic}

/* ==========================================================================
   3. IMPORTACIÓN — texto a todo el ancho y, debajo, el tablero de marcas
   ========================================================================== */
.pc-nosotros .ns-import{position:relative;background:var(--papel-2);
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}

.pc-nosotros .ns-razones{list-style:none;margin:clamp(30px,3.6vw,46px) 0 0;padding:0;
  display:grid;gap:clamp(24px,3vw,34px)}
@media(min-width:820px){.pc-nosotros .ns-razones{grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3vw,52px)}}
.pc-nosotros .ns-razones li{border-top:2px solid var(--alto);padding-top:18px}
.pc-nosotros .ns-razones b{display:flex;align-items:center;gap:9px;margin-bottom:9px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.0625rem;letter-spacing:.03em;line-height:1.15;color:#0B0B0B}
.pc-nosotros .ns-razones b svg{width:17px;height:17px;flex:none;color:var(--alto)}
.pc-nosotros .ns-razones span{display:block;color:var(--texto-2);font-size:.9375rem;line-height:1.62}

/* Tablero de marcas: la imagen viene con fondo blanco y los logos a color, así
   que va en un panel blanco con aire, no recortada como una fotografía. */
.pc-nosotros .ns-tablero{margin-top:clamp(40px,5vw,68px);background:#fff;
  border:1px solid var(--filete);padding:clamp(20px,3.4vw,44px);
  display:grid;place-items:center}
.pc-nosotros .ns-tablero img{width:100%;max-width:1000px;height:auto;display:block}

/* ==========================================================================
   4. MISIÓN · VISIÓN · VALORES — tres bloques separados, nada plegado
   ========================================================================== */
.pc-nosotros .ns-pilares{display:grid;gap:clamp(44px,6vw,88px);margin-top:clamp(38px,5vw,64px)}
.pc-nosotros .ns-pilar{display:grid;gap:clamp(22px,3.5vw,48px);align-items:center}
@media(min-width:900px){
  .pc-nosotros .ns-pilar{grid-template-columns:1fr 1fr}
  .pc-nosotros .ns-pilar:nth-child(even) .ns-pilar__foto{order:2}
}
.pc-nosotros .ns-pilar__foto{position:relative;aspect-ratio:16/11;overflow:hidden;background:#111;
  border:1px solid var(--filete)}
.pc-nosotros .ns-pilar__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.pc-nosotros .ns-pilar:hover .ns-pilar__foto img{transform:scale(1.05)}
.pc-nosotros .ns-pilar__marca{position:absolute;left:0;top:0;z-index:2;background:var(--alto);color:#fff;
  width:58px;height:58px;display:grid;place-items:center}
.pc-nosotros .ns-pilar__marca svg{width:26px;height:26px}
.pc-nosotros .ns-pilar__texto{border-top:2px solid var(--alto);padding-top:clamp(18px,2.4vw,26px)}
.pc-nosotros .ns-pilar h3{font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;margin:0 0 clamp(12px,1.6vw,18px);
  font-size:clamp(1.75rem,3.4vw,2.75rem);color:#0B0B0B}
.pc-nosotros .ns-pilar p{margin:0;color:var(--texto-2);font-size:1.0625rem;line-height:1.66;max-width:52ch}
.pc-nosotros .ns-pilar ul{list-style:none;margin:clamp(16px,2vw,22px) 0 0;padding:0;display:grid;gap:11px}
.pc-nosotros .ns-pilar li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  color:#333;font-size:.9375rem;line-height:1.55}
.pc-nosotros .ns-pilar li svg{width:16px;height:16px;color:var(--alto);margin-top:4px}

/* ==========================================================================
   6. COBERTURA — sólo el mensaje: sin listado de provincias y sin fotografía
   ========================================================================== */
.pc-nosotros .ns-mapa{position:relative;background:var(--papel-2);border-top:1px solid var(--filete)}
/* ==========================================================================
   7. CIERRE
   ========================================================================== */
.pc-nosotros .ns-cierre{position:relative;background:var(--alto);color:#fff;overflow:hidden;
  padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px)}
.pc-nosotros .ns-cierre::before{content:"";position:absolute;right:-8%;top:-40%;width:60%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 65%)}
.pc-nosotros .ns-cierre__in{position:relative;z-index:1;display:grid;gap:clamp(26px,4vw,44px);align-items:center}
@media(min-width:940px){.pc-nosotros .ns-cierre__in{grid-template-columns:1.25fr .75fr}}
.pc-nosotros .ns-cierre h2{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.5rem);line-height:.98;margin:0;color:#fff;max-width:18ch}
.pc-nosotros .ns-cierre p{margin:16px 0 0;color:#fff;font-size:1.0625rem;line-height:1.6;max-width:48ch}
.pc-nosotros .ns-acciones{display:flex;flex-wrap:wrap;gap:14px}
.pc-nosotros .ns-btn{display:inline-flex;align-items:center;gap:10px;padding:17px 28px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1rem;text-decoration:none;border:2px solid transparent;
  transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease}
.pc-nosotros .ns-btn svg{width:17px;height:17px}
.pc-nosotros .ns-btn--solido{background:#0B0B0B;color:#fff;border-color:#0B0B0B}
.pc-nosotros .ns-btn--solido:hover{transform:translateY(-3px);background:#fff;color:#0B0B0B;border-color:#fff}
/* Contorno oscuro por defecto (va sobre papel); dentro de la banda roja se invierte. */
.pc-nosotros .ns-btn--linea{border-color:#0B0B0B;color:#0B0B0B}
.pc-nosotros .ns-btn--linea:hover{transform:translateY(-3px);background:#0B0B0B;color:#fff}
.pc-nosotros .ns-cierre .ns-btn--linea{border-color:rgba(255,255,255,.7);color:#fff}
.pc-nosotros .ns-cierre .ns-btn--linea:hover{background:#fff;color:var(--alto);border-color:#fff}

/* ---------- Barra de avance de lectura ---------- */
.pc-nosotros .ns-avance{position:fixed;left:0;top:0;height:3px;width:0;background:var(--alto);z-index:120;
  transition:width .12s linear;pointer-events:none}

/* ---------- Aparición al entrar en pantalla (propia de la página) ---------- */
.pc-nosotros .ns [data-sube]{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.pc-nosotros .ns [data-sube].is-visto{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .pc-nosotros .ns *, .pc-nosotros .ns *::before, .pc-nosotros .ns *::after{animation:none!important;transition-duration:.01ms!important}
  .pc-nosotros .ns [data-sube]{opacity:1;transform:none}
}