/* =========================================================
   Values · Factoring Solutions — hoja de estilos compartida
   ---------------------------------------------------------
   Requiere, en este orden, ANTES de este archivo:
     assets/tokens.css      (tokens del Design System Valuescorp)
     assets/components.css  (botón, campo, card, tabla, badge)

   El :root de abajo ya no define colores propios: es una capa de
   alias hacia los tokens del DS. Los nombres viejos (--mint,
   --petrol, ...) se conservan para no reescribir las ~370 líneas
   de reglas de este archivo, pero el valor real vive en el sistema.
   Para cambiar la marca se toca tokens.css, no esto.
   ========================================================= */
:root{
  /* -- Paleta de marca, lámina "Colores" del deck (Sitio Público.pptx) -----
     Factoring: primario verde #83AC64 y secundario teal #276678, con su
     escala de verdes hasta los claros de superficie. Los valores viven en
     tokens.css; acá solo se nombran los que el sitio usa como superficie. */
  --vc-green-500:#83AC64; --vc-green-600:#7BA35A; --vc-green-700:#70964C;
  --vc-green-200:#C2D9B2; --vc-green-100:#DCE9D2;
  --vc-green-050:#EFF5EA; --vc-green-025:#F8FBF6;
  --vc-teal-500:#276678;   /* secundario de marca */
  --vc-teal-700:#165A6D;   /* teal oscuro de marca (lámina del holding) */

  /* -- Fuera el negro ------------------------------------------------------
     El sitio no lleva negro puro: los textos van al gris del logotipo
     (#2B2B2B) y las superficies oscuras al teal de marca. Contrastes
     verificados, todos AA.
     La regla vive ACÁ, en la hoja compartida, para que valga en los dos
     sitios. Antes solo remapeaba --petrol y --ink, y --on-surface-primary
     seguía apuntando al neutral-950 del sistema (#0a0a0a): el holding lo
     corregía en su propia hoja y Factoring no, así que sus .btn-outline,
     .btn-ghost, etiquetas de campo e inputs quedaban en negro casi puro
     —22 apariciones en 7 páginas—. Al declararlo acá, la misma clase se
     ve igual en los dos sitios. */
  --petrol:#2B2B2B; --petrol-700:var(--vc-teal-500); --petrol-900:var(--vc-teal-700);
  --on-surface-primary:#2B2B2B; --on-surface-raised:#2B2B2B; --on-surface-floating:#2B2B2B;
  /* Primario (verde chelsea-cucumber) + secundario (teal casal) */
  --mint:var(--fill-primary); --mint-soft:var(--brand-shades-100); --blue-deep:var(--fill-secondary);
  /* Acento verde para TEXTO sobre fondo claro: escalón 700 (6.1:1 sobre
     blanco). No usamos --fill-primary-hover porque en modo claro el DS lo
     aclara a 400, que no alcanza contraste AA para texto. */
  --mint-dark:var(--brand-shades-700);
  /* Neutrales y superficies. --ink es el gris del logotipo, no el negro
     casi puro del sistema (ver "Fuera el negro" arriba). */
  --ink:#2B2B2B;
  /* --text-muted baja un escalón respecto del sistema: al 600 (#525252,
     7,4:1 sobre blanco) en vez del 500 (#737373, 4,7:1), que se leía
     deslavado. Sigue leyéndose como secundario frente al --ink. */
  --muted:var(--brand-neutrals-600); --line:var(--border-default);
  --bg:var(--surface-body); --bg-soft:var(--surface-base);
  /* Sistema */
  --shadow:var(--elevation-lg); --shadow-lg:var(--elevation-xl);
  --r:var(--radius-card);
  /* Ancho de contenido propio del sitio público: no se usa el
     --container-default del sistema. */
  --maxw:1180px;
  --font-head:var(--font-definitions-font-family-headings);
  --font-body:var(--font-definitions-font-family-body);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head)}
/* Escala tipográfica del sistema de diseño. h3-h6 toman los tokens
   tal cual. h1 y h2 son los tamanos de despliegue y se mantienen fluidos con el
   valor del DS como TECHO: el board define un solo tamano por nivel y no
   especifica comportamiento responsive, y 48px duros desbordan en 375px.
   En ese rango fluido el line-height va como razon del DS (48/48=1, 36/36=1) y
   el interletrado en em equivalente (-1,5px/48px, -1,25px/36px) para que la
   proporcion del sistema se mantenga a cualquier tamano. */
h1{font-size:clamp(32px,5.4vw,var(--heading-h1-font-size));font-weight:var(--heading-h1-weight);line-height:1;letter-spacing:-.031em}
h2{font-size:clamp(26px,4vw,var(--heading-h2-font-size));font-weight:var(--heading-h2-weight);line-height:1;letter-spacing:-.035em}
h3{font-size:var(--heading-h3-font-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height);letter-spacing:var(--heading-h3-letter-spacing)}
h4{font-size:var(--heading-h4-font-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height);letter-spacing:var(--heading-h4-letter-spacing)}
h5{font-size:var(--heading-h5-font-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height);letter-spacing:var(--heading-h5-letter-spacing)}
h6{font-size:var(--heading-h6-font-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height);letter-spacing:var(--heading-h6-letter-spacing)}
.brand{font-family:var(--font-head);letter-spacing:-.02em}
/* Titulos de tarjeta: escalon h6 del DS (16/20). Antes iban entre 16 y 19px sin
   escala; el h4 del DS (24px) es demasiado grande para estas tarjetas. */
.actor h3,.actor h4,.step h3,.step h4,.bcard h3,.bcard h4,.svc h3,.svc h4,.vcard h3,.vcard h4,.mito h3,.mito h4,.post h3,.post h4,.opt h3,.opt h4,.video-box h3,.video-box h4{font-size:var(--heading-h6-font-size);line-height:var(--heading-h6-line-height)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:84px 0}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mint-dark);margin-bottom:20px}
.eyebrow.light{color:rgba(255,255,255,.75)}
.lead{font-size:var(--body-lg-font-size);color:var(--muted);max-width:640px}
h2.title{color:var(--petrol)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
/* El título y su bajada quedaban pegados (h2 va con line-height 1): las
   secciones que se veían bien lo resolvían con un margen inline suelto. */
.title+.lead{margin-top:16px}
.bg-soft{background:var(--bg-soft)}
.bg-petrol{background:var(--vc-teal-500);color:#fff}
.bg-petrol .title,.bg-petrol h2,.bg-petrol h3{color:#fff}

/* Botones -> definidos en components.css (.btn y variantes del DS) */

/* Header */
/* La barra va en la superficie clara de marca, como en el prototipo: header y
   hero se leen como una sola pieza. El holding la sobrescribe con su arena. */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--vc-green-050) 94%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-size:var(--heading-h5-font-size);font-weight:var(--body-body-bold-weight);color:var(--petrol);display:flex;align-items:baseline;gap:2px}
.brand b{color:var(--mint-dark)}
.brand .sub{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.brand img{height:34px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:15px;font-weight:500;color:var(--petrol);transition:.15s}
.nav-links a:hover,.nav-links a.active{color:var(--mint-dark)}
.nav-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--petrol);border-radius:2px;transition:transform .25s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero principal (Home)
   Antes era un video con un degradado casi negro encima. Los prototipos
   "WEB home" del deck son lo contrario: superficie clara de marca, la V del
   logotipo como motivo y tipografía oscura. */
.hero{position:relative;overflow:hidden;color:var(--petrol);background:var(--vc-green-050);padding:84px 0 88px;min-height:88vh;display:flex;align-items:center}
/* Hero con imagen en movimiento: el video se ve nítido y un velo del verde
   de superficie encima mantiene legible el texto oscuro. Mismo tratamiento
   que el hero del holding. */
.hero-video video.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.48;z-index:0}
.hero-video .hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg,color-mix(in srgb,var(--vc-green-050) 60%,transparent),
    color-mix(in srgb,var(--vc-green-050) 46%,transparent) 55%,
    color-mix(in srgb,var(--vc-green-050) 38%,transparent))}
