/* Inkaterra Asociación · sitio web · página · Who We Are (29 sep) */

/* Una portada y tres bloques, y ninguno se parece al anterior:

   01 · Portada — sobre blanco: el rótulo, el titular en tres filas, la
        bajada y el párrafo a la izquierda; a la derecha, el collage editorial
        (la composición de Rodrigo). Debajo, la cinta de
        las seis actividades.
   02 · Our connection — dos papeles dentro de un mismo sistema. Un solo
        bloque dentro del ancho de la página: el panel de marfil con el texto
        y, pegado, el relevo. Primero Inkaterra (la casa de la Reserva
        Amazónica); al ritmo del scroll —mientras el bloque cruza la pantalla,
        sin fijarlo— un divisor la recorre de derecha a izquierda y entra ITA.
        El divisor también se arrastra (ratón, dedo o teclado). Las dos
        palabras INKATERRA tienen el mismo ancho y el mismo sitio: al pasar el
        divisor la palabra se queda quieta y cambia lo de alrededor.
   03 · Mission & vision — dos paneles, musgo y marfil, cada uno con su
        grabado: el título («Our mission», «Our vision») y, debajo, el texto
        oficial completo. Sin rótulos: ni dentro de las tarjetas ni encima.
   04 · Our values — tipográfica y sistemática, abierta: sin panel, sobre el
        blanco de la página, con el mismo aire arriba y abajo que separa la
        portada de Our connection (--aire). Una retícula de 3 × 2 cuyo primer
        módulo es el encabezado; los otros cinco,
        los valores (grabado, nombre y frase), con filetes entre módulos. Sin
        números. En tableta, 2 × 3; en móvil, cada valor plegado (nombre y
        flecha) que se despliega con su grabado y su frase, con un fundido.
   05 · Our story — el puente a History, como en la maqueta de Rodrigo: la
        foto de Tambopata en 1986 a todo el ancho y en su proporción, pegada al
        pie; un degradado #131a0c hacia la derecha con el texto en blanco. En
        tableta vertical y móvil, la foto arriba y el texto debajo, sobre el
        #131a0c que baja hasta el verde del pie. Todo el banner es el enlace.
*/

.about ::selection{background:var(--salvia);color:var(--bosque)}   /* al seleccionar texto, los colores de ITA */

/* ── 01 · portada ───────────────────────────────────────────────────────── */
/* sobre blanco: a la izquierda el texto; a la derecha el collage (una sola imagen). Viene del
   hero «Lámina» del primer prototipo, sin botones, sello ni trama */
.about .portada{position:relative;padding:clamp(56px,6.1vw,88px) 0;background:var(--papel);overflow:hidden}   /* el mismo aire arriba y abajo: la foto queda a la misma distancia de la cabecera que de la cinta de actividades */
.about .portada .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about .portada .rotulo{margin-bottom:18px}
.about .portada h1{font-family:var(--ui);font-weight:500;font-size:var(--h1);letter-spacing:-.035em;line-height:1.02;max-width:none;color:var(--tinta);margin:0 0 clamp(26px,2.4vw,34px);text-wrap:balance}
.about .portada h1 em{font-style:normal;font-weight:700;color:var(--musgo)}
@media (max-width:960px){.about .portada h1 br.l{display:none}}   /* el titular en tres filas en escritorio; más estrecho, lo reparte el balance */
.about .portada .bajada{font-family:var(--ui);font-weight:400;font-size:clamp(17px,1.4vw,20px);line-height:1.34;letter-spacing:-.012em;color:var(--tinta);max-width:38ch;margin:0 0 clamp(16px,1.5vw,22px);text-wrap:pretty}   /* la bajada: letra de titular (Archivo 400), más pequeña y de menos peso que el titular */
.about .portada .entrada{font-family:var(--texto);font-size:16px;line-height:1.55;color:var(--tinta-suave);max-width:50ch;margin:0;text-wrap:pretty}
/* el collage: la composición completa de Rodrigo, una sola imagen con su transparencia */
.about .portada .collage{margin:0}
.about .portada .collage img{display:block;width:100%;max-width:none;height:auto;transform:scale(1.28);transform-origin:50% 50%}   /* al 128 %, la escala que eligió Rodrigo; el margen transparente del PNG absorbe el crecimiento */
@media (max-width:850px){.about .portada .collage img{transform:scale(1.18)}}   /* apilada, a todo el ancho: más grande, justo sin salirse (el margen transparente del PNG lo absorbe) y más cerca del párrafo */
/* en ordenador, el hero y la cinta de actividades llenan justo la pantalla (Rodrigo, 3 oct): en la primera vista la cinta queda
   pegada al borde inferior y luego corre con la página. Manda el alto disponible: el collage se achica para caber con el mismo
   aire arriba y abajo (también en portátiles bajos) y, en pantallas muy bajas, el titular baja un poco. Solo en pantallas
   apaisadas y de hasta 1020 px de alto: en un monitor vertical (o casi cuadrado) o en uno muy alto, estirado quedaría vacío;
   ahí el hero conserva su alto natural y la cinta va justo debajo.
   El collage escalado al 128 % ocupa a la vista justo el alto de su caja (el PNG tiene ~11 % de margen transparente arriba y abajo) */
@media (min-width:961px) and (min-aspect-ratio:5/4) and (max-height:1020px){
  .about .portada{--alto:calc(100svh - var(--cab-h) - var(--tira));--margen:clamp(28px,6svh,88px);display:flex;flex-direction:column;justify-content:center;min-height:var(--alto);padding:var(--margen) 0}
  .about .portada .collage{justify-self:center;width:min(100%,calc((var(--alto) - 2*var(--margen))*1320/1192))}
  .about .portada h1{font-size:min(var(--h1),max(30px,6.2svh))}
}

/* ── 01b · las seis actividades, en una cinta que corre sin fin ─────────────── */
/* bosque a todo el ancho, baja; las actividades, con mucho aire entre ellas y en blanco y vapor intercalados. Cuatro copias de la lista:
   al llegar a la mitad (dos listas) el dibujo es idéntico y el bucle no tiene costura, también
   en pantallas muy anchas. Debajo, --aire hasta la cita */
