/* =============================================================================
   WaterProof WEB — Página "Sobre nosotros" (/web/about/).
   Replica el diseño de la imagen de referencia. Depende de tokens.css +
   base.css + components.css (chrome compartido). Aquí solo secciones propias.
   ========================================================================== */

/* --- Hero: Sobre WaterProof ---------------------------------------------- */
.wpa-hero { padding:72px 0 56px; }
.wpa-hero__grid { display:grid; gap:48px; align-items:center; }
@media (min-width:900px){ .wpa-hero__grid { grid-template-columns:1fr 1fr; } }
.wpa-hero__text .wpw__title { margin-bottom:22px; font-size:clamp(32px,4vw,46px); }
.wpa-hero__text p { color:var(--primary-900); font-size:var(--fs-xl); line-height:1.4; max-width:42ch; padding-top: 14px;}
/* Tablet/móvil (apilado): título y párrafo centrados, como el diseño de Figma.
   En desktop (≥900px, dos columnas) el texto vuelve a la izquierda. */
@media (max-width:899.98px){
  .wpa-hero__text { text-align:center; }
  .wpa-hero__text p { margin-inline:auto; }
}

/* Foto con máscara orgánica del diseño (Figma WaterProof WEB, nodo 3460:2754)
   + dos círculos navy (elipses 3460:2753 y 3460:2756). Geometría en % relativa
   al grupo 3460:2752 (462.53 × 486.31). */
.wpa-blob { position:relative; width:min(463px,100%); margin-inline:auto; aspect-ratio:463/486; }
.wpa-blob__img { position:absolute; z-index:2; top:22.002%; left:0; width:100%; aspect-ratio:463/390; object-fit:cover;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22463%22%20height%3D%22390%22%20viewBox%3D%220%200%20463%20390%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5.06095%20247.218C-17.939%20147.718%2038.0684%2091.717%20160.57%2069.7176C283.071%2047.7182%20334.068%20-33.2834%20419.066%2015.2177C504.064%2063.7187%20457.07%20282.717%20341.57%20360.217C226.07%20437.717%2028.061%20346.718%205.06095%20247.218Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:100% 100%;
          mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22463%22%20height%3D%22390%22%20viewBox%3D%220%200%20463%20390%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5.06095%20247.218C-17.939%20147.718%2038.0684%2091.717%20160.57%2069.7176C283.071%2047.7182%20334.068%20-33.2834%20419.066%2015.2177C504.064%2063.7187%20457.07%20282.717%20341.57%20360.217C226.07%20437.717%2028.061%20346.718%205.06095%20247.218Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
          mask-repeat:no-repeat; mask-position:center; mask-size:100% 100%; }
.wpa-blob__deco { position:absolute; z-index:1; background:var(--primary-900); border-radius:50%; aspect-ratio:1; }
/* círculo navy grande, mayormente tapado por la foto (asoma arriba-izquierda) */
.wpa-blob__deco--1 { top:10.9%; left:17.08%; width:57.726%; }
/* círculo navy pequeño arriba a la derecha */
.wpa-blob__deco--2 { top:2.056%; left:71.563%; width:11.891%; }