/* Hero centrado a todo el ancho (sin simulador adentro) */
.hero-center{text-align:center;min-height:92vh}
.hero-copy{max-width:780px;margin:0 auto;position:relative;z-index:2}
.hero-center .hero-btns,.hero-center .hero-pills{justify-content:center}
.hero-center .sub{margin-left:auto;margin-right:auto}
.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid color-mix(in srgb,var(--petrol) 28%,transparent);color:var(--mint-dark);display:flex;align-items:center;justify-content:center;font-size:20px;animation:bounce 2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
/* Layout del simulador en su sección */
.sim-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.sim-points{list-style:none;margin:20px 0 24px;padding:0}
.sim-points li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);margin-bottom:10px}
@media(max-width:900px){.sim-layout{grid-template-columns:1fr;gap:32px}}50%{transform:translate(20px,-26px) scale(1.08)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2;width:100%}
.hero h1{margin-bottom:20px}
.hero h1 em{color:var(--mint-dark);font-style:normal}
.hero p.sub{font-size:19px;color:var(--muted);max-width:520px;margin-bottom:30px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-pills{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}
.hero-pills .p{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);display:inline-block}

/* Page hero (subpáginas) */
.page-hero{background:var(--vc-green-050);color:var(--petrol);padding:92px 0 80px;position:relative;overflow:hidden;min-height:320px;display:flex;align-items:center}
.page-hero .wrap{width:100%}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:var(--petrol)}
.page-hero p{font-size:18px;color:var(--muted);max-width:620px;margin-top:14px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a:hover{color:var(--mint-dark)}

/* Simulador */
.sim{background:var(--surface-raised);color:var(--ink);border-radius:24px;padding:30px;box-shadow:var(--shadow-lg)}
.sim h3{font-size:var(--heading-h5-font-size);color:var(--petrol);margin-bottom:4px}
.sim .hint{font-size:13px;color:var(--muted);margin-bottom:22px}
.sim label{font-size:13px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:8px}
.sim .amount{font-family:var(--font-head);font-size:var(--heading-h4-font-size);font-weight:var(--body-body-bold-weight);color:var(--petrol)}
input[type=range]{width:100%;height:6px;border-radius:6px;background:var(--line);-webkit-appearance:none;appearance:none;outline:none;margin:6px 0 4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--mint);cursor:pointer;box-shadow:0 2px 8px color-mix(in srgb, var(--fill-primary) 50%, transparent);border:3px solid #fff}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--mint);cursor:pointer;border:3px solid #fff}
.range-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.plazos{display:flex;gap:8px;margin:6px 0 22px}
.plazos button{flex:1;padding:11px;border:1px solid var(--line);background:var(--surface-raised);border-radius:12px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font-head);transition:.15s}
.plazos button.active{background:var(--mint-soft);border-color:var(--mint);color:var(--mint-dark)}
.sim-res{border-top:1px dashed var(--line);padding-top:18px}
.sim-row{display:flex;justify-content:space-between;font-size:15px;margin-bottom:10px;color:var(--muted)}
.sim-row span:last-child{font-weight:600;color:var(--ink)}
.sim-total{display:flex;justify-content:space-between;align-items:center;background:var(--petrol);color:#fff;border-radius:14px;padding:16px 18px;margin-top:6px}
.sim-total span{font-size:14px;color:var(--brand-neutrals-300)}
.sim-total b{font-family:var(--font-head);font-size:var(--heading-h4-font-size);font-weight:var(--body-body-bold-weight)}
.sim-note{font-size:11px;color:var(--muted);margin-top:14px;line-height:1.5}

/* Grids reutilizables */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.mt40{margin-top:40px}.mt28{margin-top:28px}

/* Actores / tarjetas neutras.
   El relleno base va en BLANCO, no en el --bg-soft del sistema (#FAFAFA):
   sobre una sección blanca ese tono daba 1,04:1 y la tarjeta quedaba
   delimitada solo por el borde. La norma es: sobre superficie clara, la
   tarjeta va blanca con borde --line; sobre banda de color va blanca
   translúcida. Cualquier otro relleno es una excepción y se documenta. */
.actor{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.actor.center{text-align:center}
.actor .n{width:42px;height:42px;border-radius:50%;background:var(--mint);color:#fff;font-weight:var(--body-body-bold-weight);font-family:var(--font-head);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.actor.center .n{margin-left:auto;margin-right:auto}
.actor h3,.actor h4{color:var(--petrol);margin-bottom:6px}
.actor p{font-size:14px;color:var(--muted)}
.flow{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:13px;margin-top:16px;flex-wrap:wrap}
.flow .arrow{color:var(--mint)}

/* Pasos */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
.step .num{font-family:var(--font-head);font-size:var(--heading-h2-font-size);font-weight:var(--body-body-bold-weight);color:var(--blue-deep);line-height:1}
.step h3,.step h4{color:var(--petrol);margin:6px 0}
.step p{font-size:14px;color:var(--muted)}

/* Beneficios */
.bcard{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:.18s}
.bcard:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--mint)}
.bcard .ic{width:46px;height:46px;border-radius:12px;background:var(--mint-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:22px}
.bcard h3,.bcard h4{color:var(--petrol);margin-bottom:6px}
.bcard p{font-size:14px;color:var(--muted)}

/* Soluciones */
.svc-tag{line-height:1.4;font-size:var(--body-xs-font-size);font-weight:var(--body-body-bold-weight);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px}
.svc{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;transition:.18s}
.svc:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.svc .ic{width:46px;height:46px;border-radius:12px;background:var(--mint);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:20px}
.svc .pain{font-size:12.5px;font-weight:600;color:var(--mint-dark);margin-bottom:8px}
.svc h3,.svc h4{color:var(--petrol);margin-bottom:8px}
.svc p{font-size:14px;color:var(--muted);flex:1}
.svc .more{margin-top:16px;font-weight:600;color:var(--mint-dark);font-size:14px}
.badge-soon{display:inline-block;font-size:11px;font-weight:var(--body-body-bold-weight);letter-spacing:.05em;background:var(--mint-soft);color:var(--mint-dark);padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* Cita de propósito */
.purpose{font-family:var(--font-head);font-weight:var(--body-body-bold-weight);font-size:clamp(20px,2.4vw,var(--heading-h4-font-size));line-height:1.4;color:var(--petrol);border-left:4px solid var(--mint);padding:6px 0 6px 22px;margin-top:18px;letter-spacing:-.01em}
.purpose.light{color:var(--brand-neutrals-100);border-left-color:var(--brand-shades-400)}

/* Valores */
.vcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:26px}
.vcard h3,.vcard h4{color:var(--brand-shades-400);margin-bottom:8px}
.vcard p{font-size:14px;color:var(--brand-neutrals-300)}

/* Equipo */
/* Columnas de ancho acotado + justify-content:center para que una fila
   incompleta (3 de 4) quede centrada en vez de pegada a la izquierda. */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,265px));gap:20px;margin-top:36px;justify-content:center}