.about{--tira:clamp(40px,3.1vw,46px)}   /* el alto de la cinta; la portada lo resta para que las dos llenen la pantalla */
@media (pointer:coarse){.about{--tira:clamp(44px,3.1vw,46px)}}   /* con el dedo, cada actividad es un objetivo de 44 px como mínimo */
.about .actividades{position:relative;background:var(--bosque);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}   /* el gesto vertical es de la página; el horizontal arrastra la cinta (js/about.js) */
.about .actividades::before,.about .actividades::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:clamp(64px,12vw,200px);pointer-events:none}   /* en los bordes, las actividades se difuminan en el bosque */
.about .actividades::before{left:0;background:linear-gradient(90deg,var(--bosque),rgba(36,52,20,0))}
.about .actividades::after{right:0;background:linear-gradient(270deg,var(--bosque),rgba(36,52,20,0))}
.about .actividades .cinta{display:flex;width:max-content;animation:actividades 48s linear infinite}
.about .actividades ul{display:flex;list-style:none;margin:0;padding:0}
.about .actividades li{display:flex;font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:#fff;white-space:nowrap}
.about .actividades li:nth-child(even){color:var(--vapor)}   /* intercaladas: blanco y vapor */
/* cada actividad es un enlace (por ahora simulado): toda la celda, con su aire, es clicable. Al pasar el ratón la cinta frena
   suave hasta pararse (js/about.js), las demás se apagan y la elegida se subraya de izquierda a derecha —al salir, el filete se
   recoge hacia la derecha— y asoma el chevrón del menú, en salvia, sobre el aire que la sigue (no mueve nada) */
.about .actividades a{display:flex;align-items:center;height:var(--tira);padding:0 clamp(32px,3.6vw,56px);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;transition:opacity var(--dur-media) var(--curva),color var(--dur-media) var(--curva)}
.about .actividades.arrastrando,.about .actividades.arrastrando a{cursor:grabbing}
.about .actividades .nm{position:relative}
.about .actividades .nm::after{content:"";position:absolute;left:0;right:.16em;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--curva)}   /* sin el espaciado de la última letra */
.about .actividades .nm::before{content:"";position:absolute;left:100%;top:50%;width:10px;height:10px;margin:-5px 0 0 4px;background:var(--salvia);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5 7.5 6 4 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5 7.5 6 4 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:translateX(-8px);transition:opacity .3s var(--curva),transform .45s var(--curva)}
@media (hover:hover) and (pointer:fine){
  .about .actividades .cinta:hover a{opacity:.4}
  .about .actividades .cinta a:hover{opacity:1;color:#fff}
  .about .actividades a:hover .nm::after{transform:scaleX(1);transform-origin:0 50%}
  .about .actividades a:hover .nm::before{opacity:1;transform:none;transition-delay:.08s}
  .about .actividades a:active .nm::before{transform:translateX(4px);transition-duration:.12s;transition-delay:0s}   /* al hacer clic, el chevrón empuja */
}
@media (hover:none){   /* con el dedo: al tocar, la misma respuesta que al pasar el ratón */
  .about .actividades a:active{color:#fff}
  .about .actividades a:active .nm::after{transform:scaleX(1);transform-origin:0 50%;transition-duration:.3s}
}
.about .actividades a:focus-visible{outline:none;color:#fff}
.about .actividades a:focus-visible .nm::after{transform:scaleX(1);transform-origin:0 50%}
.about .actividades a:focus-visible .nm::before{opacity:1;transform:none}
@keyframes actividades{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.about .actividades .cinta{animation:none}.about .actividades a,.about .actividades .nm::after,.about .actividades .nm::before{transition:none}}

/* ── 01c · la cita de José Koechlin ─────────────────────────────────────── */
/* una pausa entre la cinta y Our connection: una comilla grande en salvia, la frase centrada y
   grande en Archivo con la idea destacada en musgo, y la firma con un retrato pequeño. Con más aire (Rodrigo, 3 oct): la misma
   distancia desde la cinta que hasta Our connection: --aire arriba y abajo */
.about .cita{padding:var(--aire) 0;text-align:center}   /* la tinta de la comilla empieza justo en el borde del padding: el aire visible es --aire arriba y abajo */
.about .cita figure{margin:0}
.about .cita blockquote{margin:0}
.about .cita blockquote p{font-family:var(--ui);font-weight:500;font-size:clamp(25px,2.6vw,38px);line-height:1.2;letter-spacing:-.025em;color:var(--bosque);margin:0 auto;max-width:30ch;text-wrap:balance}
.about .cita .comilla{display:block;height:.4em;margin:0 0 clamp(16px,1.6vw,22px);font-family:var(--ui);font-weight:700;font-size:clamp(96px,8.4vw,128px);line-height:.72;color:var(--salvia)}   /* la comilla grande abre la cita */
.about .cita blockquote p em{font-style:normal;font-weight:700;color:var(--musgo)}   /* la idea, destacada como en el titular de la portada */
.about .cita figcaption{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(32px,3.2vw,46px)}
.about .cita .retrato{flex:none;width:56px;height:56px;object-fit:cover}   /* cuadrado: en el estilo de ITA no hay formas redondeadas */
.about .cita .firma{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.about .cita .nombre{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--musgo)}
.about .cita .cargo{font-family:var(--texto);font-size:14px;line-height:1.4;color:var(--tinta-suave)}

/* ── 02 · la conexión: dos papeles dentro de un mismo sistema ───────────── */
/* un solo bloque dentro del ancho de la página, como en la referencia: el
   panel de marfil con el texto (~38 %) y la imagen (~62 %), pegados y a la
   misma altura; alrededor, el blanco de la página. Se construye igual que los
   paneles de Mission & vision, justo debajo */
.about{--aire:clamp(56px,8.4vw,120px)}   /* un solo aire entre bloques, parejo en toda la página (Rodrigo, 4 oct): cinta → cita, cita → Our connection, Mission & vision → Our values y Our values → Our story. Va con el ancho, no con el alto de la pantalla */
.about .conexion{padding:0}   /* el aire de arriba lo pone la cita */
.about .conexion .wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:stretch}
.about .conexion .texto{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,3.6vw,52px) clamp(28px,3.2vw,48px);background:var(--marfil)}
.about .conexion .texto .rotulo{align-self:flex-start}
.about .conexion .rotulo{margin-bottom:clamp(14px,1.4vw,18px)}
.about .conexion h2,.about .mv article h2,.about .valores h2{font-family:var(--ui);font-weight:600;font-size:clamp(28px,2.5vw,38px);line-height:1.04;letter-spacing:-.034em;color:var(--bosque);max-width:none}   /* un solo tamaño de titular para el conjunto de paneles: el de «Different roles, shared purpose.» manda; «Our mission» y «Our vision» lo comparten, con su peso de siempre (500) */
.about .conexion h2{margin:0 0 clamp(14px,1.4vw,18px)}
.about .conexion .texto p:not(.rotulo){font-family:var(--texto);font-size:clamp(15.5px,1.1vw,17px);line-height:1.55;color:var(--tinta-suave);margin:0;max-width:48ch;text-wrap:pretty}

/* el relevo: dos capas del mismo tamaño, Inkaterra debajo e ITA encima,
   recortada desde la izquierda hasta el divisor. --p (0 → 1, lo mueve
   js/about.js) es cuánto se ve de ITA; en los extremos queda siempre una franja
   de --m (media pestaña: así nunca se corta) de la otra foto,
   para que se entienda que hay otra */
.about .relevo{--p:0;--m:21px;--corte:calc(var(--m) + (1 - var(--p)) * (100% - 2 * var(--m)));
  --w:clamp(190px,17vw,250px);--gap:clamp(16px,1.4vw,20px);--li:clamp(15px,1.12vw,16.5px);--linea:calc(var(--li) * 1.45 * 2 + 4px);   /* --linea: las funciones de ITA, en dos filas */
  position:relative;overflow:hidden;min-height:clamp(380px,32vw,460px);background:var(--carbon);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:ew-resize}
.about .relevo .capa{position:absolute;inset:0;overflow:hidden;isolation:isolate}   /* cada capa, su propio apilado: el texto de Inkaterra nunca asoma por encima de la foto de ITA */
.about .relevo .ita{clip-path:inset(0 0 0 var(--corte))}
/* cada foto con su luz (la casa al anochecer, con las luces del salón detrás
   del texto; la estación de ITA, de día): un brillo algo más bajo (0,8) ya
   viene en los archivos (pesan menos y el navegador no aplica filtros); encima,
   un velo ligero y una sombra suave solo detrás de la marca, para que el
   blanco se lea sin apagar la fotografía. Y un zoom lento atado al relevo: la
   casa se acerca mientras se va y la estación se aleja mientras llega; --e
   añade el acercamiento de la entrada (1 → 0) */
@property --e{syntax:'<number>';inherits:true;initial-value:0}
.about .relevo .foto{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;pointer-events:none;will-change:transform}
.about .relevo .ink .foto{object-position:40% 55%;transform:scale(calc(1.02 + var(--p) * .08 + var(--e) * .12))}
.about .relevo .ita .foto{object-position:50% 60%;transform:scale(calc(1.1 - var(--p) * .08 + var(--e) * .12))}
.about .relevo .capa::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(50% 42% at 50% 50%,rgba(20,26,15,.5),rgba(20,26,15,.22) 68%,rgba(20,26,15,0) 100%),
  linear-gradient(180deg,rgba(20,26,15,.16),rgba(20,26,15,.26))}   /* la foto, casi tal cual; la sombra, solo detrás de la marca */

