/* Nosotros / ¿Qué es FreelanClick? (templates/home/about.html). Diseño: referencias/nosotros
   (lámina de 857 × 1097). Todo con el prefijo .nos-. Letra: la global del sitio (Inter de
   partials/base.html, --fc-marca-fuente); sin @font-face propio (2026-10-09).

   2026-10-15: la página entera pasa a maquetación fluida. Antes el escritorio (801 px o
   más) calcaba la lámina con cada texto en posición absoluta sobre una caja de 857 px
   (left/top en --u, white-space:nowrap y una altura fija por sección). Así no podía
   reacomodar nada: al agrandar la ventana la página seguía midiendo lo mismo, quedaba
   angosta frente al resto del sitio y el texto nunca reflotaba.

   La referencia ya resuelve esto, pero solo para ≤800 px: su escritorio es la imagen de
   la lámina (los textos visibles son parte del arte, ver su LEEME.md) y su adaptación de
   móvil y tablet es HTML real con grillas y clamp(). Aquí se toma esa adaptación como
   base para todos los anchos y el escritorio solo la refina: más columnas, más aire y el
   marco del sitio (--fc-ancho-sitio, el mismo de la cabecera y del inicio). La
   composición, los colores y los textos del CMS no cambian.

   El encabezado sigue el reparto de la referencia (2026-10-21): en escritorio manda la
   escena completa (.nos-hero__fondo, img/nosotros/hero-fondo.webp, 857 × 381 y sin
   texto dentro), que va a sangre de borde a borde con el título, el botón y los pilares
   encima de su zona despejada; en tablet y celular se esconde y la imagen vuelve a ser
   .nos-hero__escena, la misma pieza que la referencia reserva para esos anchos.
   .nos-hero__foto es la foto del Admin y solo aparece con nos-hero--foto-propia. */