/* Flex column para que el botón de LinkedIn se alinee abajo en todas las
   tarjetas, aunque el cargo ocupe una o dos líneas. */
.member{text-align:center;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.18s;display:flex;flex-direction:column}
.member:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.avatar{width:100%;aspect-ratio:1;flex-shrink:0;border-radius:14px;background:linear-gradient(150deg,var(--brand-shades-100),var(--brand-shades-200));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:var(--heading-h2-font-size);font-weight:var(--body-body-bold-weight);color:var(--mint-dark);margin-bottom:14px;border:1px solid var(--line);overflow:hidden}
.avatar.photo{padding:0}
/* Las fotos van dentro de un <picture> (WebP con respaldo JPG). <picture> es
   inline por defecto, así que como hijo flex de .avatar encogía al tamaño del
   contenido y dejaba ver el degradado del fondo: hay que hacerlo llenar. */
.avatar.photo picture{width:100%;height:100%;display:block}
.avatar.photo img{width:100%;height:100%;object-fit:cover;object-position:50% center;display:block;border-radius:inherit}
.member .role{font-size:var(--body-sm-font-size);color:var(--petrol);font-weight:var(--body-body-bold-weight);font-family:var(--font-head)}
.member .name{font-size:13px;color:var(--muted);margin-top:2px;margin-bottom:12px}
.member .li{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#0a66c2;margin-top:auto;align-self:center;border:1px solid var(--line);padding:6px 12px;border-radius:999px;transition:.15s}
.member .li:hover{background:#eef5fb;border-color:#0a66c2}

/* Mitos */
.mito{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:22px;cursor:pointer;transition:.18s}
.mito:hover{box-shadow:var(--shadow)}
.mito .tag{display:inline-block;font-size:11px;font-weight:var(--body-body-bold-weight);letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:var(--fill-destructive-subtle);color:var(--text-destructive);margin-bottom:10px}
.mito .tag.true{display:none}
.mito.open .tag.false{display:none}
.mito.open .tag.true{display:inline-block;background:var(--mint-soft);color:var(--mint-dark)}
.mito h3,.mito h4{color:var(--petrol)}
.mito .ans{font-size:14px;color:var(--muted);max-height:0;overflow:hidden;transition:.3s;opacity:0}
.mito.open .ans{max-height:220px;opacity:1;margin-top:10px}

/* Industrias */
.inds{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;justify-content:center}
.inds .chip{background:var(--surface-raised);border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;color:var(--petrol)}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.post{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.18s}
.post:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.post .ph{height:150px;background:linear-gradient(135deg,var(--petrol),var(--mint-dark));display:flex;align-items:flex-end;padding:16px}
.post .ph span{background:rgba(255,255,255,.18);color:#fff;font-size:11px;font-weight:600;padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.post .body{padding:22px}
.post h3,.post h4{color:var(--petrol);margin-bottom:8px}
.post p{font-size:14px;color:var(--muted)}
.post .read{margin-top:14px;font-size:13px;font-weight:600;color:var(--mint-dark)}

/* FAQ */
.faq{max-width:820px;margin:36px auto 0}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;text-align:left;background:none;border:none;padding:20px 0;font-family:var(--font-head);font-size:var(--heading-h6-font-size);font-weight:var(--body-body-bold-weight);color:var(--petrol);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.q .icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--mint-soft);color:var(--mint-dark);display:flex;align-items:center;justify-content:center;font-size:18px;transition:.2s}
.q.open .icon{transform:rotate(45deg);background:var(--mint);color:#fff}
.q .a{max-height:0;overflow:hidden;transition:.3s;font-size:15px;color:var(--muted)}
/* 300px alcanzaba en escritorio, pero en pantallas angostas una respuesta
   de cuatro líneas se cortaba a media frase. 600px cubre la más larga. */
.q.open .a{max-height:600px;padding-bottom:20px}

/* Contacto / formularios */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.cline{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.cline .ic{width:42px;height:42px;border-radius:12px;background:var(--mint-soft);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.cline b{display:block;color:var(--petrol);font-family:var(--font-head);font-size:15px}
.cline span{font-size:14px;color:var(--muted)}
.form{background:var(--surface-raised);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow)}
/* .field / .check -> definidos en components.css (campos del DS) */
.form .btn-primary{width:100%;justify-content:center;margin-top:6px}
/* Error a nivel de formulario (falla del envío, no de un campo). Toma los
   tokens destructivos del DS, los mismos que usa .field-error. */
/* components.css declara .field-error{display:block}, y esa regla de autor
   le gana a la del navegador para [hidden]. Sin esto, poner hidden=true no
   ocultaba nada: el "Clave incorrecta." seguía en pantalla al reintentar.
   La especificidad de clase+atributo basta, sin !important. */
.field-error[hidden],.form-error[hidden]{display:none}
.form-error{background:color-mix(in srgb,var(--text-destructive) 8%,transparent);border:1px solid var(--border-destructive);color:var(--text-destructive);padding:14px;border-radius:12px;font-size:14px;font-weight:600;margin-top:14px}
.form-ok{display:none;background:var(--mint-soft);border:1px solid var(--mint);color:var(--mint-dark);padding:14px;border-radius:12px;font-size:14px;font-weight:600;text-align:center;margin-top:14px}

/* Tarjetas de opción dual (Hazte cliente) */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.opt{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--surface-raised);transition:.18s}
.opt:hover{box-shadow:var(--shadow);border-color:var(--mint)}
.opt .ic{width:48px;height:48px;border-radius:12px;background:var(--mint-soft);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.opt h3,.opt h4{color:var(--petrol);margin-bottom:8px}
.opt p{font-size:14px;color:var(--muted);margin-bottom:16px}
.note-box{background:var(--mint-soft);border:1px solid var(--mint);border-radius:14px;padding:16px 18px;font-size:14px;color:var(--mint-dark);margin-top:24px}

/* Login */
.login-wrap{max-width:420px;margin:0 auto}
.login-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.login-card h2{color:var(--petrol);font-size:var(--heading-h4-font-size);margin-bottom:6px;text-align:center}
.login-card p.sub{font-size:14px;color:var(--muted);text-align:center;margin-bottom:24px}
.login-card .btn-primary{width:100%;justify-content:center}
.login-links{display:flex;justify-content:space-between;font-size:13px;margin-top:16px}
.login-links a{color:var(--mint-dark);font-weight:600}
.video-box h3,.video-box h4{color:var(--petrol);margin-bottom:4px}
.video-box p{font-size:13px;color:var(--muted)}

/* Banda CTA */
.cta-band{background:linear-gradient(120deg,var(--mint-dark),var(--mint));color:#fff;border-radius:24px;padding:48px;text-align:center;margin:48px 24px 0}
.nav-cta-m{display:none}
.cta-band h2{color:#fff;margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.92);margin-bottom:24px;font-size:17px}

/* Footer */
footer.site{background:var(--petrol-900);color:rgba(255,255,255,.85);padding:60px 0 30px;margin-top:84px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
footer .brand{color:#fff;margin-bottom:14px}
footer .brand b{color:var(--brand-shades-400)}
footer .brand img{height:30px;width:auto;display:block}
footer p.desc{font-size:14px;color:rgba(255,255,255,.72);max-width:280px}
footer h3,footer h5{color:#fff;font-size:var(--body-sm-font-size);font-weight:var(--body-body-bold-weight);margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em}
footer a{display:block;font-size:14px;color:rgba(255,255,255,.72);margin-bottom:10px;transition:.15s}
footer a:hover{color:#fff}
.foot-addr{font-size:13px;color:rgba(255,255,255,.72);line-height:1.7;margin-top:6px}
.foot-addr a{display:inline;font-size:inherit;margin:0}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.66)}
/* "Términos y condiciones · Política de privacidad" en una sola línea.
   El enlace se partía porque
   footer a{display:block} lo convierte en bloque y lo empuja a su
   propio renglón, más 10px de margen inferior. Es el mismo arreglo
   que ya tenía .foot-addr a. Se deja que fluya: en pantallas angostas
   vuelve a repartirse en dos renglones en vez de desbordar. */
.foot-bottom a{display:inline;font-size:inherit;margin:0}

/* WhatsApp flotante */
.wa{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:60;transition:.18s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:30px;height:30px;fill:#fff}

/* Reveal on scroll */
/* Entradas al hacer scroll.
   Una sección suelta entra completa. Una sección con grillas hace solo el
   fundido y son sus bloques los que entran en cascada: si se desplazaran los
   dos, el recorrido se suma y el movimiento se ve rebotado.
   La curva es una salida suave — arranca rápido y frena larga.
   [data-seq] lo pone app.js, así que si el script no corre no hay nada
   invisible que rescatar. */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.seq{transform:none;transition:opacity .55s ease}
.reveal [data-seq]{opacity:0;transform:translateY(34px) scale(.94);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--seq,0)*80ms)}
.reveal.in [data-seq]{opacity:1;transform:none}
/* Entrada del texto: cada línea sube desde detrás de un borde invisible.
   La máscara va por palabra, no por línea: así el corte de línea puede cambiar
   con el ancho sin rehacer el marcado, y los <em> y enlaces del titular
   sobreviven intactos. Las palabras de una misma línea comparten retardo, con
   lo que se ven subir juntas, como una sola línea enmascarada.
   El padding-bottom con margen negativo evita que la máscara corte las colas
   de la g, la j y la p. */
.tx-l{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.tx-l>i{display:inline-block;font-style:inherit;transform:translateY(115%);transition:transform .85s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--tl,0)*85ms)}
.reveal.in .tx-l>i,.tx-in .tx-l>i{transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.seq,.reveal [data-seq]{opacity:1;transform:none;transition:none}
  .tx-l{overflow:visible;padding-bottom:0;margin-bottom:0}
  .tx-l>i{transform:none;transition:none}
}

/* ===== Ventana emergente de la política de privacidad =====
   Va en la hoja compartida porque el enlace del pie existe en los DOS
   sitios. El contenido no se duplica: se trae de la propia página de la
   política, que sigue siendo la fuente única y navegable. */
.enlace-politica{text-decoration:underline;text-underline-offset:3px}
dialog.modal-politica{width:min(760px,92vw);max-height:86vh;margin:auto;padding:0;border:0;border-radius:20px;
  background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-lg);overflow:hidden}
dialog.modal-politica::backdrop{background:rgba(15,61,74,.55);backdrop-filter:blur(3px)}
.modal-politica .mp-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 26px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-raised)}
.modal-politica .mp-barra h2{font-size:20px;color:var(--petrol);margin:0}
.modal-politica .mp-cerrar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;flex-shrink:0}
.modal-politica .mp-cerrar:hover{background:var(--bg-soft)}
.modal-politica .mp-cerrar:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.modal-politica .mp-cuerpo{padding:24px 26px 30px;overflow-y:auto;max-height:calc(86vh - 79px)}
.modal-politica .mp-cuerpo h2{font-size:17px;color:var(--petrol);margin:26px 0 10px}
.modal-politica .mp-cuerpo h2:first-child{margin-top:0}
.modal-politica .mp-cuerpo p,.modal-politica .mp-cuerpo li{font-size:14.5px;line-height:1.7;color:var(--ink);margin-bottom:12px}
.modal-politica .mp-cuerpo ul{margin:0 0 14px 20px}
.modal-politica .mp-cuerpo a{color:var(--mint-dark);text-decoration:underline;text-underline-offset:3px}
.modal-politica .mp-cuerpo .vigencia{background:var(--bg-soft);border-left:4px solid var(--mint);
  padding:14px 18px;border-radius:0 12px 12px 0;margin-top:24px}
.modal-politica .mp-cuerpo .vigencia p{margin:0}
.modal-politica .mp-cuerpo .datos{border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.modal-politica .mp-cuerpo .datos p{margin:0 0 4px}
.modal-politica .mp-pie{padding:0 26px 22px}
.modal-politica .mp-pie a{font-size:13.5px}

/* Modal de contacto: reutiliza la caja del de la política y solo suma lo
   propio del formulario. */
.modal-contacto .mc-intro{font-size:14px;color:var(--muted);margin-bottom:20px}
.modal-contacto .field{margin-bottom:16px}
.modal-contacto textarea{width:100%;resize:vertical}
.modal-contacto #mc-enviar{width:100%;justify-content:center;margin-top:4px}

/* ===== Iconos (Feather inline) ===== */
.ic svg{width:24px;height:24px;display:block}
.bcard .ic{color:var(--blue-deep)}
.cline .ic,.opt .ic{color:var(--mint-dark)}
.opt .ic svg{width:26px;height:26px}
.svc .ic{color:#fff}
/* icono pequeño inline (requisitos, chips) */
.ci{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--mint-dark);margin-right:8px;vertical-align:-4px}
.ci svg{width:20px;height:20px}
.chip .ci{color:var(--blue-deep);margin-right:6px}
/* Animación de iconos en Soluciones */
.svc .ic .ico-anim{animation:icofloat 3.2s ease-in-out infinite}
.svc:hover .ic .ico-anim{animation:icopop .5s ease}
@keyframes icofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes icopop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-4deg)}100%{transform:scale(1)}}
.svc .ic{transition:.18s}
.svc:hover .ic{background:var(--blue-deep)}