/* cada marca es una sola pieza —el logotipo y, debajo, lo que hace, en UNA
   línea con los filetes cortos de la franja de datos del hero— y las dos se
   equilibran a ojo, no por medida: el pie de la de Inkaterra —el lema— cae en
   la misma línea que el pie de la firma de ITA, así las funciones de las dos
   quedan a la misma altura y a la misma distancia de su logotipo, y las dos
   palabras INKATERRA, centradas en el mismo eje.
   La firma de ITA va sin «Perú» (Rodrigo, 29 sep: para que el logotipo crezca):
   sin esa línea, su parte bajo la palabra mide casi lo mismo que el lema de
   Inkaterra. Logo 2026 CON «PERÚ» en todas partes (Rodrigo, 5 oct): las dos palabras INKATERRA, del mismo
   tamaño (×1.0053, medido sobre los archivos); como el de ITA es más alto bajo la palabra (por «PERÚ»), las funciones
   se colocan bajo su pie y el lema de Inkaterra queda con algo más de aire: así arrancan en la misma línea.
   Medido sobre los archivos (en anchos de cada logotipo): la palabra INKATERRA tiene el centro a 0,0849 del borde de
   arriba en el de Inkaterra y a 0.1992 en el de ITA; el pie de ITA queda a 0.2932 por debajo de ese centro.
   --eje (el centro de las dos palabras) centra en vertical la pieza de ITA */