.nos{--nos-azul:#0074ff;--nos-naranja:#ff8100;--nos-tinta:#060b31;--nos-gris:#6e7fa7;
  --nos-conector:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cg fill='%23000'%3E%3Ccircle cx='1' cy='5' r='.6'/%3E%3Ccircle cx='4' cy='5' r='.6'/%3E%3Ccircle cx='7' cy='5' r='.6'/%3E%3Ccircle cx='10' cy='5' r='.6'/%3E%3C/g%3E%3Cpath d='M14 5h8.5M19 1.6 22.4 5 19 8.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  font-family:var(--fc-marca-fuente,'Inter',Arial,sans-serif);font-size:16px;line-height:1.5;color:var(--nos-tinta);background:#fdfdfd;overflow-x:clip}
.nos *,.nos *::before,.nos *::after{box-sizing:border-box}
.nos :where(h1,h2,h3,h4,p,ol,ul){margin:0;padding:0;font-family:inherit;color:inherit}
.nos :where(ol,ul){list-style:none}
.nos img{display:block;max-width:none}
.nos :where(a){color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.nos a:focus-visible{outline:3px solid var(--nos-azul);outline-offset:3px}
/* La escena completa es de escritorio; la foto del Admin, de su propio modificador. */
.nos .nos-hero__fondo,.nos .nos-hero__foto,.nos .nos-br{display:none}

/* ---------- Piezas compartidas por todos los anchos ---------- */
.nos-antetitulo{display:flex;align-items:center;gap:8px;color:#28356b;font-weight:700;letter-spacing:1.1px;text-transform:uppercase}
.nos-antetitulo::before{content:"";display:block;flex:none;background:var(--nos-azul)}
.nos-encabezado .nos-antetitulo{justify-content:center;color:var(--nos-azul)}
.nos-encabezado .nos-antetitulo::after{content:"";display:block;flex:none;background:var(--nos-azul)}
.nos h1,.nos-encabezado h2{font-weight:900}
.nos h1 span,.nos-encabezado h2 span{color:var(--nos-azul)}
.nos-hero__texto,.nos-encabezado__bajada,.nos-pilares p,.nos-forma__copia p,.nos-pasos p,.nos-valor__tarjeta p{color:var(--nos-gris)}
.nos-pilares h2,.nos-forma h3,.nos-pasos h4,.nos-valor__tarjeta h3,.nos-cierre h2{font-weight:700}
.nos-boton{display:flex;align-items:center;justify-content:center;font-weight:700;white-space:nowrap}
.nos-boton--naranja{background:linear-gradient(100deg,#ff8a00,#ff7500);color:#fff}
.nos-boton--blanco{background:#fff;color:var(--nos-azul)}
.nos-flecha{flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.nos-forma--cliente{--nos-rol:#0074ff}
.nos-forma--freelancer{--nos-rol:#ff7800}
.nos-pasos{counter-reset:nos-paso}
.nos-pasos li{counter-increment:nos-paso}
.nos-pasos h4{position:relative}
.nos-pasos h4::before{content:counter(nos-paso);position:absolute;display:grid;place-items:center;border-radius:50%;background:var(--nos-rol);color:#fff;font-weight:700;letter-spacing:0}
.nos-cierre__panel{position:relative;overflow:hidden;color:#fff}
.nos-cierre h2{color:#fff}
.nos-cierre p{color:#e3efff}

/* ---------- Base: la adaptación de la referencia, válida en todos los anchos ---------- */
.nos-lienzo{width:100%}
/* El fondo llega hasta el borde derecho (2026-10-21). Terminaba en blanco plano al 68 %
   del degradado, y como la escena de la referencia es una tarjeta de ancho medido, en un
   monitor ancho quedaba una franja blanca a su derecha: 100 px a 1440 y 345 a 1920, cada
   vez mayor. Ahora el degradado vuelve al celeste del sitio en el último tramo, así que
   la escena se apoya en un fondo continuo en lugar de recortarse contra el blanco. */
.nos-hero{padding:28px 24px 24px;background:linear-gradient(135deg,#edf8ff 0,#fbfdff 52%,#e9f4fd 100%)}
.nos-hero__grilla{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.nos-antetitulo{font-size:11px;line-height:17px;color:#246dcb}
.nos-antetitulo::before{width:20px;height:2px}
.nos-hero h1{margin-top:14px;font-size:clamp(34px,7vw,46px);line-height:1.08;letter-spacing:-1.5px}
.nos-hero__texto{margin-top:18px;font-size:15px;line-height:24px}
.nos-boton{gap:10px;min-height:44px;font-size:14px;line-height:22px;border-radius:8px}
.nos-hero__accion{width:fit-content;height:48px;margin-top:20px;padding:0 18px}
.nos-flecha{width:18px;height:18px;stroke-width:2}
/* Igual que .hero-visual de la referencia: su mismo ancho, su misma proporción y su
   mismo fondo, sin esquinas ni sombra. Las que tenía (2026-10-21) estaban ahí para que
   no pareciera recortada contra el blanco de la derecha; eso lo resuelve ahora la escena
   a sangre de escritorio, así que sobran. */
.nos-hero__escena{width:min(459px,100%);aspect-ratio:459/381;margin:0 auto;background:linear-gradient(#f7fbff,#fff);overflow:hidden}
.nos-hero__escena img{width:100%;height:100%;object-fit:cover}
.nos-pilares{display:grid;gap:18px;margin-top:24px}
.nos-pilares li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px}
.nos-pilares .nos-ico{width:44px;height:44px;border-radius:50%}
.nos-pilares h2{font-size:14px;line-height:21px}
.nos-pilares p{margin-top:3px;font-size:13px;line-height:20px}

.nos-como{padding:34px 20px 26px;background:#fff}
.nos-encabezado{text-align:center;margin-bottom:24px}
.nos-encabezado .nos-antetitulo{font-size:10px;color:var(--nos-azul)}
.nos-encabezado .nos-antetitulo::after{width:20px;height:2px}
.nos-encabezado h2{margin-top:12px;font-size:clamp(27px,4vw,34px);line-height:1.15;letter-spacing:-1px;text-wrap:balance}
.nos-encabezado__bajada{margin-top:12px;font-size:14px;line-height:22px}
.nos-formas{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:16px}
.nos-forma{height:100%;padding:20px 16px;border:1px solid #dceeff;border-radius:18px;background:linear-gradient(140deg,#f3faff,#eef7ff66)}
.nos-forma--freelancer{border-color:#ffe7d2;background:linear-gradient(140deg,#fff9f2,#fff8f3)}
.nos-forma__intro{display:grid;grid-template-columns:52px minmax(0,1fr) 44px;align-items:center;gap:10px}
.nos-forma__icono{width:52px;height:52px;border-radius:50%}
.nos-forma h3{font-size:18px;line-height:23px;letter-spacing:-.4px}
.nos-forma__copia p{margin-top:5px;font-size:13px;line-height:20px}
.nos-forma__accion{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--nos-rol)}
.nos-forma__accion img{width:40px;height:40px;border-radius:50%}
.nos-pasos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:22px 14px;margin-top:24px}
.nos-pasos li{position:relative;min-width:0}
.nos-pasos .nos-ico{width:44px;height:44px;margin-bottom:12px;border-radius:50%}
.nos-pasos h4{min-height:38px;padding-left:24px;font-size:13px;line-height:19px}
/* El número va al inicio del título del paso. Se mide desde el propio h4 (que es el
   relativo), no desde el li: así no depende del alto del ícono de arriba y no se cae
   sobre el texto de abajo al cambiar el tamaño. */
.nos-pasos h4::before{left:0;top:1px;width:18px;height:18px;font-size:11px;line-height:18px}
.nos-pasos p{margin-top:8px;font-size:13px;line-height:20px}

.nos-valor{padding:26px 20px;background:#fff}
.nos-valores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.nos-valor__tarjeta{min-width:0;padding:16px;border:1px solid #e1ecfb;border-radius:16px;background:#fff;box-shadow:0 7px 16px #153d7710}
.nos-valor__tarjeta .nos-ico{width:48px;height:48px;border-radius:50%}
.nos-valor__tarjeta h3{margin-top:12px;min-height:40px;font-size:14px;line-height:20px}
.nos-valor__tarjeta p{margin-top:8px;font-size:13px;line-height:20px}

.nos-cierre{padding:8px 20px 20px;background:#fff}
.nos-cierre__panel{padding:24px 20px;border-radius:18px;background:linear-gradient(105deg,#0042b4,#007aff)}
.nos-cierre__panel::before,.nos-cierre__panel::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:#42a9ff33;pointer-events:none}
.nos-cierre__panel::before{left:43%;top:-42px}
.nos-cierre__panel::after{right:-32px;bottom:-63px}
.nos-cierre__copia,.nos-cierre__acciones{position:relative;z-index:1}
.nos-cierre h2{font-size:23px;line-height:29px;letter-spacing:-.5px}
.nos-cierre p{margin-top:12px;font-size:13px;line-height:21px}
.nos-cierre__acciones{display:grid;gap:12px;margin-top:20px}
.nos-cierre .nos-boton{width:100%;height:48px;padding:0 14px}
.nos-cierre .nos-boton .nos-ico{flex:none;width:22px;height:22px}
.nos-cierre .nos-boton span{margin-right:auto}
.nos-cierre .nos-boton .nos-flecha{margin-left:auto}
.nos-cierre .nos-boton--blanco{color:var(--nos-azul)}
.nos-cierre__acciones a:focus-visible{outline-color:#fff}

/* ---------- Desde 650 px: dos columnas en el encabezado y las guías ---------- */
@media (min-width:650px){
  .nos-hero__grilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:20px}
  .nos-hero h1{font-size:38px}
  .nos-hero__escena{width:100%}
  .nos-pilares{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
  .nos-pilares li{grid-template-columns:40px minmax(0,1fr);align-items:start;gap:8px}
  .nos-pilares .nos-ico{width:40px;height:40px}
  .nos-pilares h2{font-size:12px;line-height:18px}
  .nos-pilares p{font-size:11px;line-height:17px}
  .nos-formas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nos-forma__intro{grid-template-columns:44px minmax(0,1fr) 44px;gap:7px}
  .nos-forma__icono{width:44px;height:44px}
  .nos-forma h3{font-size:16px;line-height:21px}
  .nos-forma__copia p{font-size:12px;line-height:18px}
  .nos-valores{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nos-valor__tarjeta{padding:14px}
  .nos-valor__tarjeta h3{font-size:13px;line-height:19px}
  .nos-valor__tarjeta p{font-size:12px;line-height:19px}
  .nos-cierre__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
  .nos-cierre__acciones{margin-top:0}
}

/* ---------- Desde 801 px: el marco del sitio y los colores de la lámina ----------
   Cada sección sigue a todo el ancho; su contenido va en .nos-lienzo, con el mismo
   ancho y sangrado que la cabecera y el inicio, así la página queda en el eje del
   sitio en cualquier pantalla. Los espacios crecen con clamp(), no a saltos. */
@media (min-width:801px){
  .nos-lienzo{width:min(100%,var(--fc-ancho-sitio));margin-inline:auto;padding-inline:var(--fc-gutter-sitio)}
  .nos-hero,.nos-como,.nos-valor,.nos-cierre{padding-inline:0}
  /* Banner compacto (2026-10-15): el encabezado medía 631 px a 1366 y se comía el
     92 % de lo que queda bajo la cabecera, así que los beneficios caían fuera de la
     primera pantalla. Lo que mandaba la altura era la foto, no el texto: se le pone
     un tope proporcional al ancho y se recortan los aires verticales. La composición
     no cambia. */
  .nos-hero{padding-block:clamp(22px,2.4vw,34px) clamp(18px,2vw,28px)}
  .nos-como{padding-block:clamp(38px,4.4vw,68px) clamp(30px,3.4vw,50px)}
  .nos-valor{padding-block:clamp(28px,3.2vw,46px)}
  .nos-cierre{padding-block:clamp(10px,1.2vw,18px) clamp(30px,3.4vw,52px)}

  /* La escena completa, a sangre y de borde a borde, como en la referencia: ahí el
     encabezado de escritorio ES la lámina entera (.desktop-art en inset:0) y el texto va
     encima. hero-fondo.webp no trae texto dentro, así que el título, el botón y los
     pilares se escriben en HTML sobre su mitad izquierda, que es la zona despejada.
     object-position pega la foto a la derecha para que la mujer y el notebook no se
     recorten cuando la ventana es más apaisada que la lámina (857 × 381). */
  .nos-hero{position:relative;isolation:isolate;overflow:hidden}
  /* Manda el ALTO, no el ancho: la lámina entra entera y conserva sus proporciones,
     pegada a la derecha. Con object-fit:cover el navegador la escalaba por el ancho
     (1,68× a 1440) y se comía por arriba y por abajo el escritorio, la taza y el
     notebook, además de empujar a la mujer encima del texto. A la izquierda queda el
     fondo de la sección, que es donde van el título y los pilares: en la lámina esa
     mitad es la oficina desenfocada, así que el empalme no se nota, y el degradado se
     funde con su borde. */
  .nos .nos-hero__fondo{display:block;position:absolute;z-index:0;
    top:0;right:0;width:auto;max-width:none;height:100%;object-fit:contain;object-position:100% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);
    mask-image:linear-gradient(90deg,transparent,#000 12%)}
  .nos-hero>.nos-lienzo{position:relative;z-index:1}
  /* Con la foto detrás, el texto ya no comparte la fila con ella: ocupa su izquierda. */
  .nos-hero__grilla{grid-template-columns:minmax(0,1fr);gap:0}
  .nos-hero__copia{max-width:min(52%,560px)}
  /* La escena suelta es de tablet y celular (en la referencia va marcada mobile-art).
     Se esconde a la manera de su .native-text, no con display:none, para no perder la
     descripción del encabezado: el role="img" y su aria-label siguen anunciándose. */
  .nos-hero:not(.nos-hero--foto-propia) .nos-hero__escena{position:absolute;width:1px;
    height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* Con foto del Admin manda la foto (nos-hero--foto-propia): una sola de las dos. */
  .nos-hero--foto-propia .nos-hero__fondo{display:none}
  /* El título no sale del token del sitio: ahí mandaría el tamaño de los otros
     encabezados y aquí hace falta más peso en menos alto. */
  .nos-hero h1{margin-top:9px;font-size:clamp(32px,3.1vw,46px);line-height:1.06;letter-spacing:-1.3px}
  .nos-hero__texto{margin-top:11px;max-width:560px;font-size:clamp(14px,1.02vw,15.5px);line-height:1.45}
  .nos-hero__accion{height:46px;margin-top:16px;font-size:13.5px}
  /* Aquí estaba el tope de la escena como columna derecha. Ya no existe esa columna:
     en escritorio la imagen es el fondo a sangre y el alto lo decide el texto. */
  /* Los tres beneficios se quedan en la mitad despejada, como en la referencia, donde
     ocupan del 3 % al 41 % del ancho. Sueltos a todo el lienzo, el tercero caía sobre
     la mujer y el notebook y no se leía. */
  .nos-pilares{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(14px,1.6vw,22px);max-width:min(56%,680px)}
  .nos-pilares li{grid-template-columns:44px minmax(0,1fr);gap:11px}
  .nos-pilares .nos-ico{width:44px;height:44px}
  .nos-pilares h2{font-size:13px;line-height:17px;letter-spacing:-.2px}
  .nos-pilares p{margin-top:4px;font-size:11.5px;line-height:16px}

  .nos-encabezado{margin-bottom:clamp(22px,2.4vw,34px)}
  .nos-encabezado .nos-antetitulo{font-size:11px;letter-spacing:1.26px}
  .nos-encabezado h2{font-size:clamp(27px,2.3vw,34px)}
  .nos-encabezado__bajada{font-size:clamp(13px,1vw,15px);line-height:1.45}
  .nos-formas{gap:clamp(18px,2vw,30px)}
  .nos-forma{padding:clamp(20px,2vw,28px)}
  .nos-forma__intro{grid-template-columns:60px minmax(0,1fr) 42px;gap:12px}
  .nos-forma__icono{width:60px;height:60px}
  .nos-forma h3{font-size:clamp(16px,1.3vw,18px);line-height:1.25}
  .nos-forma__copia p{margin-top:6px;font-size:12.5px;line-height:17px}
  .nos-forma__accion{width:42px;height:42px}
  .nos-forma__accion img{width:42px;height:42px}
  .nos-pasos{gap:clamp(18px,1.8vw,26px) clamp(12px,1.2vw,18px);margin-top:clamp(20px,2.2vw,30px)}
  .nos-pasos .nos-ico{width:48px;height:48px;margin-bottom:14px}
  .nos-pasos h4{min-height:34px;padding-left:25px;font-size:12.5px;line-height:17px}
  .nos-pasos h4::before{top:0;width:17px;height:17px;font-size:10px;line-height:17px}
  .nos-pasos p{margin-top:7px;font-size:12px;line-height:16.5px}

  .nos-valores{gap:clamp(12px,1.3vw,20px)}
  .nos-valor__tarjeta{padding:clamp(16px,1.4vw,22px);border-radius:14px}
  .nos-valor__tarjeta .nos-ico{width:50px;height:50px}
  .nos-valor__tarjeta h3{margin-top:14px;min-height:36px;font-size:13px;line-height:17px}
  .nos-valor__tarjeta p{margin-top:8px;font-size:12.2px;line-height:16.5px}

  .nos-cierre__panel{gap:clamp(24px,3vw,44px);padding:clamp(26px,2.6vw,38px);border-radius:16px}
  .nos-cierre h2{font-size:clamp(20px,1.6vw,25px);line-height:1.2;letter-spacing:-.8px}
  .nos-cierre p{margin-top:10px;font-size:13px;line-height:18px}
  .nos-cierre__acciones{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .nos-cierre .nos-boton{height:46px;border-radius:8px}
  .nos-cierre .nos-boton .nos-ico{width:26px;height:26px}

  /* Colores de la lámina (los mismos que tenía el escritorio). */
  .nos h1{color:#050b2c}
  .nos-hero__texto{color:#4f5d80}
  .nos-hero .nos-antetitulo{color:#5a678c}
  .nos-antetitulo--izq::before{background:#1d63fd}
  .nos-pilares h2{color:#0b1235}
  .nos-pilares p{color:#6b7896}
  .nos-encabezado h2{color:#070c2e}
  .nos-encabezado__bajada{color:#6f7997}
  .nos-encabezado .nos-antetitulo{color:#1166f5}
  .nos-encabezado .nos-antetitulo::before,.nos-encabezado .nos-antetitulo::after{background:#1f6ff8}
  .nos-forma{border:1px solid #e3eefc;background:linear-gradient(180deg,#f5faff 0%,#f0f7fe 100%)}
  .nos-forma--freelancer{border-color:#fbeee3;background:linear-gradient(180deg,#fff9f5 0%,#fff8f2 100%);--nos-linea:#fbeadc}
  .nos-forma h3{color:#090d2a}
  .nos-forma__copia p{color:#68728f}
  .nos-pasos h4{color:#0a0e2d}
  .nos-pasos p{color:#8a93ad}
  .nos-forma--cliente .nos-pasos h4::before{background:#1a6cf5}
  .nos-forma--freelancer .nos-pasos h4::before{background:#fb7a1f}
  .nos-valor__tarjeta{border:1px solid #edf1f7;background:#fff;box-shadow:0 6px 14px rgba(21,61,119,.05)}
  .nos-valor__tarjeta h3{color:#141a3c}
  .nos-valor__tarjeta p{color:#6e7896}
  .nos-cierre h2{color:#fff}
  .nos-cierre p{color:#e6efff}
  .nos-hero__accion{background:linear-gradient(180deg,#ff7a19,#fe6f0c);color:#fff}
  .nos-cierre .nos-boton--blanco{background:#fff;color:#1263f0}
  .nos-cierre .nos-boton--crear{background:linear-gradient(180deg,#ff8530,#fd7a20);color:#fff;box-shadow:0 4px 10px rgba(180,70,0,.18)}
}

/* ---------- Desde 1100 px: los cuatro pasos en una fila, como la lámina ---------- */
@media (min-width:1100px){
  .nos-pasos{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* El puntito y la flecha entre un paso y el siguiente, solo cuando van en fila. */
  .nos-pasos li+li::after{content:"";position:absolute;left:calc(-1*clamp(12px,1.2vw,18px) - 3px);top:14px;width:24px;height:10px;
    background:currentColor;-webkit-mask:var(--nos-conector) center/contain no-repeat;mask:var(--nos-conector) center/contain no-repeat}
  .nos-forma--cliente .nos-pasos li+li::after{color:#2f7bf8}
  .nos-forma--freelancer .nos-pasos li+li::after{color:#fb7a26}
}

/* ---------- Grupos con menos elementos de los previstos ----------
   Si el admin deja menos pilares, pasos o tarjetas, el grupo reparte el espacio que
   tiene en vez de dejar huecos de una grilla fija. */
.nos-pilares.nos-parcial{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.nos-pasos.nos-parcial{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.nos-valores.nos-parcial{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.nos-formas.nos-parcial{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ---------- CMS Fase 4 (2026-10-09): piezas que el admin puede cambiar ----------
   Sin cambios en el admin, nada de esto se usa y la página se ve igual que antes. */
/* Ícono Remix elegido en el admin, en el mismo círculo que los dibujos originales. */
.nos .cms-icono-ri{display:grid;place-items:center;container-type:size;border-radius:50%;background:#e8f2fe;color:#1a6cf5}
.nos .cms-icono-ri i{font-size:52cqh;line-height:1}
.nos-forma--freelancer .cms-icono-ri{background:#fff0e3;color:#fb7a1f}
.nos-cierre .nos-boton .cms-icono-ri{background:transparent;color:currentColor}

/* ---------- Encabezado compacto: tamaños por pantalla (2026-10-15) ----------
   El objetivo es que a 1366 x 768 se vea el banner entero -antetítulo, título,
   bajada, botón y los tres beneficios- sin bajar a buscarlos. */
@media (min-width:801px) and (max-width:1100px){
  .nos-hero h1{font-size:clamp(30px,3.6vw,38px)}
}
@media (max-width:800px){
  /* En celular manda el contenido: altura automática y aire medido, sin cortar nada. */
  .nos-hero{padding:22px 24px 20px}
  .nos-hero h1{margin-top:10px;font-size:clamp(30px,6.6vw,34px);line-height:1.08}
  .nos-hero__texto{margin-top:12px;font-size:14.5px;line-height:1.45}
  .nos-hero__accion{height:46px;margin-top:16px}
  .nos-pilares{gap:14px;margin-top:18px}
}

/* ---------- Encabezado con la foto del Admin de fondo (2026-10-16) ----------
   Cuando Imágenes del sitio > «Imagen de Nosotros» tiene foto, esa foto es el fondo
   completo del encabezado y el contenido va encima. Antes ocupaba una tarjeta a la
   derecha, con el texto a la izquierda; ahora la fotografía es la protagonista.

   Sin foto del Admin no cambia nada: sigue la composición de la referencia, que es
   arte dibujado para ese lugar y no funciona estirado a todo el ancho.

   El velo es horizontal: fuerte donde va el texto y casi transparente a la derecha,
   para que la foto se vea de verdad. Por eso conviene que el motivo principal quede
   hacia el centro o la derecha de la imagen. */
.nos-hero--foto-propia{position:relative;isolation:isolate;overflow:hidden;background:#071029}
.nos .nos-hero--foto-propia .nos-hero__foto{display:block;position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:72% center}
/* Dos velos: uno horizontal, fuerte donde va el texto, y otro al pie, por la fila de
   beneficios, que cruza hasta el lado claro de la foto. Arriba a la derecha no se toca:
   es donde la fotografía se ve entera. */
.nos-hero--foto-propia::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,11,34,0) 54%,rgba(5,11,34,.5) 84%,rgba(5,11,34,.62) 100%),
    linear-gradient(90deg,
      rgba(5,11,34,.92) 0%,rgba(5,11,34,.86) 24%,rgba(5,11,34,.6) 52%,
      rgba(5,11,34,.3) 76%,rgba(5,11,34,.14) 100%)}
.nos-hero--foto-propia .nos-lienzo{position:relative;z-index:2}
/* La foto es el fondo: la tarjeta de la derecha ya no tiene sentido. */
.nos-hero--foto-propia .nos-hero__escena{display:none}
.nos-hero--foto-propia .nos-hero__grilla{grid-template-columns:minmax(0,1fr)}
/* Textos sobre la fotografía. */
.nos-hero--foto-propia h1,.nos-hero--foto-propia .nos-pilares h2{color:#fff}
.nos-hero--foto-propia h1 span{color:#6fb6ff}
.nos-hero--foto-propia .nos-hero__texto{color:#dbe5f6}
.nos-hero--foto-propia .nos-antetitulo{color:#c3d5f1}
.nos-hero--foto-propia .nos-antetitulo--izq::before{background:#ff8a2b}
.nos-hero--foto-propia .nos-pilares p{color:#c0cce3}
.nos-hero--foto-propia .nos-pilares .nos-ico{background:rgba(255,255,255,.15);color:#fff}

@media (min-width:801px){
  /* Alto medido, nunca una pantalla entera: ~450 px a 1366, ~475 a 1440 y tope de 540
     en adelante, para que bajo el encabezado ya asome la sección siguiente. */
  .nos-hero--foto-propia{display:grid;align-content:center;min-height:clamp(430px,33vw,540px)}
  .nos-hero--foto-propia .nos-hero__texto{max-width:540px}
}

@media (max-width:800px){
  /* En celular el texto cae sobre la foto: el velo pasa a ser vertical y parejo, y la
     altura la decide el contenido para no cortar nada. */
  .nos-hero--foto-propia{min-height:0}
  .nos-hero--foto-propia::after{background:linear-gradient(180deg,rgba(5,11,34,.9),rgba(5,11,34,.74))}
  .nos .nos-hero--foto-propia .nos-hero__foto{object-position:center}
}