/* ===== Cuña / testimonial de director ===== */
.testi{max-width:860px;margin:0 auto;text-align:center;position:relative;z-index:2}
.testi .qmark{width:48px;height:48px;color:var(--brand-shades-400);margin:0 auto 18px}
.testi .qmark svg{width:48px;height:48px}
.testi blockquote{font-family:var(--font-head);font-weight:600;font-size:clamp(20px,2.5vw,27px);line-height:1.4;color:#fff;letter-spacing:-.01em}
.testi .author{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.testi .author .ph{width:54px;height:54px;border-radius:50%;background:linear-gradient(150deg,var(--casal-400),var(--fill-secondary));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:var(--body-body-bold-weight);color:#fff;font-size:18px}
.testi .author .meta{text-align:left}
.testi .author .meta b{display:block;color:#fff;font-family:var(--font-head);font-size:16px}
.testi .author .meta span{font-size:13px;color:rgba(255,255,255,.75)}

/* ===== Footer redes sociales ===== */

/* ===== Nav: Blog próximamente ===== */
.nav-links a.soon{color:var(--muted);cursor:default;pointer-events:none}
.nav-links a.soon em{font-style:normal;font-size:11px;color:var(--mint-dark);font-weight:600}
footer a.soon-link{cursor:default}
footer a.soon-link:hover{color:var(--brand-neutrals-400)}

/* ===== CTA band: doble botón ===== */
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-scroll svg{width:20px;height:20px}
.member .li svg{width:15px;height:15px}
.cline b{display:flex;align-items:center;gap:6px}

/* Responsive */
/* Nav: colapsa a menú hamburguesa cuando no hay ancho cómodo para toda la barra */
@media(max-width:1180px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .nav-links.show{display:flex;position:fixed;top:72px;left:12px;right:12px;z-index:60;background:var(--surface-raised);flex-direction:column;gap:4px;padding:12px 12px 14px;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px color-mix(in srgb, var(--brand-neutrals-950) 18%, transparent);transform-origin:top;animation:navdrop .22s cubic-bezier(.2,.8,.2,1);max-height:calc(100vh - 88px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  @keyframes navdrop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
  .nav-links.show a{padding:14px 14px;border-bottom:0;border-radius:10px;font-size:16px}
  .nav-links.show a:not(.nav-cta-m){color:var(--petrol)}
  .nav-links.show a:not(.nav-cta-m):hover,.nav-links.show a.active{background:var(--bg-soft);color:var(--mint-dark)}
  .nav-links.show .nav-cta-m{display:block;margin:6px 6px 0}
  .nav-links.show a.nav-cta-ghost{text-align:center;color:var(--petrol);font-weight:600;border:1px solid var(--line);border-radius:12px;padding:14px 20px}
  .nav-links.show a.nav-cta-ghost:hover{border-color:var(--petrol);background:var(--bg-soft)}
  .nav-links.show a.nav-cta-primary{text-align:center;background:var(--mint);color:#fff;font-weight:var(--body-body-bold-weight);border-radius:12px;padding:15px 20px;margin-top:8px}
  .nav-links.show a.nav-cta-primary:hover{background:var(--mint-dark)}
  .nav-scrim{display:none}
  .nav-scrim.show{display:block;position:fixed;inset:72px 0 0;background:color-mix(in srgb, var(--brand-neutrals-950) 35%, transparent);z-index:40;animation:navfade .2s ease}
  @keyframes navfade{from{opacity:0}to{opacity:1}}
}
@media(max-width:900px){
  .hero-grid,.contact-grid,.opts{grid-template-columns:1fr;gap:36px}
  .grid-3,.grid-4,.steps,.team,.posts{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero{min-height:auto}
}
@media(max-width:560px){
  section{padding:60px 0}
  .grid-3,.grid-4,.steps,.team,.posts,.foot-grid{grid-template-columns:1fr}
  .cta-band{padding:34px 22px}
}

/* ===== Socios · fila de logos ===== */
.logos{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center}
.logo-ph{flex:0 0 auto;width:180px;height:88px;display:flex;align-items:center;justify-content:center;background:var(--surface-raised);border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:13px;font-weight:600;text-align:center;padding:0 12px}
@media(max-width:560px){ .logo-ph{width:calc(50% - 9px)} }