.about .relevo .marca{--k:1.0053;--eje:calc(50% - (var(--gap) + var(--linea) + var(--w) * 0.0939) / 2);position:absolute;inset:0;z-index:1;pointer-events:none}
.about .relevo .logo{position:absolute;left:50%;max-width:none;height:auto;transform:translateX(-50%)}
.about .relevo .ink .logo{width:calc(var(--w) * var(--k));top:calc(var(--eje) - var(--w) * var(--k) * .0849)}
.about .relevo .ita .logo{width:var(--w);top:calc(var(--eje) - var(--w) * 0.1992)}
.about .relevo .marca ul{position:absolute;left:0;right:0;top:calc(var(--eje) + var(--w) * 0.2932 + var(--gap));list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:4px;margin:0;padding:0 24px}
.about .relevo .marca li{display:flex;align-items:center;font-family:var(--ui);font-weight:500;font-size:var(--li);line-height:1.45;letter-spacing:.002em;color:#fff;white-space:nowrap}
.about .relevo .marca li+li::before{content:"";display:block;width:1px;height:.95em;margin:0 clamp(12px,1.1vw,16px);background:rgba(255,255,255,.45)}
/* las cuatro funciones de ITA, en dos filas centradas —«Research | Conservation» y
   «Education | Sustainable development»—: un salto de fila (el ::before de la lista,
   a todo el ancho) entre la segunda y la tercera, y sin filete al empezar la fila */
.about .relevo .ita ul::before{content:"";flex-basis:100%;height:0;order:2}
.about .relevo .ita li:nth-child(-n+2){order:1}
.about .relevo .ita li:nth-child(n+3){order:3}
.about .relevo .ita li:nth-child(3)::before{display:none}

/* el divisor, con el ADN de los botones de la página: una línea de 1,5 px y, en
   el centro, una pestaña sólida de 42 × 34 con el radio del sistema (--r), en papel con
   las flechas en bosque, siempre blanca. Es un control (role=slider): se
   arrastra y se mueve con el teclado */
.about .relevo .divisor{position:absolute;z-index:2;top:0;bottom:0;left:var(--corte);width:0;outline:none}
.about .relevo .divisor::before{content:"";position:absolute;top:0;bottom:0;left:-.75px;width:1.5px;background:rgba(255,255,255,.92)}
.about .relevo .asa{position:absolute;top:50%;left:0;display:grid;place-items:center;width:42px;height:34px;margin:-17px 0 0 -21px;border-radius:var(--r);background:var(--papel);color:var(--bosque);transition:transform .3s var(--fluida)}
.about .relevo .asa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.about .relevo:hover .asa{transform:scale(1.06)}}   /* siempre blanca: al pasar o al arrastrar solo crece un poco */
.about .relevo.arrastrando .asa{transform:scale(1.06)}
.about .relevo .divisor:focus-visible .asa{outline:2px solid var(--rio);outline-offset:3px}

/* la entrada: cuando la sección asoma (js/about.js le quita .por-entrar), el texto
   sube un poco, uno detrás de otro; la foto de Inkaterra llega desde más cerca
   y se asienta, su marca aparece después y, al final, el divisor. Sin JS o con
   movimiento reducido no hay .por-entrar: todo está desde el principio */
.about .relevo .marca,.about .relevo .divisor{transition:opacity .9s var(--fluida),transform .9s var(--fluida)}   /* el texto entra con las demás piezas (data-r, al final) */
.about .relevo{transition:opacity .8s var(--fluida),--e 1.8s cubic-bezier(.2,.7,.2,1)}
.about .conexion.por-entrar .relevo{opacity:0;--e:1}
.about .conexion.por-entrar .relevo .marca{opacity:0;transform:translateY(12px)}
.about .conexion.por-entrar .relevo .divisor{opacity:0}
.about .conexion .relevo{transition-delay:.1s}
.about .conexion .relevo .marca{transition-delay:.45s}
.about .conexion .relevo .divisor{transition-delay:.75s}

