/* ============================================================
       SIV CHILE · Design tokens
       Colores extraídos de la marca actual (sivchile.cl)
       ============================================================ */
    :root {
      --navy-900: #071C33;
      --navy-800: #0A2540;
      --navy-700: #12426F;   /* color primario de marca */
      --navy-600: #1A5590;
      --hero-bg: var(--bg);
      --teal-500: #3EB49A;   /* color secundario de marca */
      --teal-400: #5CC9B1;
      --teal-600: #2E9A82;
      --bg: #04090F;         /* fondo base: el mismo del hero */
      --bg-2: #081120;       /* superficies elevadas (tarjetas, formulario) */
      --bg-3: #0D1A2B;       /* hover de superficies */
      --ink: #F2F5F8;        /* texto principal */
      --ink-soft: #EDF1F5;
      --mist: rgba(255,255,255,.10);   /* líneas y bordes */
      --mist-soft: #081120;
      --paper: #070D16;      /* secciones alternas */
      --white: #FFFFFF;

      --font-sans: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
      --font-display: "Inter Tight", "Inter", "Roboto", system-ui, sans-serif;
      --font-serif: "Instrument Serif", "Georgia", "Times New Roman", serif;

      --radius-sm: 8px;
      --radius-md: 16px;
      --radius-lg: 28px;
      --container: 1280px;
      --gutter: clamp(20px, 4vw, 56px);
      --ease: cubic-bezier(.2, .7, .2, 1);
    }

    /* ---------- Reset ---------- */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.6;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
    h1, h2, h3, h4, p { margin: 0; }
    ul { margin: 0; padding: 0; list-style: none; }
    :focus-visible { outline: 2px solid var(--teal-500); outline-offset: 4px; border-radius: 4px; }
    ::selection { background: var(--teal-500); color: var(--navy-900); }

    .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* Titulares en Inter Tight (compacta, peso medio) y énfasis en serif itálica, como la referencia */
    h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; }
    .em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

    /* ---------- Eyebrow / labels ---------- */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 11px;
      font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
      color: var(--white);
    }
    /* Marcador de marca: punto dentro de un círculo, como el ojo del logo */
    .eyebrow::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--teal-500); background: radial-gradient(circle at center, var(--teal-400) 0 2.6px, transparent 2.7px); }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 12px;
      min-height: 52px; padding: 0 28px;
      border-radius: 999px; font-weight: 500; font-size: 15px; letter-spacing: .01em;
      transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
      white-space: nowrap;
    }
    .btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
    .btn:hover svg { transform: translateX(4px); }
    .btn-primary { background: var(--teal-500); color: var(--navy-900); box-shadow: 0 10px 30px -12px rgba(62,180,154,.7); }
    .btn-primary:hover { background: var(--teal-400); transform: translateY(-2px); }
    /* Botón principal: fondo verde de la marca y letras blancas */
    .btn-cta { background: #26806D; color: #FFFFFF; font-weight: 700; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 14px 34px -14px rgba(38,128,109,.9); }
    .btn-cta:hover { background: #1F7060; color: #FFFFFF; transform: translateY(-2px); }
    .btn-outline { border: 1px solid rgba(255,255,255,.5); color: #FFFFFF; font-weight: 600; backdrop-filter: blur(6px); }
    .btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
    .btn-dark { background: var(--white); color: var(--bg); }
    .btn-dark:hover { background: #E6ECF1; transform: translateY(-2px); }

    /* ============================================================
       HEADER
       ============================================================ */
    .header {
      position: fixed; inset: 0 0 auto 0; z-index: 100;
      transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
      padding: 22px 0;
    }
    .header.is-scrolled { background: rgba(4, 9, 15, .8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 12px 0; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
    .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand img { height: 46px; width: auto; }
    .nav { display: flex; align-items: center; gap: 36px; }
    .nav a { position: relative; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.88); padding: 6px 0; transition: color .3s; }
    .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--teal-500); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
    .nav a:hover { color: var(--white); }
    .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
    .nav .nav-mail { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.85); }
    .nav .nav-mail svg { width: 15px; height: 15px; }
    .nav .nav-mail::after { display: none; }
    .nav .nav-mail:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
    .header-cta { display: flex; align-items: center; gap: 14px; }
    .header .btn { min-height: 44px; padding: 0 22px; font-size: 14px; }
    .menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: var(--white); align-items: center; justify-content: center; }
    .menu-toggle svg { width: 20px; height: 20px; }

    /* Mobile nav: panel compacto, misma escala tipográfica que el resto del sitio */
    .mobile-nav { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; padding: 96px var(--gutter) 32px; transform: translateY(-100%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
    .mobile-nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 40% at 80% 0%, rgba(26,85,144,.35), rgba(26,85,144,0) 70%); }
    .mobile-nav.is-open { transform: translateY(0); visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
    .mobile-nav > * { position: relative; }
    .mobile-nav .mn-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--white); margin: 0 0 6px; }
    .mobile-nav .mn-links { display: grid; border-top: 1px solid rgba(255,255,255,.08); }
    .mobile-nav .mn-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-sans); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--white); padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
    .mobile-nav .mn-links a::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid rgba(255,255,255,.4); border-bottom: 1.5px solid rgba(255,255,255,.4); transform: rotate(-45deg); flex: none; }
    .mobile-nav .mn-links a:active { color: var(--teal-400); }
    .mobile-nav .mn-actions { display: grid; gap: 10px; margin-top: 24px; }
    .mobile-nav .mn-actions .btn { width: 100%; font-size: 15px; }
    .mobile-nav .mobile-mail { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); }
    .mobile-nav .mobile-mail svg { width: 16px; height: 16px; }
    .mobile-nav .mn-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 6px; font-size: 13px; color: rgba(255,255,255,.75); }
    .mobile-nav .mn-foot a { color: rgba(255,255,255,.75); }

    /* ============================================================
       HERO
       ============================================================ */
    .hero {
      position: relative; min-height: 100svh; display: grid; align-items: center;
      background: var(--hero-bg); color: var(--white); overflow: hidden; padding: 140px 0 120px;
    }
    /* Luz azul de la marca detrás de la cámara (como la luz de borde de la referencia) */
    .hero-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0;
      background:
        radial-gradient(42% 60% at 78% 55%, rgba(26,85,144,.55) 0%, rgba(26,85,144,.18) 45%, rgba(26,85,144,0) 72%),
        radial-gradient(30% 40% at 92% 30%, rgba(62,180,154,.14) 0%, rgba(62,180,154,0) 70%);
    }
    .hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: .05; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

    .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 62%) 1fr; align-items: center; }
    .hero h1 { font-size: clamp(44px, 5.5vw, 80px); line-height: .98; text-wrap: balance; }
    .hero h1 .em { display: block; }
    .hero-lead { margin-top: 28px; max-width: 44ch; font-size: clamp(15px, 1.1vw, 16px); font-weight: 400; line-height: 1.65; color: rgba(255,255,255,.92); }
    .hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .hero .btn-outline { border-color: rgba(255,255,255,.72); }
    .hero .btn-outline:hover { background: var(--white); color: var(--hero-bg); border-color: var(--white); }
    .hero-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.88); padding: 0 8px; transition: color .3s; }
    .hero-link:hover { color: var(--white); }

    /* Cámara recortada, a la derecha */
    .hero-cam { position: absolute; z-index: 1; right: 0; top: 50%; transform: translateY(-46%); width: min(46vw, 760px); pointer-events: none; }
    .hero-cam img { width: 100%; height: auto; filter: drop-shadow(-30px 40px 60px rgba(0,0,0,.65)) drop-shadow(0 0 80px rgba(26,85,144,.35)); }

    /* Etiquetas pequeñas en las esquinas inferiores */

    /* ============================================================
       PLACEHOLDER DE IMAGEN (reutilizable)
       Sustituir el bloque por <img> cuando se tengan las fotos
       ============================================================ */
    .ph {
      position: relative; display: grid; place-items: center; overflow: hidden;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(18,66,111,.55), rgba(7,28,51,.85));
      border: 1px dashed rgba(255,255,255,.28);
      color: rgba(255,255,255,.7);
    }
    .ph-inner { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
    .ph-inner svg { width: 36px; height: 36px; opacity: .7; }
    .ph-inner strong { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
    .ph-inner span { font-size: 12px; opacity: .65; }

    /* ============================================================
       SECCIONES BASE
       ============================================================ */
    section { position: relative; }
    .section { padding: clamp(88px, 10vw, 150px) 0; }
    .section-head { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(48px, 6vw, 88px); }
    .section-head h2 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
    .section-head p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 58ch; font-weight: 400; }
    .section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
    .section-head.center .eyebrow::before { display: none; }
    .on-dark { background: var(--bg-2); color: var(--white); }
    .on-dark .section-head p { color: rgba(255,255,255,.92); }
    .on-paper { background: var(--paper); }
    .services-section { overflow: hidden; background: #071C33; color: var(--white); }
    .services-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,9,15,.94) 0%, rgba(4,9,15,.78) 43%, rgba(4,9,15,.56) 100%), url("../assets/generated/empresa-seguridad-bg.webp") center / cover no-repeat; opacity: .96; pointer-events: none; }
    .services-section > .container { position: relative; z-index: 1; }
    .services-section .section-head p { color: rgba(255,255,255,.92); }

    /* ============================================================
       MARQUEE (franja de confianza)
       ============================================================ */
    .ticker { background: var(--bg); color: rgba(255,255,255,.85); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); overflow: hidden; padding: 18px 0; }
    .ticker-track { display: flex; gap: 64px; width: max-content; animation: ticker 40s linear infinite; }
    .ticker-track span { display: inline-flex; align-items: center; gap: 18px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
    .ticker-track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); }
    @keyframes ticker { to { transform: translateX(-50%); } }

    /* ============================================================
       PRODUCTOS · VIERA / MIRA
       ============================================================ */
    .products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .product {
      position: relative; display: grid; grid-template-rows: auto 1fr; gap: 0;
      border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-800); color: var(--white);
      min-height: 620px; transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    }
    .product:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(7,28,51,.6); }
    .product .ph { border-radius: 0; border: 0; border-bottom: 1px dashed rgba(255,255,255,.2); aspect-ratio: 16 / 10; }
    .ph.photo { position: relative; overflow: hidden; background: var(--navy-800); }
    .ph.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .ph.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,9,15,0) 55%, rgba(4,9,15,.28)); }
    .service.featured .ph.photo { margin-top: 12px; }
    .product-body { padding: 36px; display: grid; gap: 18px; align-content: start; }
    .product-tag { display: inline-flex; align-items: center; gap: 11px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); font-weight: 600; }
    .product-tag::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--teal-500); background: radial-gradient(circle at center, var(--teal-400) 0 2.6px, transparent 2.7px); }
    .product h3 { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -0.03em; line-height: 1.02; font-weight: 500; }
    .product p { color: rgba(255,255,255,.92); max-width: 46ch; font-weight: 400; line-height: 1.7; }
    .product-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 500; font-size: 15px; color: var(--white); }
    .product-link svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
    .product:hover .product-link svg { transform: translateX(6px); }
    .product.alt { background: var(--bg-2); color: var(--ink); border: 1px solid var(--mist); }
    .product.alt p { color: var(--ink-soft); }
    .product.alt .product-link { color: var(--teal-400); }
    .product.alt .ph { border-bottom-color: rgba(255,255,255,.14); }

    /* ============================================================
       SERVICIOS
       ============================================================ */
    .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mist); border: 1px solid var(--mist); border-radius: var(--radius-lg); overflow: hidden; }
    .service { background: var(--bg-2); padding: 44px 36px; display: grid; gap: 22px; align-content: start; transition: background .4s var(--ease); min-height: 320px; }
    .service:hover { background: var(--bg-3); }
    .service-photo { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 0; margin-bottom: 4px; }
    .service-photo img { width: 100%; height: 100%; object-fit: cover; }
    .service-num { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--white); font-variant-numeric: tabular-nums; }
    .service-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(62,180,154,.12); color: var(--teal-400); }
    .service-icon svg { width: 24px; height: 24px; }
    .service h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
    .service p { color: var(--ink-soft); font-weight: 400; font-size: 15px; line-height: 1.7; }
    .service.featured { background: var(--navy-700); color: var(--white); grid-row: span 2; display: grid; align-content: space-between; }
    .service.featured p { color: rgba(255,255,255,.92); }
    .service.featured h3 { font-size: clamp(28px, 2.6vw, 36px); }
    .service.featured .ph { aspect-ratio: 4/3; margin-top: 12px; }

    /* ============================================================
       PROCESO
       ============================================================ */
    .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
    .step { position: relative; padding: 0; border-radius: var(--radius-md); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; grid-template-rows: auto 1fr; align-content: start; transition: background .4s var(--ease), border-color .4s var(--ease); }
    .step-photo { aspect-ratio: 16 / 10; border-radius: var(--radius-md) var(--radius-md) 0 0; border: 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
    .step-photo .ph-inner svg { width: 28px; height: 28px; }
    .step-body { padding: 24px 26px 32px; display: grid; gap: 18px; align-content: start; }
    .step:hover { background: rgba(255,255,255,.07); border-color: rgba(62,180,154,.4); }
    .step-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .step-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(62,180,154,.12); color: var(--teal-400); border: 1px solid rgba(62,180,154,.25); }
    .step-icon svg { width: 26px; height: 26px; }
    .step-num { font-family: var(--font-display); font-size: 40px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--teal-500); font-variant-numeric: tabular-nums; }
    /* Línea que conecta cada paso con el siguiente */
    .step:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -28px; width: 28px; height: 1px; background: linear-gradient(90deg, rgba(62,180,154,.9), rgba(62,180,154,.5)); }
    .step:not(:last-child)::before { content: ""; position: absolute; top: 40px; right: -8px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 4px rgba(62,180,154,.18); z-index: 1; }
    .step-photo { overflow: hidden; }
    .step-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .step h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
    .step p { color: rgba(255,255,255,.92); font-weight: 400; font-size: 15px; line-height: 1.7; }
    .process-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(62,180,154,.5), transparent); }

    /* ============================================================
       CERTIFICACIÓN OS-10
       ============================================================ */
    .cert { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
    .cert-media { position: relative; }
    .cert-media .ph { aspect-ratio: 1 / 1; max-width: 520px; }
    .cert-photo-wrap { position: relative; max-width: 520px; }
    .cert-caption { margin-top: 22px; max-width: 520px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
    .cert-caption::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--teal-500); background: radial-gradient(circle at center, var(--teal-400) 0 2.6px, transparent 2.7px); }
    .cert-seal { position: absolute; right: -16px; bottom: -16px; width: 150px; height: 150px; border-radius: 50%; background: var(--navy-800); color: var(--white); display: grid; place-items: center; text-align: center; box-shadow: 0 20px 50px -20px rgba(7,28,51,.6); }
    .cert-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 24s linear infinite; }
    .cert-seal strong { font-weight: 700; letter-spacing: -0.02em; font-size: 26px; line-height: 1; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .cert-body { display: grid; gap: 24px; }
    .cert-body h2 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
    .cert-body p { color: var(--ink-soft); font-weight: 400; line-height: 1.75; }
    .cert-quote { padding: 28px 32px; border-left: 2px solid var(--teal-500); background: var(--bg-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
    .cert-quote p { font-size: 21px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); }
    .cert-quote small { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

    /* ============================================================
       SOLUCIÓN COMPLETA + FAQ
       ============================================================ */
    .faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
    .faq-grid .section-head { margin-bottom: 0; position: sticky; top: 120px; }
    .faq-visual { margin-top: 34px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--mist); box-shadow: 0 24px 60px -30px rgba(7,28,51,.45); }
    .faq-visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
    .faq { display: grid; gap: 0; border-top: 1px solid var(--mist); }
    .faq details { border-bottom: 1px solid var(--mist); }
    .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.01em; transition: color .3s; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary:hover { color: var(--teal-400); }
    .faq summary .plus { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mist); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s, border-color .3s; }
    .faq summary .plus svg { width: 16px; height: 16px; }
    .faq details[open] summary .plus { transform: rotate(45deg); background: var(--white); border-color: var(--white); color: var(--bg); }
    .faq-answer { padding: 0 0 28px; max-width: 60ch; color: var(--ink-soft); font-weight: 400; line-height: 1.75; }

    /* ============================================================
       CTA GRANDE
       ============================================================ */
    .cta-band { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 10% 90%, var(--navy-700), var(--bg-2) 55%, var(--bg)); color: var(--white); padding: clamp(96px, 12vw, 170px) 0; text-align: center; }
    .cta-band h2 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; max-width: 18ch; margin-inline: auto; }
    .cta-band p { margin: 22px auto 0; max-width: 52ch; color: rgba(255,255,255,.92); font-weight: 400; font-size: 16px; }
    .cta-band .actions { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .cta-band .eye { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%); pointer-events: none; opacity: .3; }
    .cta-band .eye circle { fill: none; stroke: rgba(62,180,154,.5); stroke-width: .6; }

    /* ============================================================
       CONTACTO
       ============================================================ */
    .contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
    .contact-info { display: grid; gap: 40px; }
    .contact-list { display: grid; gap: 0; border-top: 1px solid var(--mist); }
    .contact-item { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--mist); align-items: baseline; }
    .contact-item span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
    .contact-item a, .contact-item p { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; transition: color .3s; }
    .contact-item a:hover { color: var(--teal-400); }
    .contact-hours { padding: 24px 28px; border-radius: var(--radius-md); background: var(--navy-800); color: var(--white); display: grid; gap: 6px; }
    .contact-hours strong { font-size: 14px; font-weight: 600; color: var(--white); letter-spacing: .06em; text-transform: uppercase; }
    .contact-hours p { color: rgba(255,255,255,.92); font-weight: 400; font-size: 15px; }

    .form { background: linear-gradient(160deg, #163F6E 0%, #12426F 45%, #0E3358 100%); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); display: grid; gap: 22px; box-shadow: 0 40px 100px -60px rgba(0,0,0,.8); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .field { display: grid; gap: 8px; }
    .field label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.82); }
    .field input, .field select, .field textarea {
      width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: rgba(255,255,255,.09);
      border: 1px solid var(--mist); color-scheme: dark; border-radius: 12px; padding: 14px 16px; min-height: 52px;
      transition: border-color .3s, background .3s, box-shadow .3s;
    }
    .field textarea { min-height: 140px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { outline: none; background: rgba(255,255,255,.14); border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(62,180,154,.18); }
    .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.5); }
    .field select option { background: #12426F; color: #F2F5F8; }
    .field select option:checked { background: var(--teal-600); color: #fff; }
    .form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
    .form-foot small { color: rgba(255,255,255,.8); font-size: 12px; max-width: 40ch; }
    .form-error[hidden] { display: none; }
    .form-error { padding: 16px 20px; border-radius: 12px; background: rgba(255,120,120,.12); border: 1px solid rgba(255,140,140,.4); color: #FFD9D9; font-weight: 500; font-size: 15px; }
    .form-error a { color: #fff; text-decoration: underline; }
    .form-success { display: none; padding: 16px 20px; border-radius: 12px; background: rgba(62,180,154,.12); color: var(--teal-400); font-weight: 500; }
    .form-success.is-visible { display: block; }

    /* ============================================================
       FOOTER
       ============================================================ */
    .footer { background: var(--bg); color: rgba(255,255,255,.82); padding: 80px 0 32px; border-top: 1px solid var(--mist); }
    .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .footer-brand img { height: 56px; width: auto; }
    .footer-brand p { margin-top: 20px; max-width: 34ch; font-weight: 400; font-size: 14px; line-height: 1.7; }
    .footer h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin-bottom: 20px; font-weight: 600; }
    .footer li + li { margin-top: 12px; }
    .footer li a { font-size: 15px; transition: color .3s; }
    .footer li a:hover { color: var(--teal-500); }
    .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; font-size: 13px; color: rgba(255,255,255,.72); }
    .footer-bottom a:hover { color: var(--white); }

    /* ============================================================
       FONDO TECNOLÓGICO ANIMADO (React + canvas)
       ============================================================ */
    #tech-bg-root { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
    #tech-bg-root canvas { display: block; width: 100%; height: 100%; }
    main, .footer { position: relative; z-index: 1; }
    /* Las secciones dejan pasar el fondo animado con distintos grados */
    .on-dark { background: rgba(8,17,32,.78); }
    .on-paper { background: rgba(7,13,22,.6); }
    .ticker { background: rgba(4,9,15,.55); }
    .footer { background: rgba(4,9,15,.6); }
    .hero { background: transparent; }
    .cta-band { background: radial-gradient(90% 120% at 10% 90%, rgba(18,66,111,.85), rgba(8,17,32,.6) 55%, rgba(4,9,15,.35)); }
    /* Anillos giratorios detrás de la cámara */
    .hero-rings { position: absolute; z-index: 0; right: 4%; top: 50%; width: min(46vw, 720px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
    .hero-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(62,180,154,.4); animation: spin 22s linear infinite; }
    .hero-rings i:nth-child(2) { inset: 12%; border-style: solid; border-color: rgba(62,180,154,.24); animation: spin 15s linear infinite reverse; }
    .hero-rings i:nth-child(3) { inset: 26%; border: 1px dashed rgba(255,255,255,.2); animation-duration: 30s; }
    .hero-rings i::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-400); box-shadow: 0 0 16px 2px rgba(62,180,154,1); }
    @media (max-width: 900px) { .hero-rings { display: none; } }

    /* ============================================================
       WHATSAPP
       ============================================================ */
    .btn-wa { background: #25D366; color: #052e16; box-shadow: 0 10px 30px -12px rgba(37,211,102,.7); }
    .btn-wa:hover { background: #3AE07A; transform: translateY(-2px); }
    .btn-wa svg { width: 20px; height: 20px; }
    .btn-wa:hover svg { transform: none; }
    .wa-float {
      position: fixed; right: 24px; bottom: 24px; z-index: 95;
      display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px;
      background: #25D366; color: #052e16; border-radius: 999px; font-weight: 600; font-size: 14px;
      box-shadow: 0 16px 40px -12px rgba(37,211,102,.6), 0 4px 14px rgba(0,0,0,.35);
      transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    }
    .wa-float:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -12px rgba(37,211,102,.7), 0 6px 16px rgba(0,0,0,.35); }
    .wa-float .wa-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); }
    .wa-float .wa-ico svg { width: 26px; height: 26px; }
    @media (max-width: 600px) { .wa-float { right: 16px; bottom: 16px; padding: 6px; } .wa-float span { display: none; } }

    /* ============================================================
       REVEAL (animación de entrada)
       ============================================================ */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
    .reveal.is-in { opacity: 1; transform: none; }
    .reveal[data-delay="1"] { transition-delay: .1s; }
    .reveal[data-delay="2"] { transition-delay: .2s; }
    .reveal[data-delay="3"] { transition-delay: .3s; }
    .reveal[data-delay="4"] { transition-delay: .4s; }

    .hero .reveal { transition-duration: 1.2s; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
      html { scroll-behavior: auto; }
      .reveal { opacity: 1; transform: none; }
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 1100px) {
      .hero-cam { width: min(44vw, 560px); }
      .step:nth-child(2)::after, .step:nth-child(2)::before { display: none; }
      .services { grid-template-columns: repeat(2, 1fr); }
      .service.featured { grid-column: span 2; grid-row: auto; }
      .process { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 900px) {
      .nav, .header-cta .btn { display: none; }
      .menu-toggle { display: inline-flex; }
      .hero { padding: 120px 0 72px; min-height: auto; }
      .hero-grid { grid-template-columns: 1fr; }
      .hero-cam { position: relative; right: auto; top: auto; transform: none; width: min(78%, 420px); margin: 48px auto 0; order: 2; }
      .hero-glow { background: radial-gradient(60% 40% at 50% 78%, rgba(26,85,144,.5) 0%, rgba(26,85,144,0) 70%); }
      .products, .cert, .faq-grid, .contact { grid-template-columns: 1fr; }
      .faq-grid .section-head { position: static; }
      .product { min-height: auto; }
      .cert-media .ph, .cert-photo-wrap, .cert-caption { max-width: none; }
      .cert-seal { right: 12px; bottom: 12px; width: 120px; height: 120px; }
    }
    @media (max-width: 600px) {
      .services, .process { grid-template-columns: 1fr; }
      .step:not(:last-child)::after { top: auto; right: auto; bottom: -28px; left: 58px; width: 1px; height: 28px; background: linear-gradient(180deg, rgba(62,180,154,.9), rgba(62,180,154,.5)); }
      .step:not(:last-child)::before { top: auto; right: auto; bottom: -8px; left: 54px; }
      .step:nth-child(2)::after, .step:nth-child(2)::before { display: block; }
      .service.featured { grid-column: auto; }
      .form-row { grid-template-columns: 1fr; }
      .contact-item { grid-template-columns: 1fr; gap: 6px; }
      .footer-grid { grid-template-columns: 1fr; }
      .brand img { height: 38px; }
      .hero h1 { font-size: clamp(38px, 10.5vw, 46px); }
      .eyebrow { flex-wrap: wrap; }
    }

    /* ============================================================
       BLOG (inicio y página)
       ============================================================ */
    .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .post { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2); border: 1px solid var(--mist); transition: transform .5s var(--ease), border-color .4s var(--ease); }
    .post:hover { transform: translateY(-6px); border-color: rgba(62,180,154,.4); }
    .post-media { aspect-ratio: 16 / 10; border-radius: 0; border: 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
    .post-media.photo { position: relative; overflow: hidden; }
    .post-media.photo img { width: 100%; height: 100%; object-fit: cover; }
    .post-body { padding: 26px 28px 30px; display: grid; gap: 14px; align-content: start; }
    .post-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); font-weight: 600; }
    .post-meta span + span { color: rgba(255,255,255,.72); }
    .post h3 { font-size: 21px; line-height: 1.2; }
    .post h3 a:hover { color: var(--teal-400); }
    .post p { color: var(--ink-soft); font-weight: 400; font-size: 15px; line-height: 1.65; }
    .post .product-link { color: var(--white); margin-top: 4px; }
    .post:hover .product-link svg { transform: translateX(6px); }
    .posts-more { margin-top: 40px; display: flex; justify-content: center; }
    .btn-outline.on-page { border-color: rgba(255,255,255,.35); color: var(--white); }

    /* Subpáginas: cabecera compacta */
    .page-hero { position: relative; padding: 170px 0 70px; }
    .page-hero h1 { font-size: clamp(38px, 5vw, 72px); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
    .page-hero .lead { margin-top: 24px; max-width: 58ch; font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--ink-soft); }
    .crumbs { display: flex; gap: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 28px; }
    .crumbs a:hover { color: var(--teal-400); }

    /* Artículos completos */
    .articles { display: grid; gap: 28px; }
    .article { scroll-margin-top: 110px; border-radius: var(--radius-lg); border: 1px solid var(--mist); background: var(--bg-2); padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 68ch) 1fr; gap: clamp(28px, 5vw, 64px); }
    .article-body h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin: 14px 0 22px; }
    .article-body h3 { font-size: 20px; margin: 30px 0 10px; color: var(--white); }
    .article-body p, .article-body li { color: var(--ink-soft); font-weight: 400; line-height: 1.75; font-size: 16px; }
    .article-body p + p { margin-top: 14px; }
    .article-body ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin-top: 8px; }
    .article-aside { display: grid; gap: 18px; align-content: start; position: sticky; top: 120px; }
    .article-aside .ph { aspect-ratio: 4 / 3; }
    .article-aside .ph.photo { position: relative; overflow: hidden; margin: 0; }
    .article-aside .ph.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .article-cta { padding: 24px; border-radius: var(--radius-md); background: rgba(62,180,154,.08); border: 1px solid rgba(62,180,154,.25); display: grid; gap: 12px; }
    .article-cta strong { font-size: 16px; }
    .article-cta p { font-size: 14px; color: var(--ink-soft); font-weight: 400; }
    .article-cta .btn { justify-self: start; min-height: 46px; padding: 0 22px; font-size: 14px; }
    .article-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.78); }
    .article-back:hover { color: var(--teal-400); }

    /* Nosotros: ficha y línea de tiempo */
    .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--mist); border: 1px solid var(--mist); border-radius: var(--radius-lg); overflow: hidden; }
    .fact { background: var(--bg-2); padding: 28px 30px; display: grid; gap: 8px; }
    .fact span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); font-weight: 600; }
    .fact strong { font-size: 19px; font-weight: 500; line-height: 1.3; }
    .fact p { font-size: 14px; color: var(--ink-soft); font-weight: 400; }
    .timeline { display: grid; gap: 0; border-left: 1px solid rgba(62,180,154,.35); margin-left: 8px; }
    .tl { position: relative; padding: 0 0 40px 36px; }
    .tl::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 5px rgba(62,180,154,.18); }
    .tl-year { font-family: var(--font-display); font-size: 36px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--teal-400); }
    .tl h3 { font-size: 22px; margin: 10px 0 8px; }
    .tl p { color: var(--ink-soft); font-weight: 400; line-height: 1.7; max-width: 60ch; }
    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .stat { padding: 32px; border-radius: var(--radius-md); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 6px; }
    .stat strong { font-family: var(--font-display); font-size: 52px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--white); }
    .stat span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); }

    @media (max-width: 1100px) { .posts { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 900px) {
      .article { grid-template-columns: 1fr; }
      .article-aside { position: static; }
      .stats { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) { .posts { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; } }
    /* ===== Artículos individuales ===== */
    .article-hero .post-meta { margin-bottom: 18px; }
    .article-hero .hero-actions { margin-top: 32px; }
    .article.single { grid-template-columns: minmax(0, 72ch) minmax(280px, 1fr); }
    .article.single .article-body h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin: 38px 0 14px; color: var(--white); }
    .article.single .article-body h2:first-child { margin-top: 0; }
    .article.single .article-body > p:first-child { font-size: 18px; color: var(--ink); }
    .article-body ol { list-style: decimal; padding-left: 22px; display: grid; gap: 8px; margin-top: 8px; }
    .article-body strong { color: var(--white); font-weight: 500; }
    .article-body .faq { margin-top: 8px; }
    .article-body .faq summary { font-size: 17px; }
    .cta-inline { margin: 34px 0; padding: 26px 28px; border-radius: var(--radius-md); background: linear-gradient(160deg, #163F6E 0%, #12426F 55%, #0E3358 100%); border: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
    .cta-inline strong { display: block; font-size: 18px; font-weight: 500; color: var(--white); margin-bottom: 4px; }
    .cta-inline p { font-size: 14px; color: rgba(255,255,255,.92); }
    .cta-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .cta-inline .btn { min-height: 46px; padding: 0 20px; font-size: 14px; }
    .article-cta .btn-wa { justify-self: start; min-height: 46px; padding: 0 20px; font-size: 14px; }
    .article-cta p a { color: var(--white); }
    @media (max-width: 900px) { .article.single { grid-template-columns: 1fr; } }

    /* Componentes editoriales de los artículos */
    .key-points { margin: 26px 0 8px; padding: 24px 26px; border-radius: var(--radius-md); background: rgba(62,180,154,.07); border: 1px solid rgba(62,180,154,.28); }
    .key-points strong { display: flex; align-items: center; gap: 11px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin-bottom: 12px; font-weight: 600; }
    .key-points strong::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--teal-500); background: radial-gradient(circle at center, var(--teal-400) 0 2.6px, transparent 2.7px); }
    .key-points ul { list-style: none; padding: 0; display: grid; gap: 8px; margin: 0; }
    .key-points li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: var(--white); font-weight: 400; }
    .key-points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--teal-400); border-bottom: 2px solid var(--teal-400); transform: rotate(-45deg); }
    .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 8px; }
    .stat-row div { padding: 20px 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 4px; }
    .stat-row strong { font-family: var(--font-display); font-size: 34px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--white); }
    .stat-row span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.78); }
    .table-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--mist); border-radius: var(--radius-md); }
    table.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
    table.cmp th, table.cmp td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--mist); vertical-align: top; line-height: 1.5; }
    table.cmp th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: rgba(255,255,255,.03); font-weight: 600; }
    table.cmp tr:last-child td { border-bottom: 0; }
    table.cmp td:first-child { color: var(--white); font-weight: 500; }
    table.cmp td { color: var(--ink-soft); font-weight: 400; }
    table.cmp td:last-child { color: var(--ink); }
    ol.steps { list-style: none; padding: 0; margin: 22px 0 8px; display: grid; gap: 12px; counter-reset: st; }
    ol.steps li { counter-increment: st; position: relative; padding: 16px 18px 16px 66px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 4px; }
    ol.steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--bg); background: var(--teal-500); }
    ol.steps strong { color: var(--white); font-weight: 500; font-size: 16px; }
    ol.steps span { color: var(--ink-soft); font-weight: 400; font-size: 15px; line-height: 1.55; }
    ul.checks { list-style: none; padding: 0; margin: 14px 0 8px; display: grid; gap: 10px; }
    ul.checks li { position: relative; padding-left: 32px; color: var(--ink-soft); font-weight: 400; line-height: 1.6; }
    ul.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(62,180,154,.15); border: 1px solid rgba(62,180,154,.4); }
    ul.checks li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--teal-400); border-bottom: 2px solid var(--teal-400); transform: rotate(-45deg); }
    blockquote.pull { margin: 30px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--teal-500); font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 25px); line-height: 1.4; color: var(--white); }
    @media (max-width: 600px) { .stat-row { grid-template-columns: 1fr; } .cta-inline { padding: 22px; } }


    /* ============================================================
       PÁGINAS DE SOLUCIONES POR RUBRO
       ============================================================ */
    .landing-hero h1 { max-width: 18ch; }
    .trust-row { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; }
    .trust-row span { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #FFFFFF; }
    .trust-row span::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--teal-500); background: radial-gradient(circle at center, var(--teal-400) 0 2.2px, transparent 2.3px); }
    .lp-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
    .lp-split--top { align-items: start; }
    .lp-text h2, .lp-split h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; margin: 14px 0 22px; text-wrap: balance; }
    .lp-text p { color: var(--ink-soft); line-height: 1.75; font-size: 16.5px; }
    .lp-text p + p { margin-top: 14px; }
    .lp-text strong { color: #FFFFFF; font-weight: 600; }
    .lp-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--mist); }
    .lp-photo img { width: 100%; height: 100%; object-fit: cover; }
    .lp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .lp-card { padding: 28px 26px; border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--mist); display: grid; gap: 14px; align-content: start; transition: border-color .35s var(--ease), transform .35s var(--ease); }
    .lp-card:hover { border-color: rgba(62,180,154,.4); transform: translateY(-4px); }
    .lp-card h3 { font-size: 19px; line-height: 1.25; }
    .lp-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
    .lp-includes { padding: clamp(26px, 4vw, 40px); border-radius: var(--radius-lg); background: linear-gradient(160deg, #163F6E 0%, #12426F 50%, #0E3358 100%); border: 1px solid rgba(255,255,255,.16); display: grid; gap: 18px; }
    .lp-includes > strong { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; font-weight: 600; }
    .lp-includes ul.checks li { color: rgba(255,255,255,.92); }
    .lp-includes .btn { justify-self: start; margin-top: 6px; }
    @media (max-width: 1100px) {
      .lp-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    }
    @media (max-width: 900px) { .lp-split { grid-template-columns: 1fr; } }
    @media (max-width: 600px) { .lp-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } }