/* ============================================================================
   css/nosotros.css — Estilos de la vista Nosotros (diseño aprobado).
   Migrado desde el <style> inline de la propuesta (Etapa 3: sin CSS inline).
   Auto-contenido bajo .nos-scope; el header/footer/navbar viven en stylesGen.css.
   ============================================================================ */

        /* La propuesta se auto-contiene bajo .nos-scope para no afectar header/footer del sitio */
        .nos-scope {
            --brand: #71C6D4;
            --brand-dark: #4aa9b8;
            --brown: #5A4E4E;
            --brown-2: #887878;
            --warm: #ffcc80;
            --cream: #F6E6C9;
            --bg: #faf7f3;
            --card: #ffffff;
            --ink: #3f3838;
            --muted: #8a7f7f;
            --line: #ece5dd;
            --shadow: 0 10px 30px rgba(90, 78, 78, .10);
            --shadow-lg: 0 18px 50px rgba(90, 78, 78, .18);
            --radius: 18px;
            background: var(--bg);
            color: var(--ink);
        }

        .nos-scope h1,
        .nos-scope h2,
        .nos-scope h3,
        .nos-scope .font-head {
            font-family: 'Montserrat', sans-serif;
        }

        .nos-scope .container-xxl {
            max-width: 1320px;
        }

        /* ---- Encabezados de sección (mismo lenguaje que Home/Propiedades) ---- */
        .nos-eyebrow {
            display: block;
            letter-spacing: .26em;
            text-transform: uppercase;
            font-size: .75rem;
            font-weight: 600;
            color: var(--brand-dark);
            margin-bottom: .5rem;
        }

        .nos-h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            color: var(--brown);
            font-size: clamp(1.8rem, 3.5vw, 2.6rem);
            line-height: 1.12;
            margin: 0;
        }

        .nos-lead {
            color: var(--muted);
            font-weight: 300;
            font-size: 1.08rem;
            max-width: 640px;
        }

        .nos-section {
            padding: clamp(3.2rem, 7vw, 5.5rem) 0;
        }

        /* ---- Botones (coherentes con .btn-enviar / .btn-interes de las otras vistas) ---- */
        .nos-btn {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            padding: .8rem 1.5rem;
            cursor: pointer;
            text-decoration: none;
            line-height: 1;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
        }

        .nos-btn--brand {
            background: var(--brand);
            color: #063038;
            box-shadow: 0 10px 24px rgba(113, 198, 212, .35);
        }

        .nos-btn--brand:hover {
            background: var(--brand-dark);
            color: #fff;
            transform: translateY(-2px);
        }

        .nos-btn--warm {
            background: var(--warm);
            color: #5a4e4e;
            box-shadow: 0 10px 24px rgba(255, 204, 128, .38);
        }

        .nos-btn--warm:hover {
            background: #f4b95f;
            color: #4a3f3f;
            transform: translateY(-2px);
        }

        .nos-btn--ghost {
            background: rgba(255, 255, 255, .06);
            border: 1.5px solid rgba(255, 255, 255, .55);
            color: #fff;
        }

        .nos-btn--ghost:hover {
            background: #fff;
            color: var(--brown);
            transform: translateY(-2px);
        }

        /* =====================================================================
           HERO
        ===================================================================== */
        .nos-hero {
            position: relative;
            color: #fff;
            padding: clamp(140px, 18vh, 190px) 0 clamp(3.5rem, 8vw, 6rem);
            background:
                linear-gradient(180deg, rgba(90, 78, 78, .62), rgba(43, 36, 36, .90)),
                url('/images/vistaNosotros/pruebaPortadaNosotros.jpg') center/cover no-repeat;
            overflow: hidden;
        }

        .nos-hero .eyebrow {
            letter-spacing: .28em;
            text-transform: uppercase;
            font-size: .78rem;
            color: var(--brand);
            font-weight: 600;
        }

        .nos-hero h1 {
            font-weight: 800;
            font-size: clamp(2.2rem, 5.2vw, 3.8rem);
            line-height: 1.05;
            margin: .6rem 0 1rem;
            max-width: 15ch;
        }

        .nos-hero h1 .text-brand {
            color: var(--brand);
        }

        .nos-hero p.lead {
            color: #efe6dd;
            max-width: 620px;
            font-weight: 300;
            font-size: 1.12rem;
        }

        .nos-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
            margin-top: 1.6rem;
        }

        /* Chips de confianza (datos reales: ubicación, servicios, matrícula) */
        .nos-trust {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem;
            margin-top: 2.2rem;
        }

        .nos-trust span {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            border: 1px solid rgba(255, 255, 255, .32);
            background: rgba(255, 255, 255, .08);
            color: #fbf4ec;
            padding: .45rem 1rem;
            border-radius: 999px;
            font-size: .82rem;
            font-weight: 500;
            backdrop-filter: blur(2px);
        }

        .nos-trust span i {
            color: var(--brand);
        }

        /* =====================================================================
           QUIÉNES SOMOS
        ===================================================================== */
        .nos-about-img {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            aspect-ratio: 4 / 3;
        }

        .nos-about-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Placa flotante sobre la imagen (respaldo profesional real) */
        .nos-about-badge {
            position: absolute;
            left: 1rem;
            bottom: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, .95);
            border-radius: 14px;
            padding: .9rem 1.1rem;
            display: flex;
            align-items: center;
            gap: .8rem;
            box-shadow: var(--shadow);
        }

        .nos-about-badge img {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            flex: 0 0 auto;
        }

        .nos-about-badge strong {
            display: block;
            color: var(--brown);
            font-family: 'Montserrat', sans-serif;
            font-size: .95rem;
            line-height: 1.2;
        }

        .nos-about-badge small {
            color: var(--muted);
            font-size: .78rem;
        }

        .nos-about p {
            color: #5f5757;
            line-height: 1.75;
        }

        /* =====================================================================
           MISIÓN / VISIÓN
        ===================================================================== */
        .nos-mv-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: clamp(1.6rem, 3vw, 2.4rem);
            height: 100%;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .nos-mv-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .nos-mv-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            font-size: 1.4rem;
            margin-bottom: 1rem;
            background: rgba(113, 198, 212, .16);
            color: var(--brand-dark);
        }

        .nos-mv-card h3 {
            font-weight: 800;
            color: var(--brown);
            font-size: 1.35rem;
            margin-bottom: .6rem;
        }

        .nos-mv-card p {
            color: #5f5757;
            line-height: 1.7;
            margin: 0;
        }

        /* =====================================================================
           FORMA DE TRABAJAR / OBJETIVOS (roadmap)
        ===================================================================== */
        .nos-roadmap {
            background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
        }

        .nos-step {
            position: relative;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: clamp(1.6rem, 3vw, 2.2rem);
            height: 100%;
        }

        .nos-step-tag {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--brand-dark);
            background: rgba(113, 198, 212, .14);
            padding: .35rem .9rem;
            border-radius: 999px;
            margin-bottom: 1rem;
        }

        .nos-step h3 {
            font-weight: 800;
            color: var(--brown);
            font-size: 1.3rem;
            margin-bottom: .7rem;
        }

        .nos-step p {
            color: #5f5757;
            line-height: 1.72;
            margin: 0;
        }

        /* =====================================================================
           VALORES (carrusel Swiper premium)
        ===================================================================== */
        .nos-values {
            position: relative;
        }

        .nos-values .swiper {
            padding: 8px 4px 12px;
        }

        .nos-values .swiper-slide {
            height: auto;
        }

        .nos-value {
            position: relative;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 2rem 1.6rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        /* Acento superior que aparece en hover/activo */
        .nos-value::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--brand), var(--warm));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s ease;
        }

        .nos-value:hover,
        .swiper-slide-active .nos-value {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(113, 198, 212, .55);
        }

        .nos-value:hover::before,
        .swiper-slide-active .nos-value::before {
            transform: scaleX(1);
        }

        .nos-value-ic {
            flex: 0 0 auto;
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: rgba(113, 198, 212, .16);
            color: var(--brand-dark);
            font-size: 1.35rem;
            margin-bottom: 1.1rem;
            transition: background .25s ease, color .25s ease;
        }

        .nos-value:hover .nos-value-ic,
        .swiper-slide-active .nos-value-ic {
            background: var(--brand);
            color: #063038;
        }

        .nos-value h4 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            color: var(--brown);
            font-size: 1.15rem;
            margin: 0 0 .5rem;
        }

        .nos-value p {
            color: var(--muted);
            font-size: .92rem;
            line-height: 1.6;
            margin: 0;
        }

        /* Controles del carrusel (mismo lenguaje que el carrusel de destacadas del Home) */
        .nos-val-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
            margin-top: 1.6rem;
        }

        .nos-val-nav {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            background: var(--card);
            color: var(--brown);
            box-shadow: var(--shadow);
            display: grid;
            place-items: center;
            font-size: 1.05rem;
            cursor: pointer;
            transition: background .2s ease, color .2s ease, transform .2s ease;
        }

        .nos-val-nav:hover {
            background: var(--brand);
            color: #063038;
            transform: scale(1.06);
        }

        .nos-val-nav.swiper-button-disabled {
            opacity: .35;
            pointer-events: none;
        }

        .nos-val-pagination {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .nos-val-pagination .swiper-pagination-bullet {
            background: var(--brown-2);
            opacity: .4;
            width: 9px;
            height: 9px;
            transition: .2s;
        }

        .nos-val-pagination .swiper-pagination-bullet-active {
            background: var(--brand-dark);
            opacity: 1;
            width: 26px;
            border-radius: 6px;
        }

        /* =====================================================================
           POR QUÉ ELEGIR UNENGROUP
        ===================================================================== */
        .nos-why {
            background: var(--card);
        }

        .nos-reason {
            display: flex;
            gap: 1.1rem;
            align-items: flex-start;
            padding: 1.1rem 1rem;
            border-radius: 14px;
            border: 1px solid transparent;
            transition: background .25s ease, border-color .25s ease, transform .25s ease;
        }

        .nos-reason + .nos-reason {
            margin-top: .2rem;
        }

        .nos-reason:hover {
            background: var(--bg);
            border-color: var(--line);
            transform: translateX(4px);
        }

        /* Índice numerado (01–05) para dar ritmo y jerarquía */
        .nos-reason-ic {
            flex: 0 0 auto;
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: rgba(113, 198, 212, .16);
            color: var(--brand-dark);
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            font-size: 1rem;
            transition: background .25s ease, color .25s ease;
        }

        .nos-reason:hover .nos-reason-ic {
            background: var(--brand);
            color: #063038;
        }

        .nos-reason h4 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            color: var(--brown);
            font-size: 1.05rem;
            margin: .1rem 0 .25rem;
        }

        .nos-reason p {
            color: var(--muted);
            font-size: .92rem;
            line-height: 1.6;
            margin: 0;
        }

        /* Aside con estadística cualitativa (sin inventar números) */
        .nos-why-aside {
            position: relative;
            background: linear-gradient(160deg, var(--brown) 0%, #4a3f3f 100%);
            border-radius: var(--radius);
            color: #fff;
            padding: clamp(1.8rem, 3.5vw, 2.6rem);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
        }

        /* Detalle decorativo sutil */
        .nos-why-aside::after {
            content: "";
            position: absolute;
            right: -60px;
            top: -60px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(113, 198, 212, .30), transparent 70%);
        }

        .nos-why-aside-badge {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: rgba(113, 198, 212, .22);
            color: var(--brand);
            font-size: 1.5rem;
            margin-bottom: 1.3rem;
        }

        .nos-why-aside h3 {
            position: relative;
            font-weight: 800;
            font-size: 1.5rem;
            margin-bottom: .8rem;
        }

        .nos-why-aside p {
            color: #e9ded6;
            line-height: 1.7;
            margin-bottom: 1.4rem;
        }

        .nos-cover {
            display: flex;
            align-items: center;
            gap: .7rem;
            color: #f3ece5;
            font-size: .95rem;
            margin-top: auto;
        }

        .nos-cover i {
            color: var(--brand);
            font-size: 1.15rem;
        }

        /* =====================================================================
           COMPROMISO (banda con video de fondo, reutiliza asset existente)
        ===================================================================== */
        .nos-commit {
            position: relative;
            overflow: hidden;
            color: #fff;
            padding: clamp(4rem, 9vw, 7rem) 0;
        }

        .nos-commit video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .nos-commit::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(43, 36, 36, .82), rgba(43, 36, 36, .9));
            z-index: 1;
        }

        .nos-commit .container-xxl {
            position: relative;
            z-index: 2;
        }

        .nos-commit .nos-eyebrow {
            color: var(--brand);
        }

        .nos-commit blockquote {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: clamp(1.4rem, 3vw, 2.1rem);
            line-height: 1.3;
            max-width: 20ch;
            margin: 0 0 1rem;
        }

        .nos-commit p {
            color: #e9ded6;
            max-width: 640px;
            line-height: 1.75;
            font-weight: 300;
        }

        /* =====================================================================
           CONTACTO / CTA (banda premium igual que Propiedades)
        ===================================================================== */
        .nos-contact {
            position: relative;
            overflow: hidden;
            padding: clamp(4rem, 8vw, 6.5rem) 0;
            /* Sin foto: base marrón oscura de marca */
            background: linear-gradient(160deg, #3b3030 0%, #241d1d 62%, #1b1515 100%);
        }

        /* Capa 1 (::before): "mesh gradient" de blobs de marca (celeste, brand-dark, melón, crema),
           difuminados y en deriva lenta para un fondo vivo pero elegante */
        .nos-contact::before {
            content: "";
            position: absolute;
            inset: -25%;
            z-index: 0;
            background:
                radial-gradient(38% 42% at 15% 20%, rgba(113, 198, 212, .55), transparent 70%),
                radial-gradient(34% 40% at 85% 22%, rgba(74, 169, 184, .48), transparent 70%),
                radial-gradient(42% 46% at 80% 88%, rgba(255, 204, 128, .40), transparent 72%),
                radial-gradient(36% 42% at 22% 92%, rgba(246, 230, 201, .22), transparent 72%);
            filter: blur(14px);
            animation: nosMeshDrift 20s ease-in-out infinite alternate;
        }

        @keyframes nosMeshDrift {
            from { transform: translate3d(0, 0, 0) scale(1); }
            to   { transform: translate3d(0, -2.5%, 0) scale(1.07); }
        }

        /* Capa 2 (::after): textura de puntos + viñeta para profundidad y contraste con la card */
        .nos-contact::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 22px 22px,
                radial-gradient(circle at 50% 45%, transparent 52%, rgba(14, 10, 10, .62) 100%);
        }

        .nos-contact > .container-xxl {
            position: relative;
            z-index: 1;
        }

        .nos-contact-card {
            position: relative;
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--line);
            overflow: hidden;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            max-width: 1000px;
        }

        /* Barra de acento superior de marca */
        .nos-contact-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--brand), var(--warm));
            z-index: 2;
        }

        .nos-contact-info {
            padding: clamp(1.8rem, 4vw, 2.8rem);
        }

        .nos-contact-info h2 {
            font-weight: 800;
            color: var(--brown);
            font-size: clamp(1.5rem, 3vw, 2rem);
            margin-bottom: .6rem;
        }

        .nos-contact-info > p {
            color: var(--muted);
            line-height: 1.65;
            margin-bottom: 1.5rem;
        }

        .nos-channels {
            list-style: none;
            padding: 0;
            margin: 0 0 1.8rem;
        }

        .nos-channels li {
            display: flex;
            align-items: center;
            gap: .9rem;
            padding: .55rem 0;
            color: var(--ink);
            font-size: .95rem;
        }

        .nos-channels li i {
            flex: 0 0 42px;
            height: 42px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(113, 198, 212, .16);
            color: var(--brand-dark);
            font-size: 1.05rem;
        }

        .nos-channels li a {
            color: var(--brown);
            font-weight: 600;
            text-decoration: none;
        }

        .nos-channels li a:hover {
            color: var(--brand-dark);
            text-decoration: underline;
        }

        .nos-contact-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
        }

        .nos-btn--wa {
            background: #25D366;
            color: #fff;
            box-shadow: 0 10px 24px rgba(37, 211, 102, .35);
        }

        .nos-btn--wa:hover {
            background: #1da851;
            color: #fff;
            transform: translateY(-2px);
        }

        .nos-contact-visual {
            position: relative;
            background: url('/images/vistaNosotros/img2.webp') center/cover no-repeat;
            min-height: 260px;
            display: flex;
            align-items: flex-end;
        }

        .nos-contact-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(43, 36, 36, .10) 40%, rgba(43, 36, 36, .82) 100%);
        }

        .nos-contact-caption {
            position: relative;
            z-index: 1;
            padding: 1.6rem;
            color: #fff;
        }

        .nos-contact-caption img {
            height: 34px;
            width: auto;
            margin-bottom: .7rem;
        }

        .nos-contact-caption p {
            margin: 0;
            font-weight: 300;
            font-size: .95rem;
            line-height: 1.5;
            color: #f3ece5;
            max-width: 30ch;
        }

        /* =====================================================================
           RESPONSIVE
        ===================================================================== */
        @media (max-width: 991.98px) {
            .nos-contact-card {
                grid-template-columns: 1fr;
            }

            .nos-contact-visual {
                order: -1;
                min-height: 200px;
            }
        }

        @media (max-width: 575.98px) {
            .nos-hero-actions .nos-btn,
            .nos-contact-actions .nos-btn {
                width: 100%;
                justify-content: center;
            }

            .nos-about-badge {
                position: static;
                margin-top: -1px;
                border-radius: 0 0 var(--radius) var(--radius);
            }
        }

        /* Accesibilidad: respetar reduce-motion */
        @media (prefers-reduced-motion: reduce) {
            .nos-scope *,
            .nos-scope *::before {
                transition: none !important;
                animation: none !important;
            }
        }

        /* Foco visible coherente en toda la propuesta */
        .nos-scope a:focus-visible,
        .nos-scope button:focus-visible {
            outline: 3px solid var(--brand);
            outline-offset: 3px;
            border-radius: 6px;
        }

        /* ===== Utilidades que reemplazan atributos style="..." inline (mismo render) ===== */
        #nos-about {
            scroll-margin-top: 80px;
        }

        .nos-bg-card {
            background: var(--card);
        }

        .nos-eyebrow--brand {
            color: var(--brand);
        }

        .nos-h2--light {
            color: #fff;
        }