/* ── 03 · misión y visión ───────────────────────────────────────────────── */
.about .mv{--canal:clamp(16px,2vw,28px);padding:var(--canal) 0 0}   /* arriba, el mismo canal que separa las dos tarjetas: Our connection, Our mission y Our vision se leen como un solo conjunto de paneles; la portada queda aparte, con más aire */
.about .mv .par{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--canal)}
.about .mv article{position:relative;display:grid;align-content:start;row-gap:clamp(14px,1.5vw,20px);padding:clamp(26px,3vw,40px);min-height:clamp(240px,30vh,320px);overflow:hidden}
.about .mv .mision{--g:clamp(96px,9.5vw,138px);--gh:calc(var(--g) * 1.294);background:var(--musgo)}   /* --g, --gh: ancho y alto del grabado de cada tarjeta. Musgo (Rodrigo, 29 sep) */
.about .mv .vision{--g:clamp(130px,12.5vw,178px);--gh:calc(var(--g) * .69);background:var(--marfil)}
.about .mv article h2{position:relative;z-index:1;margin:0;font-weight:500}
.about .mv article p{position:relative;z-index:1;font-family:var(--texto);font-size:clamp(15.5px,1.1vw,17px);line-height:1.6;color:var(--bosque);margin:0;max-width:min(36ch,calc(100% - var(--g)));text-wrap:pretty}   /* en bosque: sobre salvia, la tinta suave no llega a 4,5:1. El texto termina antes del grabado de su tarjeta */
.about .mv .mision h2,.about .mv .mision p{color:#fff}   /* sobre musgo, en blanco: 6,5:1 */
.about .mv .grabado{position:absolute;right:clamp(12px,1.6vw,24px);bottom:clamp(10px,1.4vw,20px);width:var(--g);height:auto;opacity:.7;mix-blend-mode:multiply;pointer-events:none}
.about .mv .vision .grabado{opacity:.58}

/* ── 04 · nuestros valores ─────────────────────────────────────────────────── */
/* abierta: sin panel, sobre el blanco de la página, solo la retícula de filetes
   (en el color de los filetes de la página). Arriba y abajo, --aire: el conjunto de
   paneles de arriba queda con el mismo aire por encima y por debajo */
.about .valores{--g:clamp(32px,3.4vw,52px);--filete:var(--linea);padding:var(--aire) 0}
.about .valores h2{margin:0}
.about .valores .cab p:not(.rotulo){font-family:var(--texto);font-size:clamp(16px,1.15vw,17.5px);line-height:1.55;color:var(--tinta-suave);margin:clamp(14px,1.4vw,18px) 0 0;max-width:34ch;text-wrap:pretty}
/* la retícula: seis módulos iguales —el encabezado y los cinco valores—; los
   filetes van en el centro del canal (verticales) y entre filas (horizontales,
   continuos de un borde a otro) */
.about .valores .rejilla{display:grid;column-gap:var(--g)}
.about .valores .rejilla > *{position:relative}
.about .valores .valor{display:flex;flex-direction:column;align-items:flex-start}
.about .valores .valor .detalle{display:contents}
.about .valores .valor .grab{order:-1}
.about .valores .valor .grab{display:block;height:clamp(76px,6.4vw,96px);width:auto;max-width:70%;object-fit:contain;mix-blend-mode:multiply;opacity:.9;margin:0 0 clamp(16px,1.6vw,22px);transition:opacity .35s var(--fluida)}
.about .valores .valor h3{font-family:var(--ui);font-weight:500;font-size:clamp(19px,1.5vw,22px);line-height:1.18;letter-spacing:-.018em;color:var(--bosque);margin:0 0 10px}
.about .valores .valor p{font-family:var(--texto);font-size:clamp(15px,1.08vw,16.5px);line-height:1.55;color:var(--tinta-suave);margin:0;max-width:38ch;text-wrap:pretty}
.about .valores .valor h3,.about .valores .valor p{transition:transform .35s var(--fluida)}
/* escritorio: 3 × 2 */
@media (min-width:1100px){
  .about .valores .rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}
  .about .valores .rejilla > *{padding:clamp(30px,3.2vw,44px) 0}
  .about .valores .rejilla > :nth-child(-n+3){padding-top:0}
  .about .valores .rejilla > :nth-child(n+4){padding-bottom:0}
  .about .valores .rejilla > :not(:nth-child(3n+1))::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--g) / -2);width:1px;background:var(--filete)}
  .about .valores .rejilla > :nth-child(n+4)::after{content:"";position:absolute;top:0;left:calc(var(--g) / -2);right:calc(var(--g) / -2);height:1px;background:var(--filete)}
  .about .valores .rejilla > :nth-child(3n+1)::after{left:0}
  .about .valores .rejilla > :nth-child(3n)::after{right:0}
}
/* al pasar: el grabado se aviva y el texto se desplaza 3 px. Nada más */
@media (hover:hover) and (pointer:fine) and (min-width:1100px){
  .about .valores .valor:hover .grab{opacity:1}
  .about .valores .valor:hover h3,.about .valores .valor:hover p{transform:translateX(3px)}
}
/* tableta: 2 × 3 */
@media (min-width:761px) and (max-width:1099px){
  .about .valores .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about .valores .rejilla > *{padding:28px 0}
  .about .valores .rejilla > :nth-child(-n+2){padding-top:0}
  .about .valores .rejilla > :nth-child(n+5){padding-bottom:0}
  .about .valores .rejilla > :nth-child(2n)::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--g) / -2);width:1px;background:var(--filete)}
  .about .valores .rejilla > :nth-child(n+3)::after{content:"";position:absolute;top:0;height:1px;background:var(--filete)}
  .about .valores .rejilla > :nth-child(n+3):nth-child(2n+1)::after{left:0;right:calc(var(--g) / -2)}
  .about .valores .rejilla > :nth-child(n+3):nth-child(2n)::after{left:calc(var(--g) / -2);right:0}
}
/* móvil: el panel de borde a borde, con un filete arriba (la tarjeta de visión,
   justo encima, también es de marfil); el encabezado y, debajo, cada valor
   plegado —solo el nombre y una flecha—: al tocarlo, la fila crece (0fr → 1fr)
   y su grabado y su frase aparecen con un fundido; al cerrarlo, al revés.
   Sin JS, todo abierto */
@media (max-width:760px){
  .about .valores .cab{padding:0 0 26px}
  .about .valores .valor{display:grid;grid-template-rows:auto 1fr;align-items:stretch;border-top:1px solid var(--filete);transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}   /* stretch: el detalle mide lo que su fila, así se recorta mientras crece */
  .about .valores .valor:last-child{border-bottom:1px solid var(--filete)}
  .about .valores .valor h3{margin:0;font-size:18px}
  .about .valores .valor .detalle{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start;min-height:0;overflow:hidden;transition:opacity .32s cubic-bezier(.4,0,.2,1),visibility 0s linear .5s}   /* al cerrar: se desvanece mientras la fila se recoge */
  .about .valores .valor .grab{width:56px;height:auto;max-width:none;margin:0 0 18px}
  .about .valores .valor .texto{padding:0 0 18px}
  .about .valores .valor p{max-width:none;font-size:15.5px}
  .about .valores.plegable .valor{grid-template-rows:auto 0fr}
  .about .valores.plegable .valor.abierto{grid-template-rows:auto 1fr}
  .about .valores.plegable .valor .detalle{opacity:0;visibility:hidden}
  .about .valores.plegable .valor.abierto .detalle{opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.4,0,.2,1) .08s,visibility 0s}   /* al abrir: aparece mientras la fila crece */
  .about .valores.sin-anim .valor,.about .valores.sin-anim .valor .detalle{transition:none}
  .about .valores:not(.plegable) .valor h3{padding:16px 0 10px}
  .about .valores .abre{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;padding:14px 0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease}
  .about .valores .abre:active{opacity:.6}   /* al tocar, responde */
  .about .valores .abre:focus-visible{outline:2px solid var(--rio);outline-offset:-2px}
  .about .valores .abre .flecha{flex:none;width:14px;height:14px;fill:none;stroke:var(--musgo);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--fluida)}
  .about .valores .abre[aria-expanded="true"] .flecha{transform:rotate(180deg)}
}

/* ── 05 · Our story: el puente a History ──────────────────────────────────── */
/* la maqueta de Rodrigo: la foto de 1986 —ampliada a lo ancho y recoloreada por él— a todo
   el ancho y en su proporción (2400 : 425), pegada al pie: la página se cierra con la
   historia. Encima, el degradado #131a0c hacia la derecha, medido sobre su maqueta (empieza
   al 30 % y llega al 85 % de opacidad al 86 %), y el texto en blanco, alineado a la retícula
   de la página; las personas (20–25 % del ancho) quedan limpias. Por debajo de ~1240 px la
   proporción daría menos de 220 px de alto: el banner se queda en 220 y la foto se recorta
   por la derecha, anclada a la izquierda */