/* --- Bandas de sección (fondo blanco; blob orgánico pálido en TNC) -------- */
.wpa-secband--tnc { background:#fff !important; }
.wpa-secband { background:var(--primary-50); padding:72px 0; position:relative; overflow:hidden; }
.wpa-split { position:relative; z-index:1; display:grid; gap:44px; align-items:center; }
/* Forma orgánica de fondo de la sección TNC (Figma WaterProof WEB, nodo 3820-2):
   una gran ola en --primary-50 (#F3F8FB) que barre detrás del logo y el texto. */
.wpa-secband--tnc::before { content:""; position:absolute; z-index:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221382%22%20height=%22821%22%20viewBox=%220%200%201382%20821%22%20fill=%22none%22%3E%3Cpath%20d=%22M0%20582.5C3.6915e-05%20776.548%20626%20988%201381.5%20613.5V481V350.5V0C1381.5%200%201375.5%20513%20775%20395.5C174.5%20278%20-3.6915e-05%20388.452%200%20582.5Z%22%20fill=%22%23F3F8FB%22/%3E%3C/svg%3E") no-repeat center;
  background-size:66% 76%; background-position-y: -5px;}
/* Desktop (dos columnas): ola horizontal, más alta que la banda y centrada. */
@media (min-width:880px){
  .wpa-split { grid-template-columns:1fr 1fr; }
  .wpa-secband--tnc::before { left:0; right:0; top:50%; transform:translateY(-50%); aspect-ratio:1382/821; }
}
/* Tablet/móvil (apilado): la ola llena la banda detrás del contenido centrado. */
@media (max-width:879.98px){
  .wpa-secband--tnc::before { inset:0; }
}
.wpa-split__text .wpw__title { margin-bottom:18px; }
.wpa-split__text p { color:var(--primary-900); font-size:var(--fs-lg); line-height:1.5; max-width:35ch; }
.wpa-split__text p + p { margin-top:16px; }
.wpa-split__text__p {  font-size:var(--fs-md) !important; line-height:1.25 !important; max-width:52ch !important; }
/* Tablet/móvil (apilado): título y párrafo centrados, como el diseño de Figma.
   En desktop (≥880px, dos columnas) el texto vuelve a la izquierda. */
@media (max-width:879.98px){
  .wpa-split__text { text-align:center; }
  .wpa-split__text p { margin-inline:auto; }
}
.wpa-split__logo { display:grid; place-items:center; }
.wpa-split__logo img { max-width:340px; width:100%; }
.wpa-split__media img { width:100%; border-radius:var(--rounded-2xl); box-shadow:var(--shadow-md); object-fit:cover; width: 90%; margin: 0 auto; }

/* --- Sobre los modelos (3 cards) ----------------------------------------- */
.wpa-models { padding:80px 0; }
.wpa-models__grid { display:grid; gap:24px; margin-top:44px; }
@media (min-width:820px){ .wpa-models__grid { grid-template-columns:repeat(3,1fr); } }
.wpa-model { background:#fff; border:1px solid var(--primary-300); border-radius:var(--rounded-xl); padding:20px; }
/* logo "a sangre": la imagen ya trae el fondo de color de marca (InVEST verde, RiOS navy...) */
.wpa-model__logo { aspect-ratio:16/10; border-radius:var(--rounded-md); margin-bottom:18px; overflow:hidden; }
.wpa-model__logo img { width:100%; height:100%; object-fit:scale-down; }
.wpa-model p { color:var(--primary-900); font-size:var(--fs-sm); line-height:1.35; }
/* Tablet (600–819px): tarjeta horizontal —logo a la izquierda, texto a la derecha—
   como el diseño de Figma. En móvil (<600px) se apila; en desktop son 3 columnas. */
@media (min-width:600px) and (max-width:819.98px){
  .wpa-model { display:grid; grid-template-columns:1fr 1.1fr; gap:28px; align-items:center; padding:28px; }
  .wpa-model__logo { margin-bottom:0; }
}
/* Móvil (<600px): logo a todo el ancho (aspecto natural) y texto más legible,
   como el diseño de Figma. `scale-down` no ampliaba los logos pequeños. */
@media (max-width:599.98px){
  .wpa-model__logo { aspect-ratio:auto; }
  .wpa-model__logo img { height:auto; object-fit:contain; }
  .wpa-model p { font-size:var(--fs-md); line-height:1.5; }
}

/* --- CTA final ("Transforma tu análisis...") ----------------------------- */
.wpa-ctawrap { padding:16px 0 88px; }
.wpa-cta { border:1px solid var(--primary-300); border-radius:var(--rounded-3xl);
  padding:52px 40px; text-align:center; background:var(--primary-50); }
.wpa-cta h2 { font-size:var(--fs-3xl); margin-bottom:14px; color:var(--primary-900); }
.wpa-cta h2 .accent { color:var(--blue); }
.wpa-cta p { color:var(--primary-900); max-width:56ch; margin:0 auto 28px; font-size:var(--fs-xl); }
/* "Volver arriba": ahora es el componente compartido .wpw-totop (components.css) */