.about .historia{padding:0;--grano:url("../img/ruido-131a0c.png")}   /* el degradado lleva grano, como la foto: #131a0c con ruido uniforme monocromático del 2 % (±5 niveles), en tesela de 128 px */
.about .historia .banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;height:clamp(220px,17.708vw,max(255px,13.5vw));background:#131a0c var(--grano)}   /* 17,708vw = la proporción de la foto (2400 : 425), con tope en 255 px (el alto de la maqueta a 1440); por encima de ~1890 px crece al 13,5vw para que las personas quepan enteras, con suelo bajo los pies para la leyenda. Una altura, no aspect-ratio + min-height: esa pareja convierte el mínimo de alto en un mínimo de ancho y el banner se sale de la pantalla */
.about .historia .foto{position:absolute;inset:0;z-index:-2;width:100%;max-width:none;height:100%;object-fit:cover;object-position:0% 90%;transition:transform .9s var(--fluida)}
.about .historia .banner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grano);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.07) 36%,rgba(0,0,0,.185) 45%,rgba(0,0,0,.316) 54%,rgba(0,0,0,.463) 63%,rgba(0,0,0,.626) 72%,rgba(0,0,0,.786) 81%,rgba(0,0,0,.85) 86%);
          mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.07) 36%,rgba(0,0,0,.185) 45%,rgba(0,0,0,.316) 54%,rgba(0,0,0,.463) 63%,rgba(0,0,0,.626) 72%,rgba(0,0,0,.786) 81%,rgba(0,0,0,.85) 86%)}
.about .historia .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,36%,420px)}
.about .historia .texto{grid-column:2;padding:28px 0}
.about .historia h2{font-family:var(--ui);font-weight:500;font-size:clamp(22px,2.1vw,30px);line-height:1.1;letter-spacing:-.03em;color:#fff;margin:0;max-width:none;text-wrap:balance}
.about .historia .texto p{font-family:var(--texto);font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:#fff;margin:clamp(8px,.8vw,12px) 0 0;max-width:none}   /* blanco puro: al 88 % no llega a 4,5:1 en los puntos más claros del cielo */
/* el CTA, con filete blanco, como los botones sobre foto del hero del home; al pasar se
   llena de blanco. Su ::after cubre todo el banner, así todo el banner es clicable y el
   nombre del enlace sigue siendo «Discover our story» */
.about .historia .ir{display:inline-flex;align-items:center;gap:10px;height:46px;margin-top:clamp(14px,1.4vw,20px);padding:0 18px 0 20px;border:1.5px solid #fff;border-radius:var(--r);background:transparent;color:#fff;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;line-height:1;transition:background-color .25s ease,color .25s ease}
.about .historia .ir svg{width:14px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--fluida)}
.about .historia .ir::after{content:"";position:absolute;inset:0}
.about .historia .ir:focus-visible{outline:2px solid var(--rio);outline-offset:3px}
.about .historia .ir{-webkit-tap-highlight-color:transparent}
   /* al tocar (también en móvil), el botón se llena */
@media (hover:hover) and (pointer:fine){
}
/* el zoom de la foto, solo en horizontal: apilada, la foto crecería por debajo del fundido y asomaría una franja */
@media (hover:hover) and (pointer:fine) and (min-width:561px){.about .historia .banner:hover .foto{transform:scale(1.02)}}
/* por encima de 1440 (el ancho de la maqueta), el degradado guarda con el texto —que va
   centrado en la retícula— la misma relación que a 1440: cada parada, a la misma distancia
   del centro. Así el texto siempre cae sobre la misma zona oscura */
@media (min-width:1441px){.about .historia .banner::before{-webkit-mask-image:linear-gradient(90deg,transparent calc(50% - 288px),rgba(0,0,0,.07) calc(50% - 202px),rgba(0,0,0,.185) calc(50% - 72px),rgba(0,0,0,.316) calc(50% + 58px),rgba(0,0,0,.463) calc(50% + 187px),rgba(0,0,0,.626) calc(50% + 317px),rgba(0,0,0,.786) calc(50% + 446px),rgba(0,0,0,.85) calc(50% + 518px));mask-image:linear-gradient(90deg,transparent calc(50% - 288px),rgba(0,0,0,.07) calc(50% - 202px),rgba(0,0,0,.185) calc(50% - 72px),rgba(0,0,0,.316) calc(50% + 58px),rgba(0,0,0,.463) calc(50% + 187px),rgba(0,0,0,.626) calc(50% + 317px),rgba(0,0,0,.786) calc(50% + 446px),rgba(0,0,0,.85) calc(50% + 518px))}}
/* tableta (761–900): la versión horizontal, pero con la columna de texto más cerca de las
   personas; el degradado se ancla a esa columna (que empieza 340 px antes del borde) para
   que el texto caiga sobre la misma sombra que a 1440 sin tocar a las personas */
@media (min-width:761px) and (max-width:900px){.about .historia .banner::before{-webkit-mask-image:linear-gradient(90deg,transparent calc(100% - 460px),rgba(0,0,0,.1) calc(100% - 420px),rgba(0,0,0,.26) calc(100% - 385px),rgba(0,0,0,.45) calc(100% - 350px),rgba(0,0,0,.62) calc(100% - 270px),rgba(0,0,0,.78) calc(100% - 170px),rgba(0,0,0,.85) calc(100% - 100px));mask-image:linear-gradient(90deg,transparent calc(100% - 460px),rgba(0,0,0,.1) calc(100% - 420px),rgba(0,0,0,.26) calc(100% - 385px),rgba(0,0,0,.45) calc(100% - 350px),rgba(0,0,0,.62) calc(100% - 270px),rgba(0,0,0,.78) calc(100% - 170px),rgba(0,0,0,.85) calc(100% - 100px))}}
/* 561–760: todavía horizontal, más apretado: la columna de texto a 280 px y la foto corrida
   a la izquierda lo justo para que el degradado —anclado a la columna— empiece después de
   las personas */
@media (min-width:561px) and (max-width:760px){
  .about .historia .banner .wrap{grid-template-columns:minmax(0,1fr) 280px}
  .about .historia .foto{object-position:min(0px,100vw - 727px) 75%}
  .about .historia .banner::before{-webkit-mask-image:linear-gradient(90deg,transparent calc(100% - 400px),rgba(0,0,0,.1) calc(100% - 375px),rgba(0,0,0,.26) calc(100% - 350px),rgba(0,0,0,.45) calc(100% - 320px),rgba(0,0,0,.62) calc(100% - 240px),rgba(0,0,0,.78) calc(100% - 140px),rgba(0,0,0,.85) calc(100% - 80px));mask-image:linear-gradient(90deg,transparent calc(100% - 400px),rgba(0,0,0,.1) calc(100% - 375px),rgba(0,0,0,.26) calc(100% - 350px),rgba(0,0,0,.45) calc(100% - 320px),rgba(0,0,0,.62) calc(100% - 240px),rgba(0,0,0,.78) calc(100% - 140px),rgba(0,0,0,.85) calc(100% - 80px))}
}
/* móvil: la foto arriba, recortada para que las dos personas sean el motivo, sin el
   degradado lateral —aquí no hay texto encima que proteger—. Por abajo se funde en una
   curva larga y suave (solo los pies quedan a media sombra) que llega al borde sin
   escalón, en el mismo #131a0c con grano del bloque del texto: no hay frontera entre la
   foto y el color. El bloque acaba en un borde limpio contra el verde del pie. Desde
   561 px cabe la versión horizontal */
@media (max-width:560px){
  .about .historia .banner{--fh:min(74vw,340px);display:block;height:auto;padding:calc(var(--fh) + 16px) 0 clamp(40px,6vw,56px)}
  .about .historia .foto,.about .historia .banner::before{inset:0 0 auto;height:var(--fh)}
  .about .historia .foto{object-position:16% 50%}
  .about .historia .banner::before{-webkit-mask-image:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.04) 45%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.2) 72%,rgba(0,0,0,.32) 80%,rgba(0,0,0,.46) 86%,rgba(0,0,0,.55) 89%,rgba(0,0,0,.67) 92%,rgba(0,0,0,.8) 95%,rgba(0,0,0,.91) 97.5%,rgba(0,0,0,.97) 99%,#000 100%);mask-image:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.04) 45%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.2) 72%,rgba(0,0,0,.32) 80%,rgba(0,0,0,.46) 86%,rgba(0,0,0,.55) 89%,rgba(0,0,0,.67) 92%,rgba(0,0,0,.8) 95%,rgba(0,0,0,.91) 97.5%,rgba(0,0,0,.97) 99%,#000 100%)}
  .about .historia .wrap{display:block}
  .about .historia .texto{display:flex;flex-direction:column;padding:0}
  .about .historia h2{font-size:clamp(24px,7.2vw,28px);line-height:1.08}
  .about .historia .texto p{font-size:16px;margin-top:10px}
}
/* la leyenda de la foto, con la letra de los rótulos: en una línea, abajo a la izquierda de
   la foto, alineada a la retícula y bajo los pies de las personas; en móvil, sobre el titular */
.about .historia .texto .leyenda{position:absolute;left:max(40px,calc(50% - 590px));bottom:12px;margin:0;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap;color:rgba(255,255,255,.74);text-shadow:0 0 12px rgba(19,26,12,.9),0 1px 3px rgba(19,26,12,.7);max-width:none}
@media (min-width:1242px){.about .historia .texto .leyenda{bottom:15px}}   /* con 220 px de alto el suelo bajo los pies no da para más */
@media (max-width:560px){.about .historia .texto .leyenda{position:static;order:-1;margin:0 0 12px;font-size:11px;letter-spacing:.1em;line-height:1.5;text-shadow:none}}   /* en una línea y a 11 px: para caber se aprieta el espaciado, no la letra */
@media (max-width:363px){.about .historia .texto .leyenda{letter-spacing:.06em}}
@media (max-width:345px){.about .historia .texto .leyenda{font-size:10px;letter-spacing:.04em}}   /* 320 px */
/* en teléfono, el CTA a todo el ancho y de 52 px, como los botones del home */
@media (max-width:560px){
  .about .historia .ir{display:flex;justify-content:center;width:100%;height:52px;margin-top:24px}
}

/* tableta: el texto arriba, en la retícula; el panel debajo, de lado a lado */
@media (max-width:1100px){
  .about .conexion .wrap{grid-template-columns:minmax(0,1fr)}   /* el panel de texto encima de la imagen, pegados: el mismo bloque */
  .about .relevo{min-height:clamp(360px,50vw,460px)}
}
/* tableta: en el panel, el titular a la izquierda y el párrafo a la derecha, en la misma franja */
@media (min-width:761px) and (max-width:1100px){
  .about .conexion .texto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(32px,5vw,64px);align-items:end}
  .about .conexion .texto .rotulo{grid-column:1;grid-row:1;justify-self:start}
  .about .conexion h2{grid-column:1;grid-row:2;margin:0}
  .about .conexion .texto p:not(.rotulo){grid-column:2;grid-row:1 / 3;align-self:end}
}
/* la lámina en tableta y móvil, como en el primer prototipo */
@media (max-width:960px){
  .about .portada{padding:56px 0 48px}
  .about .portada .wrap{grid-template-columns:.95fr 1.05fr;gap:32px}
  .about .portada h1{max-width:none}
  .about .portada .bajada{font-size:17px}
  .about .portada .entrada{font-size:15px;max-width:34ch}
  }
@media (max-width:850px){
  .about .portada{padding:44px 0 36px}
  .about .portada .wrap{grid-template-columns:1fr;gap:20px}
  .about .portada h1{max-width:none;font-size:var(--h1-apilado)}
  .about .portada .bajada{font-size:19px;max-width:none}
  .about .portada .entrada{font-size:17px;max-width:none}
  .about .portada .collage{width:min(100%,560px)}
  }
@media (max-width:560px){
  .about .portada .bajada{font-size:20px;line-height:1.32}
  .about .portada .entrada{font-size:16px}
  }
/* móvil: el mismo relevo, a lo ancho de la página */
@media (max-width:760px){
  /* en móvil la sección va de borde a borde y cabe entera en la pantalla, bajo la
     cabecera: el texto arriba y el relevo ocupa lo que queda (nunca más de 800 px) */
  .about .conexion .wrap{width:100%;display:flex;flex-direction:column;height:min(calc(100svh - var(--cab-h) - 1px),800px)}   /* − 1 px: el filete de la cabecera */
  .about .conexion .texto{flex:none;padding:var(--aire) 40px 32px}   /* arriba, el mismo aire que Our values (Rodrigo, 4 oct) */
  .about .relevo{flex:1 1 auto;--w:204px;--li:15px;--linea:calc(var(--li) * 1.45 * 2 + 4px);min-height:260px}   /* --linea: la de ITA ocupa dos filas; ITA mide 204 px y el de Inkaterra (×1,0053), 205 */
  /* Mission & vision, como Our connection: de borde a borde, una tarjeta debajo de
     otra y sin separadores (el canal a cero); el texto, al mismo margen que el de
     Our connection. Una sola columna continua: texto · relevo · misión · visión */
  .about .mv{--canal:0px}
  .about .mv .wrap{width:100%}
  .about .mv .par{grid-template-columns:1fr}
  .about .mv article{padding-top:var(--aire);padding-left:40px;padding-right:40px}
}
/* tarjetas angostas (tableta y móvil): el texto usa todo el ancho y la tarjeta
   reserva abajo el alto de su grabado, que sigue en su esquina y de su tamaño */
@media (max-width:900px){
  .about .mv article{padding-bottom:calc(var(--gh) + 28px)}
  .about .mv article p{max-width:none}
}
@media (max-width:560px){
  .about .conexion .texto{padding:var(--aire) 28px 30px}
  .about .mv article{padding-top:var(--aire);padding-left:28px;padding-right:28px}
}

/* ── entradas: los gestos comunes están en css/pagina.css; aquí, lo propio de Who We Are ─────── */
/* Our values: en la retícula, primero el grabado, luego el nombre y la frase, y los filetes se dibujan;
   en la lista plegada de móvil, cada fila sube y aparece */
@media (min-width:761px){
  html.entradas .about [data-r="valor"] .grab,html.entradas .about [data-r="valor"] h3,html.entradas .about [data-r="valor"] p{transition:opacity 1s var(--e-suave),transform 1.25s var(--e-sale)}
  html.entradas .about [data-r="valor"] .grab{transition-delay:var(--d,0ms)}
  html.entradas .about [data-r="valor"] h3{transition-delay:calc(var(--d,0ms) + 90ms)}
  html.entradas .about [data-r="valor"] p{transition-delay:calc(var(--d,0ms) + 170ms)}
  html.entradas .about [data-r="valor"]:not(.dentro) .grab,html.entradas .about [data-r="valor"]:not(.dentro) h3,html.entradas .about [data-r="valor"]:not(.dentro) p{opacity:0;transform:translate3d(0,18px,0)}
  html.entradas .about .valores .rejilla > [data-r]::before{transform-origin:50% 0;transition:transform 1.4s var(--e-sale) var(--d,0ms)}
  html.entradas .about .valores .rejilla > [data-r]::after{transform-origin:0 50%;transition:transform 1.4s var(--e-sale) var(--d,0ms)}
  html.entradas .about .valores .rejilla > [data-r]:not(.dentro)::before{transform:scaleY(0)}
  html.entradas .about .valores .rejilla > [data-r]:not(.dentro)::after{transform:scaleX(0)}
}
@media (max-width:760px){
  html.entradas .about [data-r="valor"]{transition:opacity 1s var(--e-suave) var(--d,0ms),transform 1.2s var(--e-sale) var(--d,0ms)}
  html.entradas .about [data-r="valor"]:not(.dentro){opacity:0;transform:translate3d(0,16px,0)}
}

/* ── el estilo nuevo de la home (Rodrigo, 11 oct) ────────────────────────────
   Las mismas piezas, en el lenguaje de How ITA works: tarjetas con esquinas de 18 px separadas por un canal de
   14–20 px, piezas pequeñas a 14 px, el panel de texto en salvia clara. Los valores siguen abiertos, sin cajas (Rodrigo).
   Se escribe encima de lo anterior, sin tocarlo */
.about{--rad:16px;--canal:clamp(14px,1.4vw,20px)}
/* la cita: el retrato con esquinas suaves */
.about .cita .retrato{border-radius:16px}
/* Our connection: el panel y el relevo, dos tarjetas separadas por el canal */
.about .conexion .wrap{column-gap:var(--canal)}
.about .conexion .texto{background:#E8EDDF;border-radius:var(--rad)}
.about .conexion .relevo{border-radius:var(--rad);isolation:isolate}
.about .relevo .asa{border-radius:16px;box-shadow:0 6px 16px -8px rgba(20,26,15,.45)}
/* Mission & vision: las dos tarjetas con el mismo canal */
.about .mv{--canal:clamp(14px,1.4vw,20px)}
.about .mv article{border-radius:var(--rad)}
.about .mv .vision{background:#F3EFE5}
/* Our story: el botón como los del hero */
.about .historia .ir{height:50px;padding:0 22px 0 24px;border:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);font-size:15px;letter-spacing:-.005em;text-transform:none;transition:background .25s,color .25s,translate .35s var(--curva)}