/* =========================================================================
   SISTEMA DE DISEÑO — Conecta Gestión
   -------------------------------------------------------------------------
   Dirección: "documento civil moderno". Este producto vive en el mundo de
   las actas, las asambleas y la Ley 21.442: papel cálido, tinta azul de
   registro, un solo rojo de timbre que siempre significa autoridad o acción
   irreversible, y un dorado de sello para la reputación. La decisión de
   fondo es tipográfica: titulares con serif (el gesto del documento oficial)
   sobre una interfaz sans compacta. Nada de degradados, vidrio esmerilado
   ni franjas laterales de color.

   Densidad: las pantallas operativas (panel, tablero) son densas a
   propósito — son herramientas de trabajo. El aire generoso se reserva para
   las superficies públicas (landing, registro, módulos de cada ficha).

   Contraste: todos los pares texto/fondo de esta paleta están medidos
   contra WCAG AA. El dorado de las estrellas se oscureció a #A57500 porque
   el anterior (#D4A017) quedaba en 2.4:1 y no alcanzaba ni el mínimo de
   3:1 para elementos gráficos.
   ========================================================================= */
:root{
  /* --- color: nombres semánticos heredados, valores afinados --- */
  --navy:#0C2340;          /* tinta principal — el único navy del sistema · 15.6:1 sobre blanco */
  --teal:#2E7D6B;          /* confirmación, relleno y anillo de foco · 4.9:1 */
  --teal-tinta:#276A5B;    /* texto verde SOBRE fondo verde claro · 5.5:1 */
  --light:#EAF1EE;         /* fondo de bloque secundario */
  --grey:#5B6570;          /* texto de apoyo · 5.9:1 */
  --line:#D9DFE6;          /* hairline con temperatura azul, no gris genérico */
  --line-fuerte:#BCC6D2;   /* hairline de énfasis y estados hover */
  --paper:#F1F2F4;         /* plata clara — tonalidad fría aprobada 28-08 */
  --white:#FCFDFE;
  --stamp:#B23A2E;         /* timbre · 5.9:1 · acción principal e irreversible */
  --stamp-oscuro:#8C2C22;
  --dark:#22282E;          /* texto · 14.9:1 */
  --oro:#8A6A22;           /* sello de reputación (tabla aprobada 27-08) · 5.0:1 */
  --oro-suave:#F3EAD3;
  --oro-tinta:#7A5A10;     /* texto sobre fondo dorado · 6.4:1 */
  --apagado:#8E9A95;       /* estrella vacía, estados inertes */

  /* --- sistema unificado de la aplicación interna (rediseño 27-08) ---
     Fuente ÚNICA de tokens: shell.css ya no declara :root propio.
     Ver docs/DISENO.md. */
  --tinta:#1B2430;           /* texto principal · 15.6:1 */
  --tinta-3:#64707B;         /* texto terciario · 5.0:1 sobre blanco */
  --navy-claro:#1D3A5F;
  --navy-hover:#081B31;
  --cta:#C93C17;             /* acción que inicia algo o irreversible · 5.07:1 */
  --cta-hover:#A93011;
  --critico:#9C2A20;         /* error, rechazo, destructivo · 7.0:1 */
  --critico-fondo:#FBEEEC;
  --pendiente:#8A5A00;       /* observación, por resolver · 4.9:1 */
  --pendiente-fondo:#FBF3E2;
  --gris-fondo:#EDEFF1;
  --fila-hover:#F1F3F5;
  --radius-md:6px;           /* controles; tarjetas y cajón usan --radius-lg */
  --ancho-menu:248px;
  --ancho-menu-corto:64px;
  --alto-barra:60px;

  /* --- tipografía --- */
  /* La marca primero: Source Serif 4 e Inter viven autoalojadas en /fonts
     (ver @font-face más abajo) y son las mismas de la landing. */
  --fuente-titulo:"Source Serif 4",ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --fuente-ui:"Inter",ui-sans-serif,"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Noto Sans",sans-serif;
  --fuente-mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px;
  --t-16:16px; --t-20:20px; --t-26:26px; --t-33:33px;

  /* --- espaciado (base 4) --- */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px;
  --e-5:20px; --e-6:24px; --e-8:32px; --e-10:40px; --e-14:56px;

  /* --- radios: 4px es el radio "documento" del producto --- */
  --radius:4px; --radius-sm:2px; --radius-lg:8px; --radius-pill:999px;

  /* --- elevación tonal: sombras teñidas de tinta, nunca negro duro --- */
  --sombra-1:0 1px 2px rgba(31,58,95,.06), 0 1px 1px rgba(31,58,95,.04);
  --sombra-2:0 2px 10px rgba(31,58,95,.09), 0 1px 2px rgba(31,58,95,.05);
  --sombra-3:0 8px 28px rgba(31,58,95,.12), 0 2px 6px rgba(31,58,95,.06);

  /* --- movimiento: curvas propias, nunca linear ni ease-in-out --- */
  --ease-salida:cubic-bezier(.22,1,.36,1);
  --ease-entrada:cubic-bezier(.55,.06,.68,.19);
  --ease-suave:cubic-bezier(.4,.14,.3,1);
  --dur-rapida:120ms; --dur-base:200ms; --dur-lenta:320ms;

  /* --- capas: z-index con nombre, nunca números sueltos --- */
  --z-base:1; --z-elevado:10; --z-cabecera:20; --z-overlay:50; --z-toast:60;

  /* ---- tokens de la web pública (landing Conecta Gestión) ---- */
  /* El único navy del sistema (igualado en los demás bloques de este archivo). */
  --cg-navy:#0C2340;
  --cg-navy-hondo:#081627;       /* pie y bandas de mayor peso */
  --cg-papel:#F1F2F4;            /* plata clara fría (antes papel cálido) */
  --cg-blanco:#FAFBFC;           /* casi blanco frío para superficies */
  --cg-tinta:#1B2430;            /* 15.6:1 sobre blanco */
  --cg-tinta-suave:#5B6570;      /* 5.9:1 sobre blanco */
  --cg-acento:#C93C17;           /* 5.07:1 — SOLO acción */
  --cg-acento-hover:#A93011;
  --cg-oro:#8A6A22;              /* reservado: reputación y rótulos */
  --cg-oro-claro:#E3B15A;        /* el oro sobre navy */
  --cg-verde:#3F6B49;            /* confirmación */
  --cg-linea:rgba(12,35,64,.12);
  --cg-linea-navy:rgba(255,255,255,.14);
  --cg-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --cg-sans:"Inter",ui-sans-serif,"Segoe UI",-apple-system,sans-serif;
  --cg-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --cg-ease:cubic-bezier(.16,1,.3,1);
  /* Sistema global de movimiento — todos los tiempos y curvas viven acá.
     Horizontal solo carruseles · vertical acompaña la lectura · conteo solo
     cifras verificables · color para procesos y estados · aparición simple
     para precios y condiciones · nada decorativo permanente. */
  --motion-hover:160ms;
  --motion-fast:180ms;           /* salidas breves (paneles del menú) */
  --motion-menu:220ms;
  --motion-carousel:260ms;
  --motion-reveal:480ms;
  --motion-emphasis:560ms;
  --motion-stagger:60ms;
  --motion-distance:14px;
  --ease-interface:cubic-bezier(.22,1,.36,1);
  --ease-carousel:cubic-bezier(.22,1,.36,1);
  /* Ritmo de los capítulos intermedios (héroe, carrusel, cierre y pie
     conservan su espaciado original — estas variables solo se consumen en
     .cg-cap-medio / .cg-cap-junto). */
  --cap-espacio:clamp(72px,6vw,96px);
  --cap-espacio-junto:clamp(60px,5vw,76px);
  --cap-espacio-movil:clamp(48px,10vw,64px);
  --cap-brecha-titulo:clamp(14px,1.8vw,20px);
  --cap-brecha-contenido:clamp(32px,3.5vw,44px);

  /* ---- tokens de los formularios de registro ---- */
  --f-navy:#0C2340;        /* el único navy del sistema · 15.6:1 sobre blanco */
  --f-navy-2:#0C3158;
  --f-accion:#C93C17;      /* el naranjo de marca, ajustado para que el texto
                              blanco encima llegue a 5.1:1 — con #E84A20 el
                              botón quedaba en 3.9 y no pasaba */
  --f-accion-hover:#A93011;
  --f-verde:#0D5B4B;       /* verificación, foco y estados positivos · 8.0:1 */
  --f-verde-suave:#EAF3F0;
  --f-borde:#B9C2D0;
  --f-borde-hover:#8E9BAF;
  --f-fondo:#F8F7F3;
  --f-error:#B3261E;
  --f-sombra:0 1px 2px rgba(10,39,68,.04), 0 12px 32px rgba(10,39,68,.06);

  /* ---- tokens de los portales (comunidad · proveedor · admin) ---- */
  --gc-navy:#0C2340;          /* el único navy del sistema · 15.6:1 sobre blanco */
  --gc-navy-2:#0B3158;
  --gc-green:#147D68;         /* 5.0:1 — verificado, adjudicado, seguridad */
  --gc-green-tinta:#0F6B59;   /* el mismo verde para texto sobre verde suave */
  /* El naranjo de marca queda tal cual para lo gráfico (el filete activo, un
     punto, un borde): ahí basta 3:1 y llega a 3.87. Para TEXTO y para relleno
     con texto blanco encima no alcanza AA, así que esos usos van con la
     versión entintada — la misma que ya usa el formulario de registro. */
  --gc-orange:#E84A20;
  --gc-orange-tinta:#C93C17;  /* 5.07:1 en ambos sentidos */
  --gc-orange-hover:#A93011;
  --gc-bg:#F7F6F2;
  --gc-surface:#FFFFFF;
  --gc-border:#E0E5EB;        /* divisor, no borde de control */
  --gc-border-fuerte:#C9D2DC;
  --gc-tinta-2:#4C5663;       /* texto de apoyo · 7.5:1 */
  --gc-tinta-3:#616B78;       /* rótulos · 5.4:1 (el #7A8493 anterior daba 3.5) */
  --gc-sombra:0 1px 2px rgba(8,43,80,.025), 0 8px 24px rgba(8,43,80,.035);
  --gc-radio:10px;
}

*{box-sizing:border-box;}
html{color-scheme:light;}

body{
  margin:0;
  font-family:var(--fuente-ui);
  font-size:var(--t-14);
  background:var(--paper);
  color:var(--dark);
  line-height:1.55;
  /* Quita el retardo de 300ms del doble-tap en móvil y evita que el
     navegador infle la tipografía al rotar el teléfono. */
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{margin:0;color:var(--navy);text-wrap:balance;}
h1{
  font-family:var(--fuente-titulo);
  font-size:var(--t-26);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.2;
  margin-bottom:var(--e-2);
}
h2{font-size:17px;font-weight:600;letter-spacing:-.005em;}
h3{font-size:var(--t-14);font-weight:600;}
p{margin:0;}

/* Las cifras siempre en numerales tabulares: montos, conteos y fechas
   quedan alineados en columna y no "bailan" al actualizarse. */
.kpi-valor,.funnel-num,.monto-linea b,.plan-precio,.cotiz-table td,
.bloque-resumen,.suscripcion-resumen,.paginacion-info,.bitacora-fecha{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.wrap{max-width:880px;margin:0 auto;padding:var(--e-8) var(--e-6) 80px;}
.wrap.wrap-wide{max-width:1500px;}
.lede{color:var(--grey);font-size:14.5px;margin-bottom:var(--e-6);max-width:62ch;text-wrap:pretty;}

/* ---------- foco visible, una sola regla para todo ----------
   Antes cada campo hacía `outline:none` sin reemplazo, así que navegar con
   teclado era imposible: no se veía dónde estabas parado. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
:where(a,button,input,select,textarea):focus:not(:focus-visible){outline:none;}

/* Salto directo al contenido para quien navega con teclado o lector. */
.saltar-al-contenido{
  position:absolute;left:var(--e-2);top:-100px;z-index:var(--z-toast);
  background:var(--navy);color:#fff;font-size:var(--t-13);font-weight:600;
  padding:var(--e-2) var(--e-4);border-radius:var(--radius);
  transition:top var(--dur-rapida) var(--ease-salida);
}
.saltar-al-contenido:focus{top:var(--e-2);}

/* Respeta a quien pidió menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

.topbar{
  background:var(--white);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;flex-wrap:wrap;gap:12px;position:sticky;top:0;z-index:var(--z-cabecera);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{ /* isotipo (public/img/logo/marca.svg) */
  width:32px;height:32px;color:var(--navy);flex-shrink:0;display:block;
}
.brand-name{font-weight:700;color:var(--navy);font-size:15px;}
.brand-sub{font-size:11px;color:var(--grey);}
nav{display:flex;gap:2px;flex-wrap:wrap;}
.nav-link{
  background:transparent;border:1px solid transparent;color:var(--grey);
  font-family:inherit;font-size:13px;font-weight:600;
  padding:8px 12px;min-height:36px;border-radius:var(--radius);cursor:pointer;
  transition:background-color var(--dur-rapida) var(--ease-salida),
             color var(--dur-rapida) var(--ease-salida);
}
.nav-link:hover{background:var(--light);color:var(--navy);}
.nav-link.is-active{background:var(--navy);color:#fff;}

.view{display:none;}
.view.active{display:block;animation:aparecer var(--dur-lenta) var(--ease-salida);}
@keyframes aparecer{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

/* Las tarjetas se apoyan en el papel con una sombra teñida de tinta, no con
   un gris duro: el borde define, la sombra solo despega. */
.panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin-bottom:22px;box-shadow:var(--sombra-1);
}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}

/* Panel interno: las cuatro secciones como columnas de un tablero en vez de
   una página vertical larga. Cada columna se desplaza por su cuenta cuando
   su contenido no cabe, así el alto del tablero no lo dicta la más larga. */
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:20px;align-items:start;}
.panel-col{
  margin-bottom:0;max-height:calc(100vh - 230px);min-height:260px;
  display:flex;flex-direction:column;
  /* Vuelve al contenedor una "container query": lo de adentro (el grid-2 de
     la bitácora, del cobro/pago, etc.) reacciona al ancho real de LA
     COLUMNA, no al del viewport — que puede ser 1280px aunque la columna
     tenga 390px. Sin esto, esos formularios de dos campos se quedaban en
     dos columnas incluso en una columna angosta y forzaban scroll horizontal. */
  container-type:inline-size;container-name:panelcol;
}
.panel-col>.panel-head,.panel-col>h2{flex-shrink:0;}
/* overflow-x:hidden a propósito: cualquier cosa que igual se pase de ancho
   (una tabla, un select largo) debe resolverlo el elemento mismo — ver
   .cotizaciones-wrap — no la columna entera scrolleando de lado. */
.panel-col>.stack{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding-right:4px;margin-right:-4px;}
@container panelcol (max-width: 420px){
  .panel-col .grid-2{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .panel-grid{grid-template-columns:1fr;}
  .panel-col{max-height:none;}
  .panel-col>.stack{overflow-y:visible;}
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:16px;}
.field label,.field .etiqueta{display:block;font-size:12px;font-weight:600;color:var(--grey);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;font-size:14.5px;font-family:inherit;color:var(--dark);
  background:var(--white);border:1px solid var(--line);border-radius:4px;padding:10px 12px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);}
.field textarea{min-height:80px;resize:vertical;}

.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  font-size:12.5px;padding:7px 13px;border-radius:20px;border:1px solid var(--line);
  color:var(--grey);background:var(--white);cursor:pointer;
}
.chip.selected{background:var(--navy);border-color:var(--navy);color:#fff;}
.chip.chip-national.selected{background:var(--stamp);border-color:var(--stamp);}
.chip.disabled{opacity:.4;pointer-events:none;}
.add-chip-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.add-chip-row input{flex:1;min-width:160px;}

.upload-row{
  display:flex;justify-content:space-between;align-items:center;
  border:1px dashed var(--line);border-radius:4px;padding:8px 12px;margin-bottom:8px;
}
.upload-name-input{border:none;background:transparent;flex:1;font-size:13.5px;padding:0;}
.upload-name-input:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.tag{font-size:10.5px;color:var(--teal);background:rgba(46,125,107,.1);padding:3px 8px;border-radius:20px;flex-shrink:0;}

/* ---------- botones ----------
   Cada estado sube el contraste respecto al anterior (reposo → hover →
   active), y las transiciones listan sus propiedades: nunca `transition:all`,
   que anima cosas que no queremos y cuesta caro en repintado. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  font-family:inherit;font-weight:600;font-size:var(--t-14);line-height:1.2;
  padding:11px 20px;min-height:40px;
  border-radius:var(--radius);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-rapida) var(--ease-salida),
             border-color var(--dur-rapida) var(--ease-salida),
             color var(--dur-rapida) var(--ease-salida),
             transform var(--dur-rapida) var(--ease-salida);
}
.btn:active{transform:translateY(1px);}
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.55;cursor:not-allowed;transform:none;
}

.btn-primary{background:var(--stamp);color:#fff;border-color:var(--stamp);}
.btn-primary:hover:not(:disabled){background:var(--stamp-oscuro);border-color:var(--stamp-oscuro);}

.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-navy:hover:not(:disabled){background:#16294A;border-color:#16294A;}

/* El contorno parte discreto y se llena al pasar por encima: en una columna
   con muchos botones, el peso visual lo pone el que estás tocando. */
.btn-outline{background:var(--white);color:var(--navy);border-color:var(--line-fuerte);}
.btn-outline:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy);}

.btn-danger{background:var(--white);color:var(--stamp);border-color:var(--stamp);}
.btn-danger:hover:not(:disabled){background:var(--stamp);color:#fff;}

/* Los botones pequeños viven dentro de tarjetas densas; 32px sigue siendo
   un objetivo táctil aceptable porque están separados entre sí. */
.btn-sm{padding:6px 11px;font-size:12.5px;min-height:32px;}

/* El ícono acompaña al texto: nunca lo reemplaza salvo que haya aria-label. */
.btn .ico{width:15px;height:15px;flex-shrink:0;}
.btn-sm .ico{width:14px;height:14px;}

.form-msg{margin-top:14px;font-size:13.5px;padding:12px 14px;border-radius:4px;display:none;}
.form-msg.ok{display:block;background:rgba(46,125,107,.1);color:var(--teal);}
.form-msg.err{display:block;background:rgba(178,58,46,.1);color:var(--stamp);}

.stack{display:flex;flex-direction:column;gap:10px;}
.card-row{
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
  transition:border-color var(--dur-rapida) var(--ease-salida);
}
.card-row:hover{border-color:var(--line-fuerte);}
.card-row .info b{display:block;color:var(--navy);font-size:14.5px;margin-bottom:4px;}
.card-row .info span{font-size:12.5px;color:var(--grey);display:block;line-height:1.5;}
/* max-width:100% (y sin flex-shrink:0) para que esta fila realmente respete
   el ancho de la columna: con flex-shrink:0, el bloque tomaba su ancho
   "natural" sin importar el espacio disponible, y su propio flex-wrap nunca
   llegaba a activarse — los botones de más quedaban recortados por el
   overflow-x:hidden de la columna en vez de bajar a una segunda línea. */
.card-row .actions{display:flex;gap:8px;flex-wrap:wrap;max-width:100%;min-width:0;}
.badge{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap;}
.badge-pending{background:rgba(31,58,95,.1);color:var(--navy);}
.badge-ok{background:rgba(46,125,107,.12);color:var(--teal-tinta);}
.badge-rejected{background:rgba(178,58,46,.1);color:var(--stamp);}
.badge-closed{background:rgba(91,101,112,.12);color:var(--grey);}
.badge-247{background:rgba(178,58,46,.1);color:var(--stamp);}
.badge-rating{background:var(--oro-suave);color:var(--oro-tinta);}
.empty{color:var(--grey);font-size:13px;font-style:italic;}

.form-seccion-titulo{font-size:15px;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:8px;margin:8px 0 16px;}
.form-seccion-titulo:first-child{margin-top:0;}
.form-seccion-titulo .opcional{font-weight:400;font-size:12px;color:var(--grey);}
.form-seccion-nota{font-size:12.5px;color:var(--grey);margin-bottom:14px;max-width:60ch;}
.nota{font-size:11.5px;color:var(--grey);margin-top:6px;}
.zona-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.zona-picker select{flex:1;min-width:170px;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--white);color:var(--dark);}
.stack-refs{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.stack-refs input{width:100%;font-size:14px;font-family:inherit;color:var(--dark);background:var(--white);border:1px solid var(--line);border-radius:4px;padding:10px 12px;}
.stack-refs input:focus{border-color:var(--teal);}
.checkline{background:var(--light);border-radius:4px;padding:12px 14px;}
.check-label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;}
.check-label input{width:16px;height:16px;accent-color:var(--teal);}
.file-list{margin-top:8px;}
.file-list .upload-row span:first-child{font-size:13px;color:var(--dark);}

.solicitud-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:100%;min-width:0;}
/* Un <select> se dimensiona según su opción más larga y, siendo hijo flex,
   no baja de ahí: en una columna angosta del panel eso empujaba la fila
   completa fuera de la tarjeta. min-width:0 le permite encogerse y la
   elipsis se encarga del nombre largo. */
.solicitud-select{
  font-size:12.5px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--dark);background:var(--white);font-family:inherit;
  min-width:0;max-width:100%;flex-shrink:1;text-overflow:ellipsis;
}
.candidato-hint{flex-basis:100%;font-size:12px;color:var(--teal);background:rgba(46,125,107,.08);padding:6px 10px;border-radius:4px;}

.estado-explicacion{margin-top:6px;color:var(--teal)!important;font-style:italic;}

.card-inactiva{background:rgba(91,101,112,.04);border-style:dashed;}
.card-inactiva .info b,.card-inactiva .info span{opacity:.65;}

.editor-solicitud{flex-basis:100%;background:var(--light);border-radius:4px;padding:14px;margin-bottom:10px;}
.editor-solicitud label{display:block;font-size:11px;font-weight:600;color:var(--grey);margin:0 0 5px;}
.editor-solicitud .solicitud-select{width:100%;margin-bottom:12px;}
.editor-solicitud input{width:100%;font-family:inherit;font-size:13.5px;color:var(--dark);background:var(--white);border:1px solid var(--line);border-radius:4px;padding:9px 11px;margin-bottom:12px;}
.editor-solicitud input:focus{border-color:var(--teal);}
.editor-solicitud textarea{width:100%;min-height:64px;font-family:inherit;font-size:13.5px;color:var(--dark);background:var(--white);border:1px solid var(--line);border-radius:4px;padding:9px 11px;resize:vertical;}
.editor-solicitud textarea:focus{border-color:var(--teal);}
.editor-botones{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;max-width:100%;}

.bloque-detalle{flex-basis:100%;margin:10px 0;background:var(--light);border-radius:4px;padding:14px;}
.bloque-detalle .grid-2{margin-top:8px;}
.bloque-resumen{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--dark);margin:2px 0 4px;}

.galeria-fotos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.foto-item{position:relative;width:76px;}
.foto-item img{width:76px;height:76px;object-fit:cover;border-radius:4px;border:1px solid var(--line);display:block;background:var(--white);}
.foto-item .foto-notas{display:block;font-size:9.5px;color:var(--grey);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.foto-eliminar{
  position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:var(--stamp);color:#fff;border:1.5px solid var(--white);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:var(--sombra-1);
  transition:background-color var(--dur-rapida) var(--ease-salida),transform var(--dur-rapida) var(--ease-salida);
}
.foto-eliminar:hover{background:var(--stamp-oscuro);transform:scale(1.08);}
.foto-input{display:block;width:100%;font-size:12.5px;color:var(--dark);margin-bottom:8px;}

.bitacora-entry{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:9px 11px;margin-bottom:8px;font-size:12.5px;}
.bitacora-entry b{margin-left:6px;color:var(--navy);}
.bitacora-fecha{float:right;color:var(--grey);font-size:11px;}
.bitacora-notas{margin:5px 0 0;color:var(--grey);font-style:italic;clear:both;}
.bitacora-notas-input{width:100%;min-height:50px;font-family:inherit;font-size:13px;color:var(--dark);background:var(--white);border:1px solid var(--line);border-radius:4px;padding:8px 10px;margin:10px 0;resize:vertical;}
.bitacora-notas-input:focus{border-color:var(--teal);}

.evaluacion-wrap{flex-basis:100%;margin:10px 0;background:var(--light);border-radius:4px;padding:14px;}
.estrellas-fijas{font-size:20px;color:var(--oro);letter-spacing:2px;}
.evaluacion-comentario{font-size:13px;color:var(--dark);font-style:italic;margin:6px 0 0;}
.estrellas-picker{display:flex;gap:4px;margin:8px 0;}
.estrella-btn{
  background:none;border:none;font-size:26px;line-height:1;color:var(--apagado);
  cursor:pointer;padding:0 2px;min-width:32px;min-height:32px;
  transition:color var(--dur-rapida) var(--ease-salida),transform var(--dur-rapida) var(--ease-salida);
}
.estrella-btn:hover{transform:scale(1.12);}
.estrella-btn.activa{color:var(--oro);}
.evaluacion-comentario-input{width:100%;min-height:56px;font-family:inherit;font-size:13.5px;color:var(--dark);background:var(--white);border:1px solid var(--line);border-radius:4px;padding:9px 11px;resize:vertical;margin-bottom:8px;}
.evaluacion-comentario-input:focus{border-color:var(--teal);}

/* La tabla de cotizaciones puede tener 5-6 columnas de datos reales: en una
   columna angosta del panel, que sea ella la que scrollee de lado (con un
   borde que lo deje claro), no la tarjeta ni la columna completa. */
.cotizaciones-wrap{
  flex-basis:100%;margin:10px 0;overflow-x:auto;
  min-width:0;max-width:100%;   /* sin esto el flex item crece con la tabla */
}
.cotiz-title{font-size:12px;font-weight:600;color:var(--navy);margin-bottom:6px;}
.cotiz-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.cotiz-table th{text-align:left;color:var(--grey);font-weight:600;font-size:11px;padding:6px 8px;border-bottom:1px solid var(--line);}
.cotiz-table td{padding:7px 8px;border-bottom:1px solid var(--line);}
.cotiz-table tr.elegido{background:rgba(46,125,107,.08);}
.cotiz-table tr.elegido td{color:var(--teal);font-weight:600;}

.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;font-size:13.5px;padding:12px 20px;border-radius:4px;
  opacity:0;pointer-events:none;z-index:var(--z-toast);box-shadow:var(--sombra-3);
  transition:opacity var(--dur-base) var(--ease-salida), transform var(--dur-base) var(--ease-salida);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:640px){
  .grid-2{grid-template-columns:1fr;}
  .topbar{flex-direction:column;align-items:flex-start;}
}

/* ---------- Tablero (vista de indicadores) ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px;}
.kpi-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;cursor:pointer;text-align:left;font-family:inherit;color:var(--dark);
  display:block;width:100%;
}
.kpi-card:hover{border-color:var(--navy);}
.kpi-label{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.kpi-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.kpi-valor{display:block;font-size:30px;font-weight:700;color:var(--navy);margin:6px 0 2px;}
.kpi-sub{display:block;font-size:12px;color:var(--grey);min-height:18px;}
.kpi-link{display:block;font-size:12px;color:var(--teal);font-weight:600;margin-top:10px;}

.tablero-nota{font-size:12px;color:var(--grey);margin:2px 0 14px;}
.tablero-cols{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
@media (max-width:900px){.tablero-cols{grid-template-columns:1fr;}}

.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:640px){.funnel{grid-template-columns:repeat(2,1fr);}}
.funnel-num{font-size:24px;font-weight:700;color:var(--navy);}
.funnel-label{font-size:12px;color:var(--grey);line-height:1.3;}
.funnel-barra{height:4px;background:var(--light);border-radius:2px;margin-top:8px;overflow:hidden;}
.funnel-barra>i{display:block;height:100%;background:var(--navy);}

.monto-linea{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13px;color:var(--grey);padding:9px 0;border-bottom:1px solid var(--line);
}
.monto-linea b{color:var(--dark);white-space:nowrap;}
.monto-linea.monto-total{border-bottom:none;padding-top:12px;}
.monto-total b{color:var(--teal);font-size:15px;}

.prioridad-row{
  display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;
  transition:border-color var(--dur-rapida) var(--ease-salida),
             background-color var(--dur-rapida) var(--ease-salida);
}
.prioridad-row:hover{border-color:var(--line-fuerte);background:var(--paper);}
/* El nivel se marca con un punto, no con una franja de color en el borde:
   la franja lateral compite con el borde de la tarjeta y ensucia la lista. */
.prioridad-row::before{
  content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--apagado);
}
.prioridad-alta::before{background:var(--stamp);}
.prioridad-media::before{background:var(--oro);}
.prioridad-baja::before{background:var(--teal);}
.prioridad-info{flex:1;min-width:200px;}
.prioridad-info b{display:block;color:var(--navy);font-size:13.5px;}
.prioridad-info span{display:block;font-size:12px;color:var(--grey);}

/* Destino de la navegación cruzada Tablero → Panel: resalta la columna o la
   card a la que se llegó y se apaga solo. */
@keyframes destacar{
  0%{outline-color:var(--teal);background-color:rgba(46,125,107,.08);}
  70%{outline-color:var(--teal);}
  100%{outline-color:transparent;background-color:transparent;}
}
.destino-resaltado{outline:2px solid transparent;outline-offset:2px;animation:destacar 2.2s ease;}

/* ---------- Gestión de usuarios ---------- */
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-navy:hover{background:#16294A;border-color:#16294A;}
.btn-navy:disabled{opacity:.6;cursor:default;}

.kpi-card.kpi-usuario{display:flex;align-items:center;gap:14px;cursor:default;}
.kpi-card.kpi-usuario:hover{border-color:var(--line);}
.kpi-icono{flex-shrink:0;width:40px;height:40px;color:var(--navy);}
.kpi-icono svg{width:100%;height:100%;}
.kpi-texto{min-width:0;}
.kpi-texto .kpi-valor{font-size:26px;margin:2px 0;}
.kpi-texto .kpi-sub{display:flex;align-items:center;gap:6px;}

.filtros-usuarios{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 16px;}
.filtros-usuarios input[type="search"]{
  flex:1;min-width:200px;font-size:13.5px;font-family:inherit;color:var(--dark);
  background:var(--white);border:1px solid var(--line);border-radius:4px;padding:9px 12px;
}
.filtros-usuarios select{
  font-size:13px;font-family:inherit;color:var(--dark);
  background:var(--white);border:1px solid var(--line);border-radius:4px;padding:9px 10px;
}
.filtros-usuarios input:focus,.filtros-usuarios select:focus{border-color:var(--teal);}

.usuarios-tabla-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}

.usuarios-tabla-grid{display:flex;flex-direction:column;}
.usuarios-fila{
  display:grid;grid-template-columns:minmax(200px,2fr) 1.1fr 1.3fr .8fr 1fr auto;
  gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid #EFF2F0;
  font-size:13px;color:var(--dark);
}
.usuarios-fila:last-child{border-bottom:none;}
.usuarios-encabezado{
  color:var(--grey);font-size:12px;font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:8px;
}
.usuario-celda-nombre{display:flex;align-items:center;gap:10px;min-width:0;}
.usuario-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
}
.usuario-nombre-mail{min-width:0;}
.usuario-nombre-mail b{display:block;color:var(--dark);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.usuario-nombre-mail span{display:block;color:var(--grey);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.celda-suave{color:var(--grey);}
.usuario-acciones{display:flex;gap:6px;flex-wrap:wrap;max-width:100%;}
.usuario-acciones-extra{
  grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;
  background:var(--light);border-radius:4px;padding:8px 10px;
}

.usuarios-paginacion{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
}
.paginacion-info{font-size:12px;color:var(--grey);}
.paginacion-botones{display:flex;gap:6px;flex-wrap:wrap;}

.skel{display:inline-block;background:#E8EBE9;border-radius:4px;height:12px;vertical-align:middle;}
.skel-circulo{width:32px;height:32px;border-radius:50%;margin-right:10px;}
.skel-linea{height:12px;}
.usuarios-skeleton{opacity:.7;}

.link-invitacion{
  font-size:12.5px;color:var(--navy);background:var(--light);border:1px dashed var(--line);
  border-radius:4px;padding:10px 12px;margin-bottom:14px;word-break:break-all;
}

@media (max-width:760px){
  .usuarios-encabezado{display:none;}
  .usuarios-fila{
    grid-template-columns:1fr;gap:6px;align-items:start;
    border:1px solid var(--line);border-radius:4px;padding:12px;margin-bottom:10px;
  }
  .usuarios-fila:last-child{border-bottom:1px solid var(--line);}
  .usuarios-fila>div[data-col]::before{
    content:attr(data-col) ": ";color:var(--grey);font-size:11.5px;font-weight:600;
  }
}

/* ---------- Plan y suscripción ---------- */
.plan-destacado{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--e-5) var(--e-6);margin-bottom:var(--e-6);
  box-shadow:var(--sombra-1);
}
.plan-precio{font-size:26px;font-weight:700;color:var(--navy);line-height:1.2;}
.plan-precio span{font-size:13px;font-weight:600;color:var(--grey);}
.plan-detalle{font-size:13.5px;color:var(--dark);margin-top:6px;}
.plan-nota{font-size:12.5px;color:var(--grey);margin-top:8px;}

.suscripcion-wrap{
  flex-basis:100%;margin:10px 0;background:var(--light);border-radius:4px;padding:14px;
}
.suscripcion-resumen{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--dark);margin:2px 0 10px;}
.suscripcion-nota{font-size:12px;color:var(--grey);}
.suscripcion-deuda{color:var(--stamp);font-size:12.5px;}

/* ---------- íconos ----------
   Trazo fino que hereda el color del contenedor. Siempre decorativos: el
   texto del botón es el que nombra la acción. */
.ico{
  width:16px;height:16px;flex-shrink:0;
  display:inline-block;vertical-align:-3px;
}
.foto-eliminar .ico{width:12px;height:12px;vertical-align:0;stroke-width:2;}
.paginacion-botones .ico{width:14px;height:14px;vertical-align:-2px;}
.usuario-acciones .ico{width:14px;height:14px;}

/* ---------- el sello ----------
   Momento distintivo del producto. "Proveedor Verificado" no es una etiqueta
   de estado más: significa que una persona del equipo llamó a dos clientes
   reales y los confirmó, y el backend no deja ponerlo sin esa bitácora. Se
   dibuja como un timbre: doble filete, tinta verde y versalitas espaciadas
   — el gesto del documento sellado, no una píldora de dashboard. */
.sello{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal-tinta);background:rgba(46,125,107,.07);
  padding:3px 9px;border-radius:var(--radius-sm);
  border:1px solid rgba(46,125,107,.45);
  box-shadow:inset 0 0 0 1px var(--white);   /* el doble filete del timbre */
  white-space:nowrap;vertical-align:1px;
}
.sello .ico{width:12px;height:12px;stroke-width:1.7;}

.sello-grande{
  font-size:12px;padding:7px 14px;gap:8px;letter-spacing:.1em;
  border-width:1.5px;
}
.sello-grande .ico{width:17px;height:17px;}

.aviso-sello{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--e-4) var(--e-5);margin-bottom:var(--e-5);box-shadow:var(--sombra-1);
}
.aviso-sello p{margin-top:var(--e-2);font-size:13.5px;color:var(--grey);max-width:62ch;}

/* La landing habla de precio antes que de funcionalidades: el número es el
   ancla de la decisión, así que se compone como cifra editorial. */
.plan-precio{
  font-family:var(--fuente-titulo);
  font-size:var(--t-33);font-weight:600;color:var(--navy);
  line-height:1.1;letter-spacing:-.02em;
}
.plan-precio span{
  font-family:var(--fuente-ui);
  font-size:var(--t-13);font-weight:600;color:var(--grey);letter-spacing:0;
}
.plan-detalle{font-size:14px;color:var(--dark);margin-top:var(--e-2);max-width:62ch;text-wrap:pretty;}
.plan-nota{font-size:12.5px;color:var(--grey);margin-top:var(--e-2);}

/* =========================================================================
   WEB PÚBLICA (index.html) — Conecta Gestión
   -------------------------------------------------------------------------
   Rediseño aprobado en la Fase A (revisión 2): diez capítulos, un solo navy,
   papel cálido, un acento reservado a la acción, tipografía autoalojada
   (Source Serif 4 para identidad, Inter para UI y cuerpo — por jerarquía y
   legibilidad) y el producto real como evidencia. Cero peticiones externas:
   las fuentes viven en /fonts con su licencia OFL al lado.

   La numeración de capítulos usa contadores CSS a propósito: si la compuerta
   de publicación omite el capítulo de contrato y firma (inicio.js,
   MOSTRAR_CONTRATO_FIRMA), el resto se renumera solo y no queda un hueco.

   Nada de overflow-x:hidden: si algo desborda, se ve y se corrige.
   ========================================================================= */

@font-face{
  font-family:"Source Serif 4";
  src:url("/fonts/source-serif-4-var-latin.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}


.cg{background:var(--cg-papel);color:var(--cg-tinta);font-family:var(--cg-sans);font-size:16px;line-height:1.55;}
/* Con la cabecera fija, los saltos internos aterrizan bajo ella, no detrás.
   --alto-cabecera la escribe el JS con la altura real medida; el fallback
   cubre la carga sin JavaScript. La navegación temática usa el velo +
   salto instantáneo — NO scroll suave: ver "velo de cambio de tema". */
/* Offset único de anclas: altura real de la cabecera (medida y publicada
   por JS) + un respiro consistente. La MISMA fórmula rige el scroll nativo
   (scroll-margin), el salto por JS (saltarA) y la carga con hash. */
.cg [id]{scroll-margin-top:calc(var(--alto-cabecera,72px) + var(--espacio-ancla,24px));}

/* ---------- velo de cambio de tema ---------- */
/* Fijo, cubre solo el contenido bajo la cabecera (top real medido por JS),
   papel de marca, sobre las secciones y bajo el menú desplegable (z 30 <
   z 40 de la cabecera). Bloquea clics únicamente mientras está visible. */
.cg-velo-tema{
  position:fixed;top:72px;right:0;bottom:0;left:0;z-index:30;
  background:var(--cg-papel);opacity:0;pointer-events:none;
  transition:opacity 140ms var(--ease-interface);
}
html.va-cambiando-tema .cg-velo-tema{opacity:1;pointer-events:auto;}
/* Entrada de la sección de destino como vista nueva: sustituye a las
   animaciones históricas durante la navegación temática. */
.es-vista-nueva [data-reveal]{animation:cg-entrada-tema 320ms var(--ease-interface) both;}
@keyframes cg-entrada-tema{
  from{opacity:0;transform:translate3d(0,12px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}
/* Destino ya visible: énfasis breve del título, sin velo ni movimiento.
   Solo el cuadro intermedio cambia — desde/hacia el color natural. */
.es-enfasis{animation:cg-tema-enfasis var(--motion-emphasis) var(--ease-interface);}
@keyframes cg-tema-enfasis{40%{color:var(--cg-acento);}}
/* Foco tras la navegación: visible con teclado, sin contorno con mouse. */
[tabindex="-1"]:focus:not(:focus-visible){outline:none;}
.cg-h2:focus-visible,.cg h1:focus-visible{outline:2px solid var(--cg-acento);outline-offset:6px;}
/* Entrada de página completa (landing y páginas hermanas .cg): cubre la
   llegada desde un enlace real y la carga directa con hash. */
@media (prefers-reduced-motion:no-preference){
  .cg main{animation:cg-pagina-entra 320ms var(--ease-interface);}
}
@keyframes cg-pagina-entra{from{opacity:0;}to{opacity:1;}}
.cg img,.cg svg{max-width:100%;height:auto;}
.cg a{text-decoration:none;}

.cg-ancho{max-width:1120px;margin:0 auto;padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px);}
.cg-angosto{max-width:720px;}

/* ---------- capítulos: rótulo, numeración y marca de agua ---------- */
/* Escala tipográfica del sitio (rigurosa, en clamp):
   H1 36→72px serif 600 -.02em lh1.04 · H2 30→48px serif 600 -.015em lh1.1
   H3 21→26px · lede 17→20px lh1.6 · body 16px lh1.65 · rótulo 11px mono.
   El aire manda: cada capítulo respira 72→136px arriba y abajo. */
.cg-cap{position:relative;padding-top:clamp(72px,9vw,136px);padding-bottom:clamp(72px,9vw,136px);}
/* Capítulos intermedios: menos aire vertical para que el recorrido sea una
   historia continua y no una serie de diapositivas. Los pares de un mismo
   argumento (proceso+respaldo, verificación+cotización) van aún más juntos
   y separados solo por una línea fina. */
.cg-cap-medio{min-height:auto;padding-top:var(--cap-espacio);padding-bottom:var(--cap-espacio);}
.cg-cap-junto{min-height:auto;padding-top:var(--cap-espacio-junto);padding-bottom:var(--cap-espacio-junto);}
.cg-cap-junto + .cg-cap-junto{border-top:1px solid rgba(12,35,64,.09);}
/* ---------- hojas de tema ---------- */
/* Cada tema de la navegación es una HOJA: ocupa al menos la pantalla
   disponible bajo la cabecera y CRECE libre cuando su contenido es más
   alto (min-height, nunca height fija — una altura rígida cortaría las
   secciones largas). Cuando sobra alto, el contenido se centra y la
   sección se siente como una lámina; cuando falta, sigue con scroll
   natural. El cierre (#contacto) queda fuera: comparte pantalla con el
   pie de página. */
.cg-lamina{
  min-height:calc(100vh - var(--alto-cabecera,72px));
  min-height:calc(100svh - var(--alto-cabecera,72px));
  display:flex;flex-direction:column;justify-content:center;
}
/* En flex, el margin auto del contenedor anula el estirado y lo deja a
   ancho de CONTENIDO (la pista del carrusel lo inflaba hasta su max-width
   y desbordaba el documento): ancho explícito, siempre. */
.cg-lamina > .cg-ancho,.cg-hero-navy > .cg-ancho{width:100%;}
/* Pantallas anchas de poca altura (notebooks 1366×768 y similares): la
   MISMA composición con alturas internas ~20-25% menores — espacios,
   brechas, tarjetas y la altura de línea de los títulos de impacto
   (atada a vh SOLO aquí). Sin transform:scale y sin reducir la página. */
@media (min-width:1024px) and (max-height:820px){
  .cg{
    --cap-espacio:clamp(40px,6vh,60px);
    --cap-espacio-junto:clamp(34px,5vh,50px);
    --cap-brecha-titulo:clamp(10px,1.6vh,16px);
    --cap-brecha-contenido:clamp(18px,3vh,30px);
  }
  .cg-cap{padding-top:clamp(40px,6.5vh,64px);padding-bottom:clamp(40px,6.5vh,64px);}
  .cg-tit-fuerte{font-size:clamp(40px,10.4vh,84px);}
  .cg-tit-cursiva{font-size:clamp(26px,6.6vh,54px);}
  .cg-tit-largo .cg-tit-fuerte{font-size:clamp(34px,8.4vh,66px);}
  .cg-tit-largo .cg-tit-cursiva{font-size:clamp(24px,5.4vh,44px);}
  .cg-bento{gap:11px;}
  .cg-bento-celda{padding:clamp(14px,2.2vh,22px) clamp(16px,2vw,24px);}
  .cg-tarifas{margin-top:18px;gap:16px;}
  .cg-faq{margin-top:20px;}
  .cg-caso-hito{padding:12px 0;}
  /* la portada tiene su propio bloque de compresión (max-height:940px) */
}
/* (el bloque de portada en pantallas bajas vive tras las reglas del héroe) */
@media (max-width:700px){
  .cg-cap-medio,.cg-cap-junto{padding-top:var(--cap-espacio-movil);padding-bottom:var(--cap-espacio-movil);}
}
.cg-cap-medio .cg-h2,.cg-cap-junto .cg-h2{margin-bottom:var(--cap-brecha-titulo);}

.cg h1,.cg h2,.cg h3{margin:0;}
.cg-h2{
  font-family:var(--cg-serif);font-weight:600;font-size:clamp(30px,4vw,48px);
  letter-spacing:-.015em;line-height:1.1;color:var(--cg-navy);text-wrap:balance;margin-bottom:16px;
}
.cg-bajada{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.65;color:var(--cg-tinta-suave);max-width:56ch;margin:0;text-wrap:pretty;}
.cg-en-navy .cg-h2{color:#fff;}
.cg-en-navy .cg-bajada{color:rgba(255,255,255,.78);}

/* ---------- botones ---------- */
.cg-btn{
  display:inline-block;background:var(--cg-acento);color:#fff;font-size:.95rem;font-weight:500;
  padding:14px 28px;border-radius:980px;text-align:center;border:0;cursor:pointer;
  transition:background .25s var(--cg-ease),transform .25s var(--cg-ease),box-shadow .25s var(--cg-ease);
}
.cg-btn:hover{background:var(--cg-acento-hover);transform:translateY(-1px);box-shadow:0 8px 24px rgba(201,60,23,.25);}
.cg-btn:active{transform:none;box-shadow:none;}
.cg-btn:focus-visible{outline:2px solid var(--cg-navy);outline-offset:3px;}
.cg-btn-texto{color:var(--cg-navy);font-size:.95rem;transition:color .2s var(--cg-ease);}
.cg-btn-texto::after{content:" ›";display:inline-block;transition:transform .25s var(--cg-ease);}
.cg-btn-texto:hover::after{transform:translateX(3px);}
.cg-botones{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
@media (max-width:480px){
  .cg-botones{flex-direction:column;align-items:stretch;}
  .cg-btn-texto{text-align:center;padding:8px 0;}
}

/* ---------- cap. 01 · navegación ---------- */
.cg-nav{
  border-bottom:1px solid var(--cg-linea);background:var(--cg-papel);
  position:sticky;top:0;z-index:40;
  transition:box-shadow .3s var(--cg-ease);
}
.cg-nav.va-flotando{box-shadow:0 12px 32px rgba(4,12,22,.28);}
.cg-nav-fila{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;padding-bottom:16px;}
.cg-logo{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--cg-serif);font-weight:600;font-size:1.15rem;color:var(--cg-navy);letter-spacing:-.01em;white-space:nowrap;
}
/* Isotipo: hereda el color del logotipo (navy en papel, blanco en navy);
   el arco terracota es el único color fijo. El `.cg` delante gana al
   `.cg svg{height:auto}` general. */
.cg .cg-logo .cg-marca{width:1.5em;height:1.5em;flex-shrink:0;display:block;}
.cg-nav-links{display:flex;gap:26px;font-size:.86rem;}
.cg-nav-links > a,.cg-nav-boton{
  color:var(--cg-tinta-suave);padding:4px 0;
  background:linear-gradient(currentColor,currentColor) no-repeat left 100% / 0 1px;
  transition:color .18s var(--cg-ease),background-size .18s var(--cg-ease);
}
.cg-nav-links > a:hover,.cg-nav-boton:hover,
.cg-nav-boton[aria-expanded="true"]{color:var(--cg-navy);background-size:100% 1px;}

/* ---------- mega menú ---------- */
.cg-nav-item{display:inline-flex;}
.cg-nav-boton{
  border:0;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.cg-nav-boton svg{flex-shrink:0;transition:transform var(--motion-fast) var(--ease-interface);}
.cg-nav-boton[aria-expanded="true"] svg{transform:rotate(180deg);}
.cg-nav-boton:focus-visible{outline:2px solid var(--cg-acento);outline-offset:3px;}
/* Dropdowns compactos anclados al encabezado (patrón de interacción de la
   referencia, adaptado a la marca): capas flotantes navy, locales y
   ligeras — la portada permanece visible detrás. En escritorio con
   puntero fino abren por HOVER (lo gobierna inicio.js); jamás cubren la
   ventana, no bloquean el scroll ni cambian el alto del documento.
   visibility saca sus enlaces del orden de tabulación al estar cerrados. */
.cg-nav-panel-grid{display:grid;grid-template-columns:1fr;gap:2px 14px;}
.cg-nav-panel-grid a{
  position:relative;display:block;border-radius:8px;border-left:2px solid transparent;
  transition:background-color 170ms var(--ease-interface),
             transform 170ms var(--ease-interface),
             border-color 170ms var(--ease-interface);
}
.cg-nav-panel-grid a b{
  display:block;font-family:var(--cg-serif);font-weight:600;font-size:.95rem;
  color:var(--cg-navy);margin-bottom:2px;transition:color 170ms var(--ease-interface);
}
.cg-nav-panel-grid a span{display:block;font-size:.78rem;line-height:1.45;color:var(--cg-tinta-suave);}
.cg-nav-panel-grid a:focus-visible{outline:2px solid var(--cg-acento);outline-offset:-2px;}
@media (min-width:901px){
  .cg-nav-panel{
    position:absolute;top:100%;left:0;
    width:max-content;min-width:230px;max-width:min(340px,calc(100vw - 32px));
    z-index:2; /* dentro del contexto de la cabecera (z 40) */
    /* navy translúcido aprobado: la portada se percibe detrás, suavizada */
    background:rgba(12,35,64,.7);
    -webkit-backdrop-filter:blur(8px) saturate(110%);
    backdrop-filter:blur(8px) saturate(110%);
    border:1px solid rgba(255,255,255,.08);
    border-top:2px solid var(--cg-acento);   /* línea roja fina en TODO el borde superior */
    border-radius:0 0 12px 12px;
    box-shadow:0 18px 45px rgba(2,13,28,.18);
    padding:14px clamp(18px,1.6vw,26px);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
    transition:opacity 180ms ease-out,
               transform 180ms cubic-bezier(.22,1,.36,1),
               visibility 0s linear 180ms;
  }
  .cg-nav-panel.es-abierto{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
    transition:opacity 180ms ease-out,
               transform 180ms cubic-bezier(.22,1,.36,1),
               visibility 0s;
  }
  /* "Cómo funciona": composición horizontal 4+3 con la segunda fila
     centrada (rejilla de 8, cada tema ocupa 2 — sin duplicar enlaces) */
  #panel-producto{
    width:min(920px,calc(100vw - 32px));max-width:none;
    padding:16px 28px 18px;
  }
  #panel-producto .cg-nav-panel-grid{
    /* pistas auto centradas: cada tema mide lo suyo y el recorte de texto
       es imposible por construcción; los spans arman el 4+3 escalonado */
    grid-template-columns:repeat(8,auto);justify-content:center;
    column-gap:clamp(12px,1.5vw,28px);row-gap:10px;align-items:center;
  }
  #panel-producto .cg-nav-panel-grid a{white-space:nowrap;}
  #panel-producto .cg-nav-panel-grid a:nth-child(-n+4){grid-column:span 2;}
  #panel-producto .cg-nav-panel-grid a:nth-child(5){grid-column:2 / span 2;}
  #panel-producto .cg-nav-panel-grid a:nth-child(6){grid-column:4 / span 2;}
  #panel-producto .cg-nav-panel-grid a:nth-child(7){grid-column:6 / span 2;}
  .cg-nav-panel-grid a{display:flex;align-items:center;min-height:40px;padding:4px 10px;}
  /* tipografía de interfaz: Inter, un solo renglón por tema */
  .cg-nav-panel-grid a b{
    position:relative;display:inline-block;
    font-family:var(--cg-sans);font-weight:600;
    font-size:clamp(14px,.9vw,16px);line-height:1.25;
    color:rgba(255,255,255,.94);margin-bottom:0;
    transition:color 180ms ease-out,transform 180ms ease-out;
  }
  /* subrayado rojo que se dibuja bajo el TEXTO del tema */
  .cg-nav-panel-grid a b::after{
    content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
    background:var(--cg-acento);transform:scaleX(0);transform-origin:left;
    transition:transform 180ms ease-out;
  }
  /* los textos de apoyo pertenecen a cada sección: en el dropdown quedan
     solo para lectores de pantalla */
  .cg-nav-panel-grid a span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .cg-nav-panel-grid a:hover b,.cg-nav-panel-grid a:focus-visible b{
    color:#fff;transform:translateY(-1px);
  }
  .cg-nav-panel-grid a:hover b::after,.cg-nav-panel-grid a:focus-visible b::after{
    transform:scaleX(1);
  }
  /* disparador activo: subrayado rojo firme */
  .cg-nav-boton[aria-expanded="true"]{
    background-image:linear-gradient(var(--cg-acento),var(--cg-acento));
    background-size:100% 2px;
  }
}
.cg-menu-btn{display:none;background:none;border:1px solid var(--cg-linea);border-radius:8px;padding:11px 12px;cursor:pointer;}
.cg-menu-btn span{display:block;width:18px;height:2px;background:var(--cg-navy);transition:transform .3s var(--cg-ease);}
.cg-menu-btn span + span{margin-top:4px;}
@media (max-width:900px){
  .cg-nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:40;
    background:var(--cg-papel);border-bottom:1px solid var(--cg-linea);
    flex-direction:column;gap:0;padding:6px clamp(16px,4vw,48px) 14px;
    /* scroll propio: en pantallas bajas el menú completo no cabe y sin esto
       las últimas entradas quedaban inalcanzables */
    max-height:calc(100vh - var(--alto-cabecera,72px));
    max-height:calc(100dvh - var(--alto-cabecera,72px));
    overflow-y:auto;overscroll-behavior:contain;
  }
  .cg-nav-links > a{padding:13px 0;font-size:1rem;border-bottom:1px solid var(--cg-linea);}
  .cg-nav-links > :last-child{border-bottom:0;}
  .cg[data-menu="abierto"] .cg-nav-links{display:flex;}
  .cg-menu-btn{display:block;}
  /* mega menú → acordeón dentro del menú móvil */
  .cg-nav-item{display:block;border-bottom:1px solid var(--cg-linea);}
  .cg-nav-boton{width:100%;justify-content:space-between;padding:13px 0;font-size:1rem;}
  .cg-nav-panel{position:static;border:0;box-shadow:none;background:none;transform:none;transition:none;visibility:visible;}
  /* acordeón dentro del menú móvil: cerrado no ocupa alto */
  .cg-nav-panel:not(.es-abierto){display:none;}
  .cg-nav-panel.es-abierto{opacity:1;pointer-events:auto;}
  .cg-nav-panel-grid{grid-template-columns:1fr;max-width:none;padding:0 0 10px;gap:0;}
  .cg-nav-panel-grid a{padding:9px 10px;}
  .cg-nav-oscura .cg-nav-panel-grid a b{color:#fff;}
  .cg-nav-oscura .cg-nav-panel-grid a span{color:rgba(255,255,255,.55);}
  .cg-nav-oscura .cg-nav-panel-grid a:hover,
  .cg-nav-oscura .cg-nav-panel-grid a:focus-visible{background-color:rgba(255,255,255,.06);}
}

/* ---------- cabecera oscura: se funde con el héroe navy ---------- */
.cg-nav-oscura{background:var(--cg-navy-hondo);border-bottom:1px solid rgba(255,255,255,.08);}
.cg-nav-oscura .cg-logo{color:#fff;}

/* ============================================================= *
 * Intro del logo del ENCABEZADO — "Conexion completada":        *
 * trazado del aro -> arco terracota -> C y punto -> aparicion    *
 * del wordmark. Solo cuando <html> lleva .cg-anim-logo (script   *
 * en <head>, 1a visita de la sesion). Sin la clase o sin JS, el  *
 * logo se ve COMPLETO y ESTATICO. Solo el header se anima (el    *
 * pie y los portales usan <use>, no llevan estas clases).        *
 * Todo con transform/opacity/trazado: no afecta layout ni LCP.   *
 * ============================================================= */
/* El pulso no se ve salvo durante la animacion. */
.cg-logo-animado .logo-dot-pulse{opacity:0;}

html.cg-anim-logo .cg-logo-animado{--cg-t:1;}
@media (max-width:768px){ html.cg-anim-logo .cg-logo-animado{--cg-t:.72;} }

html.cg-anim-logo .cg-logo-animado .logo-ring-slate{
  stroke-dasharray:1;stroke-dashoffset:1;will-change:stroke-dashoffset;
  animation:cg-draw calc(420ms*var(--cg-t)) cubic-bezier(.22,1,.36,1) 0ms both;
}
html.cg-anim-logo .cg-logo-animado .logo-arc-red{
  stroke-dasharray:1;stroke-dashoffset:1;will-change:stroke-dashoffset;
  animation:cg-draw calc(220ms*var(--cg-t)) cubic-bezier(.22,1,.36,1) calc(160ms*var(--cg-t)) both;
}
html.cg-anim-logo .cg-logo-animado .logo-letter-c{
  opacity:0;transform:scale(.96);transform-box:fill-box;transform-origin:center;will-change:transform,opacity;
  animation:cg-activar calc(280ms*var(--cg-t)) cubic-bezier(.22,1,.36,1) calc(300ms*var(--cg-t)) both;
}
html.cg-anim-logo .cg-logo-animado .logo-dot{
  opacity:0;transform:scale(.55);transform-box:fill-box;transform-origin:center;will-change:transform,opacity;
  animation:cg-activar calc(180ms*var(--cg-t)) cubic-bezier(.22,1,.36,1) calc(520ms*var(--cg-t)) both;
}
html.cg-anim-logo .cg-logo-animado .logo-dot-pulse{
  transform-box:fill-box;transform-origin:center;will-change:transform,opacity;
  animation:cg-pulso calc(300ms*var(--cg-t)) ease-out calc(520ms*var(--cg-t)) both;
}
html.cg-anim-logo .cg-logo-animado span{
  clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(-6px);will-change:clip-path,opacity,transform;
  animation:cg-wordmark calc(320ms*var(--cg-t)) cubic-bezier(.22,1,.36,1) calc(580ms*var(--cg-t)) both;
}

@keyframes cg-draw{ to{ stroke-dashoffset:0; } }
@keyframes cg-activar{ to{ opacity:1; transform:scale(1); } }
@keyframes cg-pulso{ 0%{ opacity:0; transform:scale(1); } 15%{ opacity:.30; } 100%{ opacity:0; transform:scale(2.6); } }
@keyframes cg-wordmark{ to{ clip-path:inset(0 0 0 0); opacity:1; transform:translateX(0); } }

/* Accesibilidad: sin movimiento, el logo aparece completo y estatico (el
   pulso queda oculto, nunca un circulo fijo sobre el punto). */
@media (prefers-reduced-motion: reduce){
  html.cg-anim-logo .cg-logo-animado .logo-ring-slate,
  html.cg-anim-logo .cg-logo-animado .logo-arc-red,
  html.cg-anim-logo .cg-logo-animado .logo-letter-c,
  html.cg-anim-logo .cg-logo-animado .logo-dot,
  html.cg-anim-logo .cg-logo-animado span{
    animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important;clip-path:none!important;
  }
  html.cg-anim-logo .cg-logo-animado .logo-dot-pulse{ animation:none!important;opacity:0!important; }
}
.cg-nav-oscura .cg-nav-links > a,.cg-nav-oscura .cg-nav-boton{color:rgba(255,255,255,.65);}
.cg-nav-oscura .cg-nav-links > a:hover,.cg-nav-oscura .cg-nav-boton:hover,
.cg-nav-oscura .cg-nav-boton[aria-expanded="true"]{color:#fff;}
.cg-nav-oscura .cg-menu-btn{border-color:rgba(255,255,255,.25);}
.cg-nav-oscura .cg-menu-btn span{background:#fff;}
@media (max-width:900px){
  .cg-nav-oscura .cg-nav-links{background:var(--cg-navy-hondo);border-bottom-color:rgba(255,255,255,.1);}
  .cg-nav-oscura .cg-nav-links > a{border-bottom-color:rgba(255,255,255,.08);}
  .cg-nav-oscura .cg-nav-item{border-bottom-color:rgba(255,255,255,.08);}
}

/* ---------- cap. 02 · hero ---------- */
.cg-hero{padding-top:clamp(40px,6vw,80px);padding-bottom:0;}
/* La banda cinematográfica: navy hondo a sangre, arte del timbre respirando
   al costado y el producto flotando encima como única superficie clara. */
.cg-hero-navy{
  /* Degradado azul multidireccional: tres focos de luz desde esquinas
     distintas más un velo blanco translúcido, todo sobre el navy hondo. */
  background:
    linear-gradient(115deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(1100px 620px at 82% 30%, rgba(46,92,148,.6), rgba(8,22,39,0) 60%),
    radial-gradient(900px 700px at 6% 88%, rgba(30,58,95,.65), rgba(8,22,39,0) 58%),
    radial-gradient(760px 520px at 28% 6%, rgba(64,118,172,.32), rgba(8,22,39,0) 62%),
    linear-gradient(160deg, #0E2A4D 0%, var(--cg-navy-hondo) 70%);
  padding-bottom:clamp(96px,10vw,150px); /* aire para la curva orgánica */
  overflow:hidden; /* solo recorta el arte decorativo que se asoma a propósito */
  /* portada = primera hoja: pantalla completa bajo la cabecera; en
     pantallas bajas se comprimen los espacios verticales, no la letra */
  min-height:calc(100vh - var(--alto-cabecera,72px));
  min-height:calc(100svh - var(--alto-cabecera,72px));
  display:flex;flex-direction:column;justify-content:center;
}
.cg-hero-navy .cg-ancho{position:relative;z-index:2;}
/* Formas orgánicas curvas — superposición translúcida que fluye. */
.cg-forma{position:absolute;pointer-events:none;z-index:0;}
.cg-forma-a{
  top:-180px;left:-140px;width:560px;height:560px;
  background:linear-gradient(140deg, rgba(64,118,172,.28), rgba(30,58,95,.05) 70%);
  border-radius:58% 42% 55% 45% / 50% 58% 42% 50%;
}
.cg-forma-b{
  bottom:-220px;right:-160px;width:640px;height:640px;
  background:linear-gradient(320deg, rgba(255,255,255,.07), rgba(46,92,148,.16) 65%);
  border-radius:45% 55% 40% 60% / 55% 45% 60% 40%;
}
/* La onda de cierre del héroe, pintada con el papel de la sección que sigue. */
.cg-onda{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(46px,8vw,110px);display:block;z-index:1;}
.cg-onda path{fill:var(--cg-papel);}
.cg-hero-navy .cg-eyebrow{color:var(--cg-acento);}
/* .cg-hero.cg-hero-navy: gana el empate de especificidad con `.cg-hero h1`,
   que viene después en el archivo y dejaba el titular navy sobre navy. */
.cg-hero.cg-hero-navy h1{color:#fff;font-size:clamp(38px,6vw,84px);}
.cg-hero-navy .cg-lede{color:rgba(255,255,255,.78);}
.cg-hero-navy .cg-btn-texto{color:rgba(255,255,255,.85);}
.cg-hero-navy .cg-btn-texto:hover{color:#fff;}
.cg-hero-navy .cg-cuadro{box-shadow:0 40px 120px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);}
/* Arte del timbre: sus movimientos los decidió Paulo (30-08) — el arco
   rojo fijo en la segunda órbita, las dos punteadas en deriva y los
   planetas alrededor del centro. Las sólidas restantes, quietas. */
.cg-timbre-arte{
  position:absolute;top:50%;right:-12%;width:min(62vw,880px);height:auto;
  transform:translateY(-50%);pointer-events:none;
}
@media (max-width:860px){
  .cg-timbre-arte{top:auto;bottom:-30%;right:-35%;width:130vw;opacity:.6;}
}
.cg-hero-centro{position:relative;z-index:1;max-width:960px;margin:0 auto;text-align:center;}
.cg-hero-centro .cg-lede{margin-left:auto;margin-right:auto;}
.cg-eyebrow{
  font-family:var(--cg-mono);font-size:clamp(.62rem,1.6vw,.72rem);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cg-tinta-suave);margin:0 0 18px;
}
/* La etiqueta del héroe vive dentro de una elipse editorial de trazo fino:
   una órbita terracota, pariente de los arcos de "Revisión Conecta" pero
   dibujada con stroke-dashoffset — rotar el SVG cambiaría la orientación
   de la elipse. Es el ÚNICO círculo animado del héroe: el timbre y las
   formas orgánicas siguen quietos a propósito. Sin fondo, sin sombra. */
.cg-eyebrow.hero-kicker-orbit{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.65rem 1.8rem;isolation:isolate;
  font-family:var(--cg-sans);font-size:clamp(.78rem,1vw,1.05rem);font-weight:700;
  letter-spacing:.1em;line-height:1.25;text-align:center;
}
/* .cg delante: sin él, el `.cg svg{max-width:100%}` general recorta el
   sobreancho de la elipse y la descentra 0.8rem hacia la izquierda. */
.cg .hero-kicker-orbit__graphic{
  position:absolute;inset:-.35rem -.8rem;
  width:calc(100% + 1.6rem);max-width:none;height:calc(100% + .7rem);
  overflow:visible;pointer-events:none;z-index:-1;
}
/* Sin vector-effect:non-scaling-stroke A PROPÓSITO: con él, Chromium mide
   los guiones en píxeles de pantalla e ignora pathLength. El JS reescala
   el viewBox al tamaño real del contenedor (escala 1:1) para que la elipse
   no se deforme. La elipse del título es QUIETA: el movimiento del héroe
   vive en el arte del timbre (orbit-red-runner, orbit-dots-a/b y los
   planetas). */
.hero-kicker-orbit__track{
  fill:none;stroke:var(--cg-acento);stroke-width:1;opacity:.18;
}
/* El segmento terracota que recorre la órbita exterior del arte derecho.
   pathLength=100 normaliza el perímetro: "20 80" = un solo segmento del
   20%, y un ciclo completo de dashoffset (−100) = una vuelta continua. */
/* El arco rojo vive PARA SIEMPRE en la segunda órbita (r=360): sin cambios
   de radio, sin saltos entre circunferencias. 18+82 = 100 = pathLength,
   así el último fotograma del ciclo coincide exacto con el primero. Sin
   vector-effect:non-scaling-stroke A PROPÓSITO: con él Chromium mide los
   guiones en píxeles de pantalla e ignora pathLength, y el arco único se
   partiría en decenas de guiones. */
.orbit-red-runner{
  fill:none;stroke:var(--cg-acento);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:18 82;stroke-dashoffset:0;
  /* atenuado: la órbita cruza por detrás del titular y a plena intensidad
     el arco parecía un rayón sobre el texto */
  opacity:.62;
  animation:orbit-red-forward 12s linear infinite;
  will-change:stroke-dashoffset;
}
@keyframes orbit-red-forward{from{stroke-dashoffset:0;}to{stroke-dashoffset:-100;}}
/* Órbitas punteadas: deriva lenta sobre su propia circunferencia, también
   por stroke-dashoffset (rotar el SVG sería imperceptible con puntos
   uniformes). Patrones que dividen 100 exacto — 1+4=5 (20 ciclos) y
   1+5.25=6.25 (16 ciclos) — para que el cierre de vuelta no tenga costura.
   Direcciones opuestas y duraciones distintas: nada mecánico. */
.orbit-dots-a{
  fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:1 4;stroke-dashoffset:0;
  animation:orbit-dots-forward 18s linear infinite;
  will-change:stroke-dashoffset;
}
@keyframes orbit-dots-forward{from{stroke-dashoffset:0;}to{stroke-dashoffset:-100;}}
.orbit-dots-b{
  fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:1 5.25;stroke-dashoffset:0;
  animation:orbit-dots-reverse 26s linear infinite;
  will-change:stroke-dashoffset;
}
@keyframes orbit-dots-reverse{from{stroke-dashoffset:0;}to{stroke-dashoffset:100;}}
/* Entrada del conjunto: el contenedor aparece (opacidad + escala) SIN
   tocar los relojes orbitales, que corren desde la carga y continúan tal
   cual. stroke-dashoffset queda reservado a los recorridos continuos. */
.orbits-wrapper{transform-box:view-box;transform-origin:50% 50%;}
.motion-ready .orbits-wrapper{
  opacity:0;transform:scale(.98);
  transition:opacity 700ms cubic-bezier(.22,1,.36,1),
             transform 900ms cubic-bezier(.22,1,.36,1);
}
.motion-ready .orbits-wrapper.is-visible{opacity:1;transform:scale(1);}
/* Los planetas del arte giran en bloque alrededor del centro: cada punto
   conserva su radio y revolucionan juntos, con la MISMA rotación de los
   arcos de Revisión Conecta pero a paso de deriva. */
.cg-timbre-planetas{
  transform-box:view-box;transform-origin:50% 50%;
  animation:cg-arcos-gira 60s linear infinite;
}
.cg-hero h1{
  font-family:var(--cg-serif);font-weight:600;font-size:clamp(36px,5.6vw,72px);
  letter-spacing:-.02em;line-height:1.04;color:var(--cg-navy);margin-bottom:22px;text-wrap:balance;
}
.cg-lede{font-size:clamp(1.06rem,1.5vw,1.25rem);line-height:1.6;color:var(--cg-tinta-suave);max-width:44ch;margin:0 0 32px;text-wrap:pretty;}
/* Portada en pantallas bajas: SOLO espacios verticales — la tipografía
   del héroe no se toca. El umbral es más alto (940) porque el héroe es
   la hoja más cargada verticalmente. */
@media (min-width:1024px) and (max-height:940px){
  .cg-hero{padding-top:clamp(14px,2.2vh,28px);}
  .cg-hero-navy{padding-bottom:clamp(44px,6.5vh,76px);}
  .cg-eyebrow.hero-kicker-orbit{margin-bottom:10px;}
  .cg-hero h1{margin-bottom:12px;}
  .cg-hero-centro .cg-lede{margin-bottom:14px;max-width:56ch;}
  .cg-duo{margin-top:6px;}
  .cg-duo-mitad{padding:clamp(26px,3.8vh,38px);}
}

@media (max-width:860px){
  .cg-lede{max-width:none;}
}

/* ---------- héroe · las dos puertas de entrada ---------- */
/* El patrón de la referencia: una tarjeta oscura partida en las dos
   audiencias reales, cada mitad con su propio llamado a la acción. */
.cg-duo{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  border-radius:20px;overflow:hidden;margin-top:clamp(10px,2.5vw,28px);
  box-shadow:0 40px 120px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);
}
.cg-duo::after{ /* costura diagonal entre las dos mitades */
  content:"";position:absolute;left:50%;top:-8%;height:116%;width:1px;
  background:linear-gradient(rgba(227,177,90,0),rgba(227,177,90,.5),rgba(227,177,90,0));
  transform:rotate(7deg);pointer-events:none;
}
.cg-duo-mitad{
  padding:clamp(26px,4vw,52px);display:flex;flex-direction:column;gap:12px;
  align-items:flex-start;text-align:left;min-height:300px;
  transition:filter .35s var(--cg-ease);
}
@media (hover:hover){.cg-duo-mitad:hover{filter:brightness(1.12);}}
.cg-duo-com{
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%),
    radial-gradient(420px 320px at 88% -10%, rgba(64,118,172,.3), rgba(20,51,92,0) 62%),
    linear-gradient(135deg,#1A3E6B 0%,#0C2340 78%);
}
.cg-duo-prov{
  background:
    linear-gradient(225deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%),
    radial-gradient(420px 320px at 10% 110%, rgba(46,92,148,.28), rgba(11,32,56,0) 60%),
    linear-gradient(225deg,#0E2A4D 0%,#081627 82%);
}
.cg-duo-rotulo{
  font-family:var(--cg-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cg-oro-claro);margin:0 0 2px;
}
.cg-duo-mitad h2{
  font-family:var(--cg-serif);font-weight:600;font-size:clamp(24px,2.6vw,34px);
  letter-spacing:-.015em;line-height:1.12;color:#fff;text-wrap:balance;
}
.cg-duo-mitad p{margin:0;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.75);max-width:40ch;}
.cg-duo-cta{margin-top:auto;padding-top:16px;}
.cg-btn-blanco{background:#fff;color:var(--cg-navy);}
.cg-btn-blanco:hover{background:#E8EAED;box-shadow:0 8px 24px rgba(0,0,0,.35);}
.cg-btn-blanco:focus-visible{outline-color:#fff;}
@media (max-width:860px){
  .cg-duo{grid-template-columns:1fr;}
  .cg-duo::after{display:none;}
  .cg-duo-mitad{min-height:0;}
}
.cg-cifras{
  display:flex;gap:clamp(18px,4vw,44px);flex-wrap:wrap;
  border-top:1px solid var(--cg-linea);margin-top:clamp(40px,6vw,72px);padding:22px 0 26px;
}
.cg-cifra b{font-family:var(--cg-serif);font-size:1.5rem;color:var(--cg-navy);display:block;line-height:1.1;}
.cg-cifra span{font-size:.76rem;color:var(--cg-tinta-suave);}

/* ---------- cuadro comparativo: tabla → fichas apiladas ---------- */
.cg-cuadro{background:var(--cg-blanco);border-radius:14px;box-shadow:0 20px 60px rgba(12,35,64,.13);overflow:hidden;}
.cg-cuadro-cab{background:var(--cg-navy);color:#fff;padding:14px 20px;font-size:.84rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.cg-cuadro-cab .cg-folio{font-family:var(--cg-mono);color:rgba(255,255,255,.6);font-size:.76rem;}
.cg-cuadro-enc{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:8px;padding:11px 20px;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--cg-tinta-suave);border-bottom:1px solid var(--cg-linea);
}
.cg-prov{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:8px;padding:13px 20px;font-size:.85rem;border-bottom:1px solid var(--cg-linea);align-items:baseline;
}
.cg-prov-nombre{font-family:var(--cg-serif);font-weight:600;font-size:.95rem;color:var(--cg-navy);}
.cg-prov .cg-dato{font-variant-numeric:tabular-nums;text-align:right;}
.cg-prov .cg-dato-rotulo{display:none;}
.cg-cuadro-pie{padding:11px 20px;font-size:.75rem;color:var(--cg-tinta-suave);background:#F5F7F9;}
@media (max-width:620px){
  .cg-cuadro-enc{display:none;}
  .cg-prov{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 10px;padding:14px 16px;}
  .cg-prov-nombre{grid-column:1 / -1;margin-bottom:2px;}
  .cg-prov .cg-dato{text-align:left;}
  .cg-prov .cg-dato-rotulo{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cg-tinta-suave);}
}
.cg-cuadro-marco .cg-cuadro{box-shadow:0 22px 56px rgba(12,35,64,.14);}

/* ---------- carrusel de módulos ---------- */
/* Pista movida por transform (no scroll nativo): 260 ms con arranque
   rápido, y los clics consecutivos REDIRIGEN la transición en vuelo en vez
   de encolarse. El arrastre táctil sigue al dedo sin transición y ajusta a
   la tarjeta más cercana en 200 ms. */
.cg-modulos-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;}
/* Con el título tipográfico grande, el control se alinea con la bajada
   (abajo), no a media altura de una composición de 118px. */
#modulos .cg-modulos-cab{align-items:flex-end;}
#modulos .cg-modulos-cab > div{min-width:0;}

/* =========================================================================
   SISTEMA DE TÍTULOS DE ALTO IMPACTO — patrón reutilizable
   -------------------------------------------------------------------------
   Un solo bloque para TODOS los encabezados principales de la landing. Cada
   título es un <h2 data-tit> con su frase completa en aria-label y sus
   líneas en <span> (aria-hidden): el lector de pantalla recibe una sola
   frase, sin duplicados.

   Configurable por clase/atributo, sin duplicar CSS por sección:
     .cg-tit-centro  → alineación centrada (el resto es a la izquierda)
     .cg-tit-largo   → escala menor para títulos extensos
     .cg-tit-fuerte  → Inter ExtraBold mayúsculas (voz principal)
     .cg-tit-cursiva → Source Serif 4 Italic (contrapunto editorial)
     data-dir=izq|der|abajo → dirección de entrada de esa línea
   En fondos navy (.cg-en-navy) el color se adapta solo.

   REGLA CLAVE: el estado por defecto es VISIBLE. Las partes solo se ocultan
   mientras el controlador las está animando (.esta-animando). Así cualquier
   interrupción —scroll, cambio de pestaña, pausa— deja SIEMPRE el título
   completo, nunca una línea suelta. La altura la reserva el propio flujo:
   nada se anima que provoque layout shift (solo transform y opacity).
   ========================================================================= */
.cg-tit{
  margin:0 0 clamp(18px,2vw,24px);
  text-wrap:initial;   /* las líneas ya vienen partidas a propósito */
}
.cg-tit-centro{text-align:center;}
.cg-tit-l{display:block;overflow:hidden;padding:.14em 0 .08em;}
.cg-tit-centro .cg-tit-l{display:flex;justify-content:center;}
.cg-tit-p{display:inline-block;will-change:transform,opacity;}
.cg-tit-fuerte{
  font-family:var(--cg-sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(46px,7vw,112px);line-height:.88;letter-spacing:-.04em;
  color:var(--cg-navy);
}
.cg-tit-cursiva{
  font-family:var(--cg-serif);font-style:italic;font-weight:500;
  font-size:clamp(30px,4.4vw,70px);line-height:.98;letter-spacing:-.01em;
  color:var(--cg-acento);
}
/* Títulos extensos: escala menor para que no dominen la sección. */
.cg-tit-largo .cg-tit-fuerte{font-size:clamp(38px,5.5vw,86px);}
.cg-tit-largo .cg-tit-cursiva{font-size:clamp(26px,3.5vw,54px);}
/* En contenedores angostos (el cierre mide 720px) la escala se ajusta al
   ancho real disponible: el título nunca sale de su columna. */
.cg-angosto .cg-tit-fuerte{font-size:clamp(38px,5vw,74px);}
.cg-angosto .cg-tit-cursiva{font-size:clamp(26px,3.2vw,48px);}
/* Títulos que viven DENTRO de una columna (láminas "Mismo formato" y
   "Así se ve un expediente"): escala al ancho real de su celda. */
.cg-tit-columna .cg-tit-fuerte{font-size:clamp(32px,3.6vw,52px);}
.cg-tit-columna .cg-tit-cursiva{font-size:clamp(22px,2.4vw,36px);}
/* Sobre navy: blanco cálido y el oro de marca para el contrapunto. */
.cg-en-navy .cg-tit-fuerte{color:var(--cg-papel);}
.cg-en-navy .cg-tit-cursiva{color:var(--cg-oro-claro);}

/* ---------- coreografía (solo mientras el controlador la conduce) ----------
   El movimiento se nota por RECORRIDO y CONTINUIDAD, no por velocidad.
   Tres decisiones lo definen:

   1. Trayecto largo (200 px) y tiempo largo (1200 ms): el ojo alcanza a
      seguir el texto desplazándose. Un salto corto y rápido se percibe como
      un parpadeo, no como movimiento.
   2. Curva de velocidad pareja (--ease-tit): arranca sin tirón, sostiene la
      velocidad en el centro del trayecto y llega sin frenazo. Nada de
      expo-out, que cubre casi todo el camino en el primer tercio y luego se
      arrastra.
   3. Sin sobrepasada: la línea llega a su lugar y ahí se queda. El rebote
      llama la atención sobre el efecto; el recorrido, sobre la palabra.

   La opacidad sube en el primer 40% del trayecto a propósito: si subiera al
   final, el texto aparecería ya casi colocado y el viaje no se vería. */
.cg-tit{--ease-tit:cubic-bezier(.42,0,.18,1);}
.cg-tit.esta-animando .cg-tit-p{opacity:0;}
.cg-tit.es-entrando .cg-tit-p[data-dir="izq"]{animation:cg-tit-izq 1200ms var(--ease-tit) both;}
.cg-tit.es-entrando .cg-tit-p[data-dir="der"]{animation:cg-tit-der 1200ms var(--ease-tit) both;}
.cg-tit.es-entrando .cg-tit-p[data-dir="abajo"]{animation:cg-tit-abajo 1200ms var(--ease-tit) both;}
/* Escalonado de 200 ms: cada línea arranca cuando la anterior va por la
   mitad de su trayecto, así la secuencia se encadena en un solo gesto
   continuo en vez de leerse como tres eventos sueltos. */
.cg-tit.es-entrando .cg-tit-l:nth-child(2) .cg-tit-p{animation-delay:200ms;}
.cg-tit.es-entrando .cg-tit-l:nth-child(3) .cg-tit-p{animation-delay:400ms;}
.cg-tit.es-entrando .cg-tit-l:nth-child(4) .cg-tit-p{animation-delay:600ms;}
@keyframes cg-tit-izq{
  0%{transform:translateX(-200px);opacity:0;}
  40%{opacity:1;}
  100%{transform:translateX(0);opacity:1;}
}
@keyframes cg-tit-der{
  0%{transform:translateX(200px);opacity:0;}
  40%{opacity:1;}
  100%{transform:translateX(0);opacity:1;}
}
@keyframes cg-tit-abajo{
  0%{transform:translateY(120px) rotate(1.5deg);opacity:0;}
  40%{opacity:1;}
  100%{transform:translateY(0) rotate(0deg);opacity:1;}
}
/* Salida con la misma lógica: trayecto completo y visible, la opacidad se
   apaga sobre el final para que la palabra se vea irse, no desvanecerse en
   el sitio. */
.cg-tit.es-saliendo .cg-tit-p{opacity:1;}
.cg-tit.es-saliendo .cg-tit-p[data-dir="izq"]{animation:cg-tit-sale-izq 760ms var(--ease-tit) both;}
.cg-tit.es-saliendo .cg-tit-p[data-dir="der"]{animation:cg-tit-sale-der 760ms var(--ease-tit) both;}
.cg-tit.es-saliendo .cg-tit-p[data-dir="abajo"]{animation:cg-tit-sale-abajo 760ms var(--ease-tit) both;}
/* La salida también se encadena, en el mismo orden que la entrada. */
.cg-tit.es-saliendo .cg-tit-l:nth-child(2) .cg-tit-p{animation-delay:110ms;}
.cg-tit.es-saliendo .cg-tit-l:nth-child(3) .cg-tit-p{animation-delay:220ms;}
.cg-tit.es-saliendo .cg-tit-l:nth-child(4) .cg-tit-p{animation-delay:330ms;}
@keyframes cg-tit-sale-izq{
  0%{transform:translateX(0);opacity:1;}
  55%{opacity:1;}
  100%{transform:translateX(-210px);opacity:0;}
}
@keyframes cg-tit-sale-der{
  0%{transform:translateX(0);opacity:1;}
  55%{opacity:1;}
  100%{transform:translateX(210px);opacity:0;}
}
@keyframes cg-tit-sale-abajo{
  0%{transform:translateY(0);opacity:1;}
  55%{opacity:1;}
  100%{transform:translateY(130px);opacity:0;}
}

/* Entrada coordinada de las tarjetas del carrusel tras la construcción. */
.cg-tm-carta{animation:cg-tm-carta-entra 900ms cubic-bezier(.42,0,.18,1) both;}
@keyframes cg-tm-carta-entra{
  0%{transform:translateX(90px);opacity:0;}
  40%{opacity:1;}
  100%{transform:translateX(0);opacity:1;}
}
/* Composición conectada: el título no debe abrir un vacío hacia su contenido. */
#modulos .cg-carrusel{margin-top:clamp(18px,2.5vw,30px);}
.cg-tit + .cg-bajada{margin-top:0;}
/* En las secciones de dos columnas el título encabeza a ancho completo (un
   título de 112px no cabe en una columna de ~45%): el grid va debajo. */
.cg-tit + .cg-2col,.cg-tit + .cg-comunidades{margin-top:clamp(24px,3vw,40px);}

@media (max-width:760px){
  /* El texto grande baja de escala: a 390 px, 46px mínimos desbordaban. */
  .cg-tit-fuerte{font-size:clamp(34px,10.4vw,58px);letter-spacing:-.035em;}
  .cg-tit-cursiva{font-size:clamp(24px,7vw,40px);}
  .cg-tit-largo .cg-tit-fuerte{font-size:clamp(28px,8.4vw,48px);}
  .cg-tit-largo .cg-tit-cursiva{font-size:clamp(21px,6vw,36px);}
  #modulos .cg-modulos-cab{flex-direction:column;align-items:flex-start;gap:14px;}
}
}
/* Control de reproducción/pausa: mismo lenguaje que las flechas, tamaño
   discreto. aria-pressed="true" = pausado por el usuario. */
.cg-auto-btn{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--cg-blanco);color:var(--cg-navy);
  border:1px solid rgba(12,35,64,.28);box-shadow:0 6px 18px rgba(12,35,64,.14);
  display:grid;place-items:center;cursor:pointer;
  transition:box-shadow var(--motion-hover) ease-out,border-color var(--motion-hover) ease-out;
}
@media (hover:hover){.cg-auto-btn:hover:not(:disabled){border-color:rgba(12,35,64,.45);box-shadow:0 8px 22px rgba(12,35,64,.2);}}
.cg-auto-btn:disabled{opacity:.35;cursor:default;}
.cg-auto-btn:focus-visible{outline:2px solid var(--cg-acento);outline-offset:2px;}
.cg-auto-btn[hidden]{display:none;} /* display:grid no debe anular hidden */
.cg-auto-btn .cg-icono-play{display:none;}
.cg-auto-btn[aria-pressed="true"] .cg-icono-pausa{display:none;}
.cg-auto-btn[aria-pressed="true"] .cg-icono-play{display:block;}

.cg-carrusel{position:relative;margin-top:clamp(26px,4vw,44px);}
.cg-vista{overflow:hidden;}
.cg-pista{
  list-style:none;margin:0;padding:6px 2px 12px;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3*18px)/4);gap:18px;
  transform:translate3d(var(--pista-x,0px),0,0);
  transition:transform var(--motion-carousel) var(--ease-carousel);
  touch-action:pan-y;
}
.cg-pista.es-arrastre{transition:none;}
.cg-pista.es-ajuste{transition-duration:200ms;}
.cg-pista li{display:flex;}
.cg-modulo{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  width:100%;min-height:320px;padding:24px;border-radius:18px;overflow:hidden;
  background:radial-gradient(360px 260px at 108% -8%,rgba(30,58,95,.85),rgba(30,58,95,0) 62%),var(--cg-navy);
  box-shadow:0 14px 40px rgba(12,35,64,.22);
  transition:transform 160ms ease-out,border-color 160ms ease-out,box-shadow 160ms ease-out;
}
.cg-modulo::before{ /* anillo del timbre, versión tarjeta */
  content:"";position:absolute;top:-64px;right:-56px;width:200px;height:200px;
  border:1px solid rgba(227,177,90,.28);border-radius:50%;pointer-events:none;
}
.cg-modulo::after{
  content:"";position:absolute;top:-34px;right:-26px;width:120px;height:120px;
  border:1px dashed rgba(255,255,255,.16);border-radius:50%;pointer-events:none;
}
.cg-modulo:focus-visible{outline:2px solid var(--cg-acento);outline-offset:3px;transform:translateY(-3px);box-shadow:0 20px 50px rgba(12,35,64,.3);}
.cg-modulo:focus-visible .cg-mod-flecha{transform:translateX(4px);}
.cg-modulo h3{font-family:var(--cg-serif);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;line-height:1.18;color:#fff;text-wrap:balance;}
.cg-modulo p{margin:0;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.72);}
.cg-mod-flecha{font-size:1.15rem;line-height:1;color:var(--cg-oro-claro);transition:transform 160ms ease-out;}
/* hover solo con puntero real: en táctil el estado no debe quedar pegado */
@media (hover:hover){
  .cg-modulo:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(12,35,64,.3);}
  .cg-modulo:hover .cg-mod-flecha{transform:translateX(4px);}
}
.cg-carrusel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;
  border-radius:50%;background:var(--cg-blanco);color:var(--cg-navy);
  border:1px solid rgba(12,35,64,.28);box-shadow:0 10px 28px rgba(12,35,64,.28);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .25s var(--cg-ease),box-shadow .25s var(--cg-ease),opacity .25s var(--cg-ease);
}
.cg-carrusel-btn[data-dir="-1"]{left:-12px;}
.cg-carrusel-btn[data-dir="1"]{right:-12px;}
@media (hover:hover){
  .cg-carrusel-btn:hover:not(:disabled){transform:translateY(-50%) scale(1.06);box-shadow:0 12px 32px rgba(12,35,64,.26);}
}
.cg-carrusel-btn:disabled{opacity:.35;cursor:default;}
.cg-carrusel-btn:focus-visible{outline:2px solid var(--cg-acento);outline-offset:2px;}
@media (max-width:1080px){.cg-pista{grid-auto-columns:calc((100% - 18px)/2.4);}}
@media (max-width:680px){
  .cg-pista{grid-auto-columns:min(78%,320px);}
  .cg-carrusel-btn[data-dir="-1"]{left:-4px;}
  .cg-carrusel-btn[data-dir="1"]{right:-4px;}
  .cg-modulo{min-height:280px;}
}

/* ---------- cap. 03 · problema y proceso ---------- */
/* Las bandas claras llevan el degradado vertical suave de la referencia:
   luz arriba que decanta en plata, en vez de blanco plano. */
.cg-blanco-banda{background:linear-gradient(180deg,var(--cg-blanco) 0%,#F0F2F4 100%);}
.cg-2col{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);}
@media (max-width:860px){.cg-2col{grid-template-columns:1fr;}}
/* Los cinco pasos viven en un panel papel elevado sobre la banda blanca:
   el proceso es el ancla visual de la sección. */
.cg-pasos{
  --pasos-pad-x:clamp(20px,3vw,32px);--pasos-pad-y:clamp(20px,2.7vw,30px);
  list-style:none;margin:0;position:relative;
  padding:var(--pasos-pad-y) var(--pasos-pad-x);
  background:var(--cg-papel);border:1px solid var(--cg-linea);border-radius:14px;
  box-shadow:0 18px 44px rgba(12,35,64,.08);
}
.cg-pasos::before{
  content:"";position:absolute;left:calc(var(--pasos-pad-x) + 15px);
  top:calc(var(--pasos-pad-y) + 10px);bottom:calc(var(--pasos-pad-y) + 10px);
  width:2px;background:rgba(12,35,64,.16);
}
.cg-paso{position:relative;padding:0 0 22px 48px;}
.cg-paso:last-child{padding-bottom:0;}
.cg-paso b{font-size:1rem;color:var(--cg-navy);}
/* Con el título ya fuera del grid, la bajada acompaña al panel desde
   arriba: centrarla la dejaba flotando en un hueco. */
#como-funciona .cg-2col{align-items:start;gap:clamp(28px,4vw,56px);}
/* la tabla comparativa, más cerca del texto que la explica */
#cotizacion .cg-2col{gap:clamp(24px,3.5vw,48px);align-items:center;}
.cg-paso-num{
  position:absolute;left:0;top:0;width:31px;height:31px;border-radius:50%;
  background:var(--cg-blanco);border:1.5px solid var(--cg-navy);color:var(--cg-navy);
  font-family:var(--cg-mono);font-size:.8rem;display:flex;align-items:center;justify-content:center;
}
.cg-paso b{display:block;font-size:.95rem;color:var(--cg-navy);margin-bottom:2px;}
.cg-paso p{font-size:.86rem;color:var(--cg-tinta-suave);max-width:46ch;margin:0;}

/* ---------- cap. 04 · comunidades y proveedores ---------- */
.cg-dual{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,40px);}
.cg-comunidades{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  /* reserva el alto de la superposición de la banda navy: la banda pisa
     este aire, nunca el texto */
  padding-bottom:34px;
}
@media (max-width:860px){.cg-comunidades{grid-template-columns:1fr;padding-bottom:0;}}
/* El informe de ejemplo como hoja real: sombra de papel y un leve
   desfase vertical respecto del texto para crear profundidad. */
.cg-minidoc{
  background:var(--cg-blanco);border:1px solid var(--cg-linea);border-radius:10px;
  padding:22px 24px;box-shadow:0 22px 54px rgba(12,35,64,.13),0 2px 6px rgba(12,35,64,.06);
}
@media (min-width:861px){.cg-minidoc{position:relative;top:-18px;}}
.cg-minidoc-cab{
  display:flex;justify-content:space-between;gap:10px;font-family:var(--cg-mono);font-size:.66rem;
  color:var(--cg-tinta-suave);border-bottom:1px solid var(--cg-linea);padding-bottom:10px;margin-bottom:12px;flex-wrap:wrap;
  text-transform:uppercase;letter-spacing:.04em;
}
.cg-minidoc h3{font-family:var(--cg-serif);font-size:1.02rem;color:var(--cg-navy);margin-bottom:8px;font-weight:600;}
.cg-minidoc ul{margin:0;padding-left:18px;}
.cg-minidoc li{font-size:.82rem;color:var(--cg-tinta-suave);}
/* La superposición controlada con la mitad superior de la sección vive en
   el MARCO (el ancla #proveedores): así la posición medida por la
   navegación es la misma que se ve, y la banda interior queda libre para
   animarse con transform sin mover el ancla. */
.cg-provbanda-marco{margin-top:calc(-1 * clamp(24px,4vw,40px) - 24px);}
.cg-provbanda{
  background:var(--cg-navy);border-radius:14px;color:#fff;padding:clamp(22px,3vw,34px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,48px);align-items:center;
  position:relative;z-index:1;
  box-shadow:0 24px 60px rgba(12,35,64,.22);
}
@media (max-width:860px){
  .cg-provbanda-marco{margin-top:0;}
  .cg-provbanda{grid-template-columns:1fr;}
}
/* color explícito: el h3 global es navy y sobre la banda navy quedaba
   invisible (defecto preexistente detectado por la batería de navegación) */
.cg-provbanda h3{font-family:var(--cg-serif);font-weight:500;font-size:clamp(20px,2.6vw,28px);margin-bottom:10px;color:#fff;}
.cg-provbanda p{font-size:.9rem;color:rgba(255,255,255,.8);margin:0;}
.cg-sello{border:1.5px double var(--cg-oro-claro);border-radius:10px;padding:18px 20px;text-align:center;}
.cg-sello-tit{font-family:var(--cg-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cg-oro-claro);margin-bottom:6px;}
.cg-sello b{font-family:var(--cg-serif);font-size:1.1rem;font-weight:600;display:block;margin-bottom:4px;}
.cg-sello span{font-size:.76rem;color:rgba(255,255,255,.65);}

/* ---------- cap. 05 · verificación en dos capas ---------- */
/* ---------- dos fuentes de validación: contraste estructural ----------
   El registro oficial vive ABIERTO sobre el fondo claro (sin tarjeta, sin
   sombra, sin radios); la revisión de Conecta es el panel navy protagonista.
   Solo dos familias: Source Serif 4 (títulos) e Inter (interfaz). Sin oro:
   el único acento es el terracota. */
.cg-fuentes-cab{max-width:none;}
.cg-fuentes-cab .cg-bajada{max-width:680px;}
.cg-fuentes-rotulo{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cg-acento);margin:0 0 14px;
}
/* La cursiva comparte línea con UNA y entra con su propio desfase — la
   misma familia de animación, sin crear una segunda. */
.cg-tit-l-mixta{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,26px);flex-wrap:wrap;}
.cg-tit-fuentes.es-entrando .cg-tit-l-mixta .cg-tit-cursiva{animation-delay:150ms;}

.cg-fuentes{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(28px,4vw,56px);align-items:center;
  margin-top:var(--cap-brecha-contenido);
}

/* etiquetas y antecedentes compartidos por ambos lados */
.cg-fuente-etiqueta{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cg-acento);margin:0 0 4px;
}
.cg-fuente-sub{
  font-size:.92rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cg-navy);margin:0 0 16px;
}
.cg-fuentes h3{
  font-family:var(--cg-serif);font-weight:600;font-size:clamp(20px,2vw,25px);
  line-height:1.2;color:var(--cg-navy);margin:0 0 10px;
}
.cg-fuente-texto{font-size:.93rem;line-height:1.65;color:var(--cg-tinta-suave);margin:0 0 20px;}
/* antecedentes en línea, separados por divisores verticales finos — nunca
   chips ni cápsulas */
.cg-fuente-datos{
  list-style:none;margin:0 0 18px;padding:14px 0;
  border-top:1px solid var(--cg-linea);border-bottom:1px solid var(--cg-linea);
  display:flex;flex-wrap:wrap;row-gap:10px;
}
.cg-fuente-datos li{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:var(--cg-navy);white-space:nowrap;
  padding:0 clamp(10px,1.4vw,18px);
}
.cg-fuente-datos li:first-child{padding-left:0;}
.cg-fuente-datos li + li{border-left:1px solid var(--cg-linea);}
.cg-fuente-nota{font-size:.8rem;line-height:1.55;color:var(--cg-tinta-suave);margin:0;}

/* lado izquierdo: abierto sobre el fondo, deliberadamente sin caja */
.cg-fuente-oficial{--motion-distance:18px;}

/* lado derecho: el panel protagonista */
.cg-fuente-conecta{
  --motion-distance:24px;
  position:relative;overflow:hidden;
  background:var(--cg-navy);border-radius:17px;
  padding:clamp(26px,3.4vw,44px);
  box-shadow:0 26px 60px rgba(12,35,64,.26);
  transition:transform 430ms var(--ease-interface),box-shadow 430ms var(--ease-interface);
}
@media (hover:hover){
  .cg-fuente-conecta:hover{
    transform:translateY(-4px);
    box-shadow:0 32px 72px rgba(12,35,64,.32),inset 0 0 0 1px rgba(255,255,255,.12);
  }
}
.cg-fuente-conecta .cg-fuente-etiqueta{color:#E89B82;}
.cg-fuente-conecta .cg-fuente-sub{color:var(--cg-papel);}
.cg-fuente-conecta h3{color:#fff;}
.cg-fuente-conecta .cg-fuente-texto{color:rgba(255,255,255,.75);}
.cg-fuente-conecta .cg-fuente-datos{
  border-top-color:rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.16);
}
.cg-fuente-conecta .cg-fuente-datos li{color:#fff;}
.cg-fuente-conecta .cg-fuente-datos li + li{border-left-color:rgba(255,255,255,.16);}
.cg-fuente-conecta .cg-fuente-nota{color:rgba(255,255,255,.6);}

/* dos circunferencias parciales de puro CSS, recortadas por el panel:
   trazo continuo terracota + trazo interior discontinuo gris claro */
.cg-fuente-arcos{position:absolute;top:-72px;right:-64px;width:220px;height:220px;pointer-events:none;}
.cg-fuente-arcos::before,
.cg-fuente-arcos::after{
  content:"";position:absolute;inset:0;border-radius:50%;
}
.cg-fuente-arcos::before{
  border:2px solid transparent;
  border-bottom-color:var(--cg-acento);border-left-color:var(--cg-acento);
  animation:cg-arcos-gira 14s linear infinite;
}
.cg-fuente-arcos::after{
  inset:26px;border:1px dashed rgba(255,255,255,.35);
  animation:cg-arcos-gira 22s linear infinite reverse;
}
@keyframes cg-arcos-gira{to{transform:rotate(360deg);}}

/* conclusión inferior: terracota entre dos líneas finas, sin bloque navy */
.cg-fuentes-cierre{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:clamp(30px,4vw,48px) 0 0;text-align:center;
}
.cg-fuentes-cierre b{
  display:flex;align-items:center;gap:16px;
  font-size:.8rem;font-weight:700;letter-spacing:.18em;color:var(--cg-acento);
}
.cg-fuentes-cierre b::before,
.cg-fuentes-cierre b::after{content:"";width:clamp(32px,5vw,64px);height:1px;background:var(--cg-linea-fuerte,#CBD2DA);}
.cg-fuentes-cierre span{font-size:.86rem;color:var(--cg-tinta-suave);}

/* aparición: fluida y algo más larga que el revelado general */
.motion-ready #verificacion [data-reveal].es-visible{
  transition-duration:780ms;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
.cg-fuentes-cab{--motion-distance:18px;}

@media (max-width:900px){
  .cg-fuentes{grid-template-columns:1fr;gap:clamp(24px,5vw,36px);}
}

/* ---------- cap. 07 · contrato y firma (tras la compuerta) ---------- */
.cg-navy-banda{
  background:
    radial-gradient(900px 560px at 88% 12%, rgba(46,92,148,.4), rgba(12,35,64,0) 60%),
    radial-gradient(700px 520px at 4% 90%, rgba(30,58,95,.5), rgba(12,35,64,0) 55%),
    var(--cg-navy);
  color:#fff;
}
.cg-firma-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,5vw,64px);margin-top:34px;align-items:start;}
@media (max-width:860px){.cg-firma-grid{grid-template-columns:1fr;}}
.cg-hoja{background:var(--cg-papel);color:var(--cg-tinta);border-radius:10px;padding:clamp(18px,3vw,30px);box-shadow:0 24px 70px rgba(0,0,0,.35);}
.cg-hoja-cab{
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-family:var(--cg-mono);font-size:.66rem;
  color:var(--cg-tinta-suave);border-bottom:2px solid var(--cg-navy);padding-bottom:10px;margin-bottom:14px;
}
.cg-hoja-cab b{color:var(--cg-navy);font-family:var(--cg-serif);font-size:.9rem;}
.cg-hoja-titulo{font-family:var(--cg-serif);font-weight:600;text-align:center;font-size:1.05rem;color:var(--cg-navy);margin-bottom:14px;}
.cg-hoja-partes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px;}
@media (max-width:420px){.cg-hoja-partes{grid-template-columns:1fr;}}
.cg-hoja-parte span{display:block;font-family:var(--cg-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cg-tinta-suave);margin-bottom:3px;}
.cg-hoja-parte b{display:block;font-size:.85rem;color:var(--cg-navy);}
.cg-hoja-parte i{font-size:.72rem;color:var(--cg-tinta-suave);font-style:normal;}
.cg-hoja-firmas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:16px 0 14px;}
@media (max-width:420px){.cg-hoja-firmas{grid-template-columns:1fr;}}
.cg-hoja-firma{border-top:1px solid var(--cg-tinta-suave);padding-top:6px;}
.cg-hoja-firma b{font-size:.78rem;color:var(--cg-navy);display:block;}
.cg-hoja-firma span{font-size:.68rem;color:var(--cg-tinta-suave);}
.cg-hoja-huella{
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-family:var(--cg-mono);
  font-size:.66rem;color:var(--cg-tinta-suave);border-top:1px solid var(--cg-linea);padding-top:10px;overflow-wrap:anywhere;
}
.cg-recorrido{list-style:none;padding:0;margin:0;position:relative;}
.cg-recorrido::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1.5px;background:var(--cg-linea-navy);}
.cg-estado{position:relative;padding:0 0 20px 34px;}
.cg-estado:last-child{padding-bottom:0;}
.cg-estado::before{
  content:"";position:absolute;left:3px;top:5px;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--cg-oro-claro);background:var(--cg-navy);
}
.cg-estado.es-hito::before{background:var(--cg-oro-claro);}
.cg-estado b{display:block;font-size:.92rem;margin-bottom:1px;}
.cg-estado span{font-size:.8rem;color:rgba(255,255,255,.62);}
.cg-firma-legal{font-size:.8rem;color:rgba(255,255,255,.55);border-top:1px solid var(--cg-linea-navy);padding-top:16px;margin:26px 0 0;max-width:62ch;}

/* ---------- cap. 08 · auditoría y seguridad ---------- */
.cg-aud-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);margin-top:30px;align-items:start;}
@media (max-width:860px){.cg-aud-grid{grid-template-columns:1fr;}}
/* El registro como expediente: papel, línea de tiempo visible que se
   dibuja una vez, y un marcador por evento que se activa en secuencia. */
.cg-ledger{
  position:relative;background:var(--cg-papel);border:1px solid var(--cg-linea);
  border-radius:12px;padding:18px 20px 18px 40px;
  box-shadow:0 18px 44px rgba(12,35,64,.09),0 2px 6px rgba(12,35,64,.05);
}
.cg-ledger::before{
  content:"";position:absolute;left:24px;top:26px;bottom:52px;width:2px;
  background:rgba(12,35,64,.16);
}
.motion-ready .cg-ledger::before{transform:scaleY(0);transform-origin:top;}
.cg-ledger.es-activa::before{transform:scaleY(1);transition:transform 500ms var(--ease-interface);}
.cg-ledger-linea{position:relative;display:flex;gap:12px;font-size:.78rem;padding:9px 0;border-bottom:1px solid var(--cg-linea);align-items:baseline;}
.cg-ledger-linea::before{
  content:"";position:absolute;left:-20px;top:14px;width:6px;height:6px;border-radius:50%;
  background:var(--cg-blanco);border:2px solid var(--cg-navy);
}
.cg-ledger-linea.es-visible::before{border-color:var(--cg-acento);}
.cg-ledger-linea:last-of-type{border-bottom:none;}
.cg-ledger-hora{font-family:var(--cg-mono);font-size:.68rem;color:var(--cg-tinta-suave);white-space:nowrap;}
.cg-ledger-evento b{color:var(--cg-navy);font-size:.8rem;}
.cg-ledger-evento span{display:block;color:var(--cg-tinta-suave);font-size:.74rem;}
.cg-ledger-nota{font-family:var(--cg-mono);font-size:.62rem;color:var(--cg-tinta-suave);margin:10px 0 0;}
/* La explicación lateral, en su propio panel de papel. */
.cg-seg-lista{
  list-style:none;margin:0;padding:8px 22px;
  background:var(--cg-papel);border:1px solid var(--cg-linea);border-radius:12px;
  box-shadow:0 12px 32px rgba(12,35,64,.06);
}
.cg-seg-lista li{padding:14px 0;border-bottom:1px solid var(--cg-linea);}
.cg-seg-lista li:last-child{border-bottom:none;}
.cg-seg-lista b{display:block;font-size:.95rem;color:var(--cg-navy);margin-bottom:2px;}
.cg-seg-lista p{font-size:.85rem;color:var(--cg-tinta-suave);margin:0;}

/* ---------- cap. 09 · tarifas: escenario navy, dos tarjetas papel ---------- */
/* La única sección editorial con encabezado centrado (junto al cierre):
   marca el cambio de registro — de la lectura a la decisión comercial. */
/* La sección completa debe caber en la vista al navegar a Precios:
   padding compacto propio (pisa al de .cg-cap-medio) y ritmo interno corto. */
#precios{padding-top:clamp(36px,5vh,56px);padding-bottom:48px;}
.cg-tarifas-cap .cg-tarifas-cab{max-width:760px;margin:0 auto;text-align:center;}
.cg-tarifas-cap .cg-h2{margin-bottom:14px;}
.cg-tarifas-cap .cg-tarifas-cab .cg-bajada{margin-left:auto;margin-right:auto;}
/* Lámina de precios: el título y los DOS planes comparten la primera
   pantalla. La escala del título se ajusta al ancho de su cabecera —
   con la escala general, "UNA TARIFA FIJA," envolvía a dos líneas dentro
   de su máscara (474px de título) y empujaba los planes fuera. */
.cg-tarifas-cap .cg-tit-fuerte{font-size:clamp(34px,4.2vw,64px);}
.cg-tarifas-cap .cg-tit-cursiva{font-size:clamp(24px,2.8vw,44px);}
.cg-tarifas-cap .cg-bajada{max-width:56ch;}
.cg-tarifas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2vw,28px);
  max-width:880px;margin:clamp(18px,2.5vh,32px) auto 0;align-items:stretch;
}
.cg-tarifa{
  background:var(--cg-papel);color:var(--cg-tinta);border:1px solid var(--cg-linea);
  border-radius:14px;padding:clamp(24px,2.5vw,32px);display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  transition:transform var(--motion-hover) ease-out,border-color var(--motion-hover) ease-out,box-shadow var(--motion-hover) ease-out;
}
/* escritorios de poca altura: aún más compacto para que ambas tarjetas
   queden completas en la vista inicial (título + dos planes = una hoja) */
@media (min-width:900px) and (max-height:850px){
  #precios{padding-top:24px;padding-bottom:32px;}
  .cg-tarifas{margin-top:18px;}
  .cg-tarifa{padding-top:clamp(14px,2.2vh,20px);padding-bottom:clamp(14px,2.2vh,20px);}
  .cg-tarifa-cta{margin-top:12px;}
  .cg-tarifa-lista{margin-top:12px;padding-top:11px;gap:6px;}
  .cg-tarifas-cap .cg-h2{margin-bottom:10px;}
}
.motion-ready .cg-tarifa.es-visible{transition-duration:420ms;}
@media (hover:hover){
  .cg-tarifa:hover{transform:translateY(-3px);border-color:rgba(12,35,64,.35);box-shadow:0 30px 72px rgba(0,0,0,.42);}
}
.cg-tarifa-quien{margin:0 0 12px;}
.cg-tarifa-quien b{display:block;font-family:var(--cg-serif);font-weight:600;font-size:1.3rem;color:var(--cg-navy);}
.cg-tarifa-quien span{font-size:.85rem;color:var(--cg-tinta-suave);}
.cg-tarifa-precio{
  margin:0;font-family:var(--cg-serif);font-weight:600;font-size:clamp(2.4rem,4vw,3.2rem);
  line-height:1;color:var(--cg-navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.cg-tarifa-precio i{font-style:normal;font-family:var(--cg-sans);font-weight:400;font-size:1rem;color:var(--cg-tinta-suave);letter-spacing:0;}
.cg-tarifa-iva{margin:6px 0 0;font-size:.78rem;color:var(--cg-tinta-suave);}
.cg-tarifa-cta{margin:16px 0 0;}
.cg-tarifa-cta .cg-btn{display:block;text-align:center;}
.cg-tarifa-lista{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--cg-linea);display:grid;gap:8px;}
.cg-tarifa-lista li{position:relative;padding-left:26px;font-size:.92rem;line-height:1.5;color:var(--cg-tinta);}
.cg-tarifa-lista li::before{ /* check discreto dibujado en CSS */
  content:"";position:absolute;left:2px;top:5px;width:11px;height:6px;
  border-left:2px solid var(--cg-acento);border-bottom:2px solid var(--cg-acento);
  transform:rotate(-45deg);
}
.cg-tarifas-cap .cg-planes-pie{text-align:center;font-size:.8rem;color:rgba(255,255,255,.6);max-width:640px;margin:18px auto 0;}
.cg-tarifas-cap .cg-faq{margin-top:22px;}
/* preguntas sobre el mismo escenario navy */
.cg-tarifas-cap .cg-faq{max-width:720px;margin-left:auto;margin-right:auto;}
.cg-tarifas-cap .cg-faq-item{border-bottom-color:rgba(255,255,255,.14);}
.cg-tarifas-cap .cg-faq-boton{color:rgba(255,255,255,.88);}
.cg-tarifas-cap .cg-faq-boton:hover{color:#fff;}
.cg-tarifas-cap .cg-faq-boton::after{color:rgba(255,255,255,.5);}
.cg-tarifas-cap .cg-faq-panel p{color:rgba(255,255,255,.68);}
@media (max-width:760px){
  .cg-tarifas{grid-template-columns:1fr;max-width:520px;}
}
.cg-faq{margin-top:clamp(28px,5vw,44px);}
.cg-faq-item{border-bottom:1px solid var(--cg-linea);}
.cg-faq-boton{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:none;border:0;cursor:pointer;text-align:left;padding:16px 0;
  font-family:inherit;font-size:.95rem;font-weight:600;color:var(--cg-navy);min-height:44px;
}
.cg-faq-boton::after{content:"+";font-family:var(--cg-serif);font-size:1.2rem;color:var(--cg-tinta-suave);flex-shrink:0;}
.cg-faq-item[data-abierta] .cg-faq-boton::after{content:"–";}
.cg-faq-panel{display:none;padding:0 0 16px;}
.cg-faq-item[data-abierta] .cg-faq-panel{display:block;}
.cg-faq-panel p{font-size:.86rem;color:var(--cg-tinta-suave);max-width:68ch;margin:0;}

/* ---------- cap. 10 · cierre + pie ---------- */
.cg-cierre{text-align:center;}
.cg-cierre .cg-rotulo{justify-content:center;}
.cg-cierre .cg-h2{margin-left:auto;margin-right:auto;font-size:clamp(34px,4.6vw,56px);}
.cg-cierre .cg-btn{font-size:1.05rem;padding:17px 36px;}
.cg-cierre .cg-btn-texto{color:rgba(255,255,255,.85);}
.cg-cierre .cg-btn-texto:hover{color:#fff;}
.cg-cierre .cg-botones{justify-content:center;}
.cg-cierre .cg-bajada{margin:0 auto 28px;}
.cg-cierre .cg-botones{justify-content:center;}
.cg-pie{background:var(--cg-navy-hondo);color:rgba(255,255,255,.7);padding:clamp(36px,6vw,64px) 0 28px;}
.cg-pie-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);}
@media (max-width:900px){.cg-pie-grid{grid-template-columns:1fr 1fr;}.cg-pie-marca{grid-column:1/-1;}}
@media (max-width:720px){.cg-pie-grid{grid-template-columns:1fr;}}
.cg-pie .cg-logo{color:#fff;}
.cg-pie p{font-size:.82rem;margin:8px 0 0;max-width:34ch;}
.cg-pie h2{font-family:var(--cg-mono);font-size:.64rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-bottom:10px;}
.cg-pie a{display:block;color:rgba(255,255,255,.7);font-size:.84rem;padding:3px 0;}
.cg-pie a:hover{color:#fff;}
.cg-pie-legal{
  border-top:1px solid var(--cg-linea-navy);margin-top:clamp(24px,4vw,40px);padding-top:18px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.74rem;color:rgba(255,255,255,.45);
}

/* ---------- marcadores de fotografía (F1–F5, pendientes) ---------- */
.cg-foto{
  border:1.5px dashed var(--cg-linea);border-radius:12px;background:rgba(12,35,64,.03);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:18px;gap:4px;
}
.cg-foto .cg-foto-t{font-family:var(--cg-mono);font-size:.62rem;letter-spacing:.06em;color:var(--cg-tinta-suave);text-transform:uppercase;}
.cg-foto .cg-foto-d{font-size:.76rem;color:var(--cg-tinta-suave);max-width:34ch;}
.cg-r32{aspect-ratio:3 / 2;}
.cg-r43{aspect-ratio:4 / 3;}

/* ---------- movimiento: revelado al entrar, editorial y una sola vez ------ */
/* ---------- cap. · prueba y respaldo: bento asimétrico ---------- */
/* Rejilla de 12 columnas con celdas de peso distinto: la evidencia grande
   (el sello) ancla; las demás acompañan. En móvil, una columna. */
.cg-bento{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;
  margin-top:var(--cap-brecha-contenido);
}
.cg-bento-celda{
  background:var(--cg-blanco);border:1px solid var(--cg-linea);border-radius:10px;
  padding:clamp(20px,2.6vw,30px);
  box-shadow:0 1px 2px rgba(12,35,64,.05);
  transition:transform .3s var(--cg-ease),box-shadow .3s var(--cg-ease),border-color .3s var(--cg-ease);
  grid-column:span 4;
}
.cg-bento-celda:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(12,35,64,.1);
  border-color:rgba(12,35,64,.25);
}
.cg-bento-celda h3{
  font-family:var(--cg-serif);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.3rem);
  color:var(--cg-navy);margin:0 0 8px;letter-spacing:-.01em;
}
.cg-bento-celda p{font-size:.92rem;line-height:1.6;color:var(--cg-tinta-suave);margin:0;}
.cg-bento-celda ul{margin:12px 0 0;padding-left:18px;font-size:.92rem;line-height:1.75;color:var(--cg-tinta);}
.cg-bento-mono{
  display:inline-block;margin-top:14px;padding:5px 10px;
  font-family:var(--cg-mono);font-size:.72rem;letter-spacing:.03em;color:var(--cg-tinta-suave);
  background:var(--cg-papel);border:1px solid var(--cg-linea);border-radius:6px;
}
/* La celda ancla: el sello — superficie navy con el oro encima, para que
   la sección clara tenga la misma profundidad que las bandas azules. */
.cg-bento-sello{
  grid-column:span 5;grid-row:span 2;
  background:var(--cg-navy);border-color:rgba(255,255,255,.14);
}
.cg-bento-sello h3{color:#fff;}
.cg-bento-sello p{color:rgba(255,255,255,.72);}
.cg-bento-sello ul{color:rgba(255,255,255,.85);}
.cg-bento-sello:hover{border-color:rgba(227,177,90,.45);}
/* Las evidencias documentales, en papel con jerarquía de documento. */
.cg-bento-doc{background:var(--cg-papel);}
.cg-bento-doc h3{padding-bottom:10px;border-bottom:1px solid var(--cg-linea);margin-bottom:10px;}
.cg-sello-marca{
  display:inline-block;margin-bottom:12px;padding:3px 10px;
  font-family:var(--cg-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cg-oro);border:1px solid rgba(138,106,34,.4);border-radius:980px;
}
.cg-bento-sello h3{font-size:clamp(1.35rem,2.2vw,1.7rem);}
.cg-bento-cifra{grid-column:span 4;display:flex;flex-direction:column;justify-content:flex-end;}
.cg-bento-cifra b,.cg-bento-cero b{
  font-family:var(--cg-serif);font-weight:600;font-size:clamp(2.6rem,4.5vw,3.6rem);
  line-height:1;color:var(--cg-navy);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cg-bento-cifra p{margin-top:10px;}
/* Reparto asimétrico junto al ancla de 5: filas de 4+3 y 3+4. */
.cg-bento-c3{grid-column:span 3;}
/* El 0% es franja completa y NO cuenta: contar desde otra cifra
   comunicaría una comisión que no existe. Aparece con el revelado común
   y un breve énfasis de borde. */
.cg-bento-cero{grid-column:span 12;display:flex;align-items:center;gap:clamp(16px,3vw,34px);}
.cg-bento-cero p{flex:1;font-size:.95rem;}
.cg-bento-cero.es-visible{animation:cg-cero-borde 1.1s var(--ease-interface) .45s both;}
@keyframes cg-cero-borde{
  0%,100%{border-color:var(--cg-linea);}
  45%{border-color:rgba(201,60,23,.6);}
}
@media (max-width:880px){
  .cg-bento{grid-template-columns:1fr 1fr;}
  .cg-bento-celda,.cg-bento-sello,.cg-bento-cero{grid-column:span 2;grid-row:auto;}
  .cg-bento-cifra{grid-column:span 1;}
  .cg-bento-cero{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* ---------- cap. · un caso completo (línea de tiempo editorial) ---------- */
/* Lámina del expediente: título a la izquierda, cronología a la derecha. */
.cg-caso-2col{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.cg-caso-2col .cg-caso{margin-top:0;max-width:none;}
@media (max-width:900px){.cg-caso-2col{grid-template-columns:1fr;gap:20px;}}
.cg-caso{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;max-width:720px;}
.cg-caso-hito{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.cg-caso-hito:last-child{border-bottom:0;}
.cg-caso-fecha{
  font-family:var(--cg-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding-top:5px;white-space:nowrap;
}
.cg-caso-hito b{
  display:block;font-family:var(--cg-serif);font-weight:600;font-size:1.08rem;
  color:#fff;margin-bottom:4px;letter-spacing:-.005em;
}
.cg-caso-hito p{margin:0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.72);}
.cg-caso-nota{margin:22px 0 0;font-size:.78rem;color:rgba(255,255,255,.45);}
@media (max-width:520px){
  .cg-caso-hito{grid-template-columns:1fr;gap:4px;}
  .cg-caso-fecha{padding-top:0;}
}

/* Apariciones — compuerta .motion-ready: la agrega el JS solo después de
   inicializar el controlador. Si JavaScript falla, TODO queda visible. La
   transición vive en el estado visible: entra animado, nunca "des-entra". */
.motion-ready [data-reveal]{opacity:0;transform:translate3d(0,var(--motion-distance),0);}
.motion-ready [data-reveal].es-visible{
  opacity:1;transform:translate3d(0,0,0);
  transition:opacity var(--motion-reveal) var(--ease-interface),
             transform var(--motion-reveal) var(--ease-interface);
}
/* Órbita del héroe: la frase sube (750 ms), la elipse se dibuja completa
   (1000 ms) y recién entonces se deja ver el segmento, ya en su recorrido
   continuo. Sin motion-ready, todo queda visible desde el primer cuadro. */
.motion-ready .cg-eyebrow.hero-kicker-orbit[data-reveal].es-visible{
  transition-duration:750ms;transition-timing-function:cubic-bezier(.22,1,.36,1);
}
@media (max-width:760px){
  .cg-eyebrow.hero-kicker-orbit{--motion-distance:8px;}
}
.motion-ready .hero-kicker-orbit .hero-kicker-orbit__track{
  stroke-dasharray:100;stroke-dashoffset:100;
}
.motion-ready .hero-kicker-orbit.es-visible .hero-kicker-orbit__track{
  animation:hero-orbit-dibuja 1000ms cubic-bezier(.22,1,.36,1) 250ms forwards;
}
@keyframes hero-orbit-dibuja{to{stroke-dashoffset:0;}}

/* Proceso: el panel entra desde la derecha y cada fila numerada (círculo +
   título + descripción, una sola unidad) lo sigue en cadena. Solo transform
   y opacity; el desplazamiento se recorta en la sección para no crear
   scroll horizontal — clip no genera contenedor de scroll y deja pasar la
   sombra vertical del panel (por eso NO es el overflow-x:hidden global que
   este archivo rechaza más arriba). */
#como-funciona{overflow-x:clip;}
.motion-ready #como-funciona .cg-pasos[data-reveal]:not(.es-visible){
  opacity:0;transform:translate3d(var(--pasos-entrada,120px),0,0);
}
.motion-ready #como-funciona .cg-pasos[data-reveal].es-visible{
  transition-duration:850ms;
  transition-timing-function:cubic-bezier(.16,1,.3,1);
}
.motion-ready #como-funciona .cg-paso[data-reveal]:not(.es-visible){
  opacity:0;transform:translate3d(var(--paso-entrada,42px),0,0);
}
.motion-ready #como-funciona .cg-paso[data-reveal].es-visible{
  transition-duration:600ms;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
@media (max-width:760px){
  #como-funciona .cg-pasos{--pasos-entrada:48px;--paso-entrada:24px;}
}
/* La línea vertical se dibuja UNA vez, de arriba hacia abajo, avanzando
   junto con las filas: parte ~300 ms después del panel (240 de espera del
   panel + 300 ≈ 540 desde la activación). */
.motion-ready .cg-pasos::before{transform:scaleY(0);transform-origin:top;}
.cg-pasos.es-activa::before{transform:scaleY(1);transition:transform 900ms cubic-bezier(.22,1,.36,1) 540ms;}
.motion-ready .cg-paso .cg-paso-num{border-color:var(--cg-linea);color:var(--cg-tinta-suave);}
.cg-paso.es-visible .cg-paso-num{
  border-color:var(--cg-acento);color:var(--cg-acento);
  transition:border-color 300ms var(--ease-interface) 120ms,color 300ms var(--ease-interface) 120ms;
}
.cg-plan{transition:transform .3s var(--cg-ease),box-shadow .3s var(--cg-ease);}
.cg-plan:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(12,35,64,.09);}
.cg-faq-boton{transition:color .2s var(--cg-ease);}
.cg-faq-boton:hover{color:var(--cg-acento);}

@media (prefers-reduced-motion:reduce){
  .cg-velo-tema{transition:none;}
  .es-vista-nueva [data-reveal]{animation:none;}
  .es-enfasis{animation:none;}
  .motion-ready [data-reveal],.motion-ready [data-reveal].es-visible{opacity:1;transform:none;transition:none;}
  .motion-ready #como-funciona .cg-pasos[data-reveal]:not(.es-visible),
  .motion-ready #como-funciona .cg-paso[data-reveal]:not(.es-visible){opacity:1;transform:none;transition:none;}
  .motion-ready .cg-pasos::before,.cg-pasos.es-activa::before{transform:none;transition:none;}
  .motion-ready .cg-ledger::before,.cg-ledger.es-activa::before{transform:none;transition:none;}
  .cg-paso.es-visible .cg-paso-num{transition:none;}
  .cg-bento-cero.es-visible{animation:none;}
  .cg-btn,.cg-menu-btn span,.cg-bento-celda,.cg-plan,.cg-nav-links a,
  .cg-btn-texto::after,.cg-mod-flecha,.cg-carrusel-btn,.cg-duo-mitad,.cg-nav{transition:none;}
  /* el carrusel y sus tarjetas quedan operativos con cambios inmediatos */
  .cg-pista,.cg-modulo{transition-duration:.01ms;}
  .cg-btn:hover,.cg-bento-celda:hover,.cg-plan:hover,.cg-modulo:hover{transform:none;}
  .cg-modulo:hover .cg-mod-flecha{transform:none;}
  .cg-duo-mitad:hover{filter:none;}
  .cg-nav-panel,.cg-nav-boton svg,.cg-nav-panel-grid a,
  .cg-nav-panel-grid a b,.cg-nav-panel-grid a b::after{transition:none;}
  .cg-nav-panel{transform:none;}
  .cg-nav-panel-grid a:hover,.cg-nav-panel-grid a:focus-visible{transform:none;}
  /* título de módulos: completo al instante, sin ciclos */
  .cg-tit .cg-tit-p{opacity:1 !important;animation:none !important;transition:opacity 150ms;}
  .cg-fuente-arcos::before,.cg-fuente-arcos::after{animation:none;}
  .orbit-red-runner,.orbit-dots-a,.orbit-dots-b{animation:none;stroke-dashoffset:0;}
  .orbits-wrapper{opacity:1;transform:none;transition:none;}
  .cg-timbre-planetas{animation:none;}
  .cg-fuente-conecta{transition:none;}
  .cg-tm-carta{animation:none;}
}

/* =========================================================================
   FORMULARIOS DE REGISTRO
   -------------------------------------------------------------------------
   Superficie única organizada por secciones numeradas, no seis tarjetas
   flotantes. El recurso que separa es el aire y una línea muy suave; el
   número da el ritmo editorial.

   Todo lo de acá es presentación: ni un id, name o clase que la lógica de
   app.js necesita fue tocado. Dos detalles que condicionan el diseño:
   el texto de cada chip ES el dato que se envía (por eso el check de
   selección es un pseudo-elemento, nunca texto), y #referencias solo puede
   contener sus inputs (la lógica cuenta sus <input> para numerarlos).
   ========================================================================= */

/* La página de registro respira sobre el fondo cálido; el formulario es la
   superficie blanca. */
.view#view-reg-comunidad,
.view#view-reg-proveedor{background:transparent;}
.reg{max-width:1180px;margin:0 auto;padding:var(--e-8) 0 var(--e-14);}

/* ---------- encabezado + tarifa ---------- */
.reg-intro{
  display:grid;grid-template-columns:1fr 360px;gap:var(--e-10);
  align-items:start;margin-bottom:var(--e-8);
}
.reg-rotulo{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--f-accion);margin-bottom:var(--e-2);
}
.reg-titulo{
  font-family:var(--fuente-titulo);
  font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.025em;
  font-weight:600;color:var(--f-navy);margin-bottom:var(--e-3);
}
.reg-bajada{font-size:16px;line-height:1.65;color:var(--grey);max-width:56ch;text-wrap:pretty;}
.reg-seguridad{
  display:flex;align-items:flex-start;gap:8px;margin-top:var(--e-4);
  font-size:13px;color:var(--grey);
}
.reg-seguridad svg{width:16px;height:16px;color:var(--f-verde);flex-shrink:0;margin-top:1px;}

/* Los tres atributos del proveedor: en línea, sin convertirse en tarjetas. */
.reg-atributos{
  list-style:none;padding:var(--e-4) 0 0;margin:var(--e-4) 0 0;
  border-top:1px solid var(--line);
  display:flex;gap:var(--e-6);flex-wrap:wrap;
}
.reg-atributos li{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--f-navy);
}
.reg-atributos svg{width:17px;height:17px;color:var(--f-verde);flex-shrink:0;}

/* ---------- tarjeta de tarifa ---------- */
.tarifa{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:var(--e-5) var(--e-6) var(--e-6);box-shadow:var(--f-sombra);
}
.tarifa-rotulo{
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grey);padding-bottom:var(--e-3);margin-bottom:var(--e-4);
  border-bottom:1px solid var(--line);
}
.tarifa-monto{
  font-family:var(--fuente-titulo);font-size:40px;font-weight:600;
  color:var(--f-navy);letter-spacing:-.028em;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:var(--e-4);
}
.tarifa-monto span{
  display:block;font-family:var(--fuente-ui);font-size:13px;font-weight:600;
  color:var(--grey);letter-spacing:0;margin-top:6px;
}
.tarifa-texto{font-size:13.5px;color:var(--dark);line-height:1.6;margin-bottom:var(--e-3);text-wrap:pretty;}
/* La promesa que más pesa en la decisión: fondo verde muy suave, sin gritar. */
.tarifa-clave{
  font-size:13.5px;line-height:1.6;color:var(--f-verde);font-weight:600;
  background:var(--f-verde-suave);border-radius:var(--radius);
  padding:var(--e-3) var(--e-4);margin-bottom:var(--e-3);text-wrap:pretty;
}
.tarifa-pie{font-size:12.5px;color:var(--grey);line-height:1.55;text-wrap:pretty;}

@media (max-width:900px){
  .reg-intro{grid-template-columns:1fr;gap:var(--e-5);}
  .reg-atributos{flex-direction:column;gap:var(--e-3);}
}

/* ---------- superficie del formulario ---------- */
.reg-form{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--f-sombra);padding:var(--e-8) var(--e-10) var(--e-6);
}

/* ---------- sección numerada ---------- */
.fsec{padding-bottom:var(--e-8);}
.fsec + .fsec{border-top:1px solid var(--line);padding-top:var(--e-8);}
.fsec-cabecera{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e-4);
  align-items:start;margin-bottom:var(--e-6);
}
.fsec-num{
  font-family:var(--fuente-mono);font-size:12px;font-weight:600;
  color:var(--f-accion);letter-spacing:.06em;padding-top:5px;
  font-variant-numeric:tabular-nums;
}
.fsec-cabecera h2{
  font-size:20px;font-weight:600;color:var(--f-navy);letter-spacing:-.012em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.fsec-cabecera p{font-size:13.5px;color:var(--grey);margin-top:5px;max-width:64ch;text-wrap:pretty;}
.fsec-opcional{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);background:var(--light);border-radius:var(--radius-pill);
  padding:3px 10px;
}
.fsec-campos{display:flex;flex-direction:column;gap:var(--e-5);}

/* ---------- campos ---------- */
.ffila{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-5);align-items:start;}
.fcampo{display:flex;flex-direction:column;}
.fcampo[hidden]{display:none;} /* display:flex no debe anular hidden */
.fterminos{flex-direction:row;gap:10px;align-items:flex-start;}
.fterminos input[type="checkbox"]{margin-top:4px;width:16px;height:16px;flex-shrink:0;}
.fterminos label{margin-bottom:0;font-weight:500;}
.fcampo label,.fcampo > .etiqueta{
  font-size:13.5px;font-weight:600;color:var(--f-navy);
  margin-bottom:8px;line-height:1.4;
}
.req{color:var(--f-accion);font-weight:600;}

.fcampo input:not([type="checkbox"]):not([type="file"]),
.fcampo select,
.fcampo textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--f-navy);
  background:var(--white);
  border:1px solid var(--f-borde);border-radius:9px;
  padding:13px 14px;min-height:50px;
  transition:border-color 170ms var(--ease-salida),
             box-shadow 170ms var(--ease-salida);
}
.fcampo textarea{min-height:120px;resize:vertical;line-height:1.6;padding-bottom:30px;}
.fcampo select{cursor:pointer;}

.fcampo input::placeholder,.fcampo textarea::placeholder{color:#8C97A6;}

.fcampo input:hover:not(:disabled),
.fcampo select:hover:not(:disabled),
.fcampo textarea:hover{border-color:var(--f-borde-hover);}

/* El foco no reemplaza el outline accesible: lo acompaña con un halo suave. */
.fcampo input:focus-visible,
.fcampo select:focus-visible,
.fcampo textarea:focus-visible{
  border-color:var(--f-verde);
  box-shadow:0 0 0 3px rgba(13,91,75,.14);
  outline:2px solid transparent;   /* visible en modo alto contraste */
  outline-offset:0;
}
.fcampo select:disabled{background:#F4F6F9;color:#8C97A6;cursor:not-allowed;}

.fcampo input[type="file"]{
  width:100%;font-family:inherit;font-size:13.5px;color:var(--dark);
  background:var(--f-fondo);border:1px dashed var(--f-borde);border-radius:9px;
  padding:14px;min-height:50px;cursor:pointer;
}
.fcampo input[type="file"]:hover{border-color:var(--f-verde);background:var(--f-verde-suave);}

.fayuda{font-size:12.5px;color:var(--grey);margin-top:7px;line-height:1.5;text-wrap:pretty;}
.fcampo-plano label{font-size:12.5px;}

/* Contador del textarea, dentro del propio campo. */
.fcontador-wrap{position:relative;}
.fcontador{
  position:absolute;right:12px;bottom:10px;
  font-size:12px;color:var(--grey);font-variant-numeric:tabular-nums;
  background:var(--white);padding:2px 4px;border-radius:4px;pointer-events:none;
}

/* ---------- estado de error ---------- */
.fcampo.tiene-error input,
.fcampo.tiene-error select,
.fcampo.tiene-error textarea{border-color:var(--f-error);}
.fcampo.tiene-error input:focus-visible,
.fcampo.tiene-error textarea:focus-visible{box-shadow:0 0 0 3px rgba(179,38,30,.13);}
.ferror{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--f-error);margin-top:7px;font-weight:500;
}
.ferror::before{
  content:"";width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:var(--f-error);
  /* El aviso no depende solo del color: lleva su propio signo. */
  -webkit-mask:radial-gradient(circle,transparent 42%,#000 43%) center/100% 100%;
  mask:radial-gradient(circle,transparent 42%,#000 43%) center/100% 100%;
}

/* ---------- chips de rubro ---------- */
.fchips{display:flex;flex-wrap:wrap;gap:9px;}
.fchips .chip{
  font-family:inherit;font-size:13.5px;font-weight:500;
  padding:11px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--f-borde);background:var(--white);color:var(--f-navy);
  cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;
  transition:border-color 160ms var(--ease-salida),
             background-color 160ms var(--ease-salida);
}
.fchips .chip:hover{border-color:var(--f-navy);background:#F4F7FA;}
.fchips .chip.selected{
  border-color:var(--f-accion);background:#FCF0EB;color:var(--f-navy);
  font-weight:600;padding-left:34px;position:relative;
}
/* El check es un pseudo-elemento a propósito: el textContent del chip es el
   dato que se envía al servidor, así que no puede llevar texto extra. */
.fchips .chip.selected::before{
  content:"";position:absolute;left:14px;top:50%;
  width:9px;height:5px;margin-top:-4px;
  border-left:2px solid var(--f-accion);border-bottom:2px solid var(--f-accion);
  transform:rotate(-45deg);
}
.fchips-zona .chip.selected{border-color:var(--f-verde);background:var(--f-verde-suave);}
.fchips-zona .chip.selected::before{border-color:var(--f-verde);}
.fchips-zona .chip.chip-national.selected{border-color:var(--f-accion);background:#FCF0EB;}
.fchips-zona .chip.chip-national.selected::before{border-color:var(--f-accion);}

.fañadir{
  display:grid;grid-template-columns:1fr auto;gap:var(--e-3);align-items:end;
  padding-top:var(--e-4);border-top:1px solid var(--line);
}

/* ---------- zona de cobertura ---------- */
.fzona{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--e-3);align-items:end;}
.fzona-amplia{
  display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;
  padding-top:var(--e-4);border-top:1px solid var(--line);
}
.fzona-amplia > span{font-size:13px;color:var(--grey);}

/* Acción secundaria de texto: se diferencia claramente de los selects. */
.fenlace-accion{
  background:none;border:none;padding:8px 0;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--f-navy);
  border-bottom:1.5px solid var(--f-borde);min-height:44px;
  transition:border-color 160ms var(--ease-salida),color 160ms var(--ease-salida);
}
.fenlace-accion:hover{color:var(--f-accion);border-bottom-color:var(--f-accion);}

/* ---------- referencias ---------- */
.frefs{display:flex;flex-direction:column;gap:var(--e-3);counter-reset:ref;}
.frefs input{
  width:100%;font-family:inherit;font-size:15px;color:var(--f-navy);
  background:var(--white);border:1px solid var(--f-borde);border-radius:9px;
  padding:13px 14px;min-height:50px;
  transition:border-color 170ms var(--ease-salida),box-shadow 170ms var(--ease-salida);
}
.frefs input::placeholder{color:#8C97A6;}
.frefs input:hover{border-color:var(--f-borde-hover);}
.frefs input:focus-visible{
  border-color:var(--f-verde);box-shadow:0 0 0 3px rgba(13,91,75,.14);
  outline:2px solid transparent;
}

/* ---------- emergencias 24/7 ---------- */
.femergencia{
  background:var(--f-verde-suave);border:1px solid rgba(13,91,75,.18);
  border-radius:10px;padding:var(--e-4) var(--e-5);
}
.femergencia-check{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  font-size:15px;font-weight:600;color:var(--f-navy);min-height:44px;
}
.femergencia-check input{width:19px;height:19px;accent-color:var(--f-verde);cursor:pointer;flex-shrink:0;}
.femergencia .fayuda{margin-top:2px;max-width:74ch;}

/* ---------- documentos ---------- */
.fdocs{display:flex;flex-direction:column;gap:10px;}
.fdocs .upload-row{
  display:flex;align-items:center;gap:var(--e-3);
  background:var(--white);border:1px solid var(--f-borde);border-style:solid;
  border-radius:10px;padding:12px 14px;margin-bottom:0;min-height:56px;
  transition:border-color 160ms var(--ease-salida);
}
.fdocs .upload-row:hover{border-color:var(--f-borde-hover);}
.fdoc-icono{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--f-verde-suave);color:var(--f-verde);
}
.fdoc-icono svg{width:19px;height:19px;}
.fdocs .upload-name-input{
  flex:1;min-width:0;border:none;background:transparent;font-family:inherit;
  font-size:14.5px;font-weight:500;color:var(--f-navy);
  padding:11px 0;min-height:44px;
}
.fdocs .upload-name-input:focus-visible{
  outline:2px solid var(--f-verde);outline-offset:3px;border-radius:4px;
}
/* El estado no depende solo del color: lleva el check y la palabra. */
.fdocs .tag{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:12px;font-weight:600;color:var(--f-verde);
  background:var(--f-verde-suave);border:1px solid rgba(13,91,75,.22);
  padding:5px 11px;border-radius:var(--radius-pill);
}
.fdocs .tag::before{
  content:"";width:8px;height:4px;
  border-left:1.8px solid var(--f-verde);border-bottom:1.8px solid var(--f-verde);
  transform:rotate(-45deg) translateY(-1px);
}

/* ---------- botones del formulario ---------- */
.fbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:15.5px;font-weight:600;line-height:1;
  padding:16px 28px;min-height:52px;
  background:var(--f-accion);color:#fff;border:none;border-radius:10px;
  cursor:pointer;white-space:nowrap;
  transition:background-color 170ms var(--ease-salida),transform 120ms var(--ease-salida);
}
.fbtn:hover{background:var(--f-accion-hover);}
.fbtn:active{transform:translateY(1px);}
.fbtn:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.fbtn svg{width:18px;height:18px;flex-shrink:0;}

.fbtn-secundario{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:600;
  padding:12px 18px;min-height:48px;
  background:var(--white);color:var(--f-navy);
  border:1px solid var(--f-borde);border-radius:9px;cursor:pointer;white-space:nowrap;
  transition:border-color 160ms var(--ease-salida),background-color 160ms var(--ease-salida);
}
.fbtn-secundario:hover:not(:disabled){border-color:var(--f-navy);background:#F4F7FA;}
.fbtn-secundario:disabled{opacity:.5;cursor:not-allowed;}
.fbtn-secundario svg{width:16px;height:16px;flex-shrink:0;}

/* ---------- cierre del formulario ---------- */
.fcierre{
  display:grid;grid-template-columns:1fr auto;gap:var(--e-6);align-items:center;
  margin-top:var(--e-4);padding:var(--e-5) var(--e-6);
  background:var(--f-fondo);border:1px solid var(--line);border-radius:10px;
}
.fcierre-que-sigue{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:var(--dark);line-height:1.55;max-width:62ch;
  margin-bottom:var(--e-3);text-wrap:pretty;
}
.fcierre-que-sigue svg{width:17px;height:17px;color:var(--f-navy);flex-shrink:0;margin-top:2px;}
.fcierre-seguridad{
  display:flex;align-items:flex-start;gap:9px;
  font-size:12.5px;color:var(--grey);line-height:1.5;max-width:62ch;text-wrap:pretty;
}
.fcierre-seguridad svg{width:15px;height:15px;color:var(--f-verde);flex-shrink:0;margin-top:2px;}
.fcierre-seguridad b{color:var(--f-navy);}

.reg-form .form-msg{margin-top:var(--e-4);font-size:14px;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .reg-form{padding:var(--e-6) var(--e-6) var(--e-5);}
}
@media (max-width:768px){
  .reg{padding:var(--e-5) 0 var(--e-10);}
  .ffila,.fzona{grid-template-columns:1fr;gap:var(--e-4);}
  .fañadir{grid-template-columns:1fr;}
  .fcierre{grid-template-columns:1fr;gap:var(--e-4);}
  .fbtn{width:100%;}
  .fbtn-secundario{width:100%;}
  .fzona-amplia{flex-direction:column;align-items:stretch;gap:8px;}
  .fenlace-accion{text-align:left;border-bottom:none;border:1px solid var(--f-borde);border-radius:9px;padding:12px 14px;}
  .fenlace-accion:hover{border-color:var(--f-accion);}
}
@media (max-width:480px){
  .reg-form{padding:var(--e-5) var(--e-4) var(--e-4);border-radius:10px;}
  .fsec-cabecera{grid-template-columns:1fr;gap:6px;}
  .fsec-num{padding-top:0;}
  .tarifa{padding:var(--e-4) var(--e-5) var(--e-5);}
  .tarifa-monto{font-size:34px;}
}

/* =========================================================================
   REGISTRO COMO EXPEDIENTE DIGITAL — rediseño exclusivamente visual
   -------------------------------------------------------------------------
   El formulario se apoya sobre una superficie de trabajo gris; el expediente
   es una pieza central con tinte azul muy claro y campos blancos. Ni un id,
   name, campo, validación o payload cambia: todo lo de este bloque ANULA
   presentación del bloque anterior, solo dentro de las dos vistas de
   registro. La landing, el panel y los portales no se tocan.
   ========================================================================= */

/* Superficie de trabajo: a sangre completa (rompe el ancho del wrap sin
   tocar el layout global), desde debajo de la navegación. */
#view-reg-comunidad,#view-reg-proveedor{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  background:linear-gradient(180deg,#E8EAEC 0%,#F0F1F1 45%,#ECEEEF 100%);
  min-height:calc(100dvh - 60px);
}

/* El expediente: centrado, tinte azul claro, borde fino, sombra discreta. */
#view-reg-comunidad .reg,#view-reg-proveedor .reg{
  max-width:940px;width:calc(100% - 32px);
  margin:48px auto 64px;
  padding:clamp(24px,4vw,44px) clamp(18px,3.5vw,40px) clamp(20px,3vw,36px);
  background:#EEF3F8;border:1px solid #D6DDE4;border-radius:14px;
  box-shadow:0 18px 48px rgba(12,35,64,.09);
}

/* Cabecera del expediente: título serif navy + descripción, cerrada por un
   hairline. La tarifa/atributos existentes se conservan, como pieza blanca
   sobre la superficie azul. */
#view-reg-comunidad .reg-intro,#view-reg-proveedor .reg-intro{
  border-bottom:1px solid #CCD6E0;
  padding-bottom:clamp(20px,3vw,30px);margin-bottom:clamp(22px,3vw,32px);
}
#view-reg-comunidad .reg-titulo,#view-reg-proveedor .reg-titulo{
  font-size:clamp(30px,3vw,38px);
}
#view-reg-comunidad .reg-bajada,#view-reg-proveedor .reg-bajada{font-size:15px;}
#view-reg-comunidad .reg-rotulo,#view-reg-proveedor .reg-rotulo{color:#5F6B78;}
#view-reg-comunidad .tarifa,#view-reg-proveedor .tarifa{
  border-color:#D6DDE4;box-shadow:0 8px 22px rgba(12,35,64,.07);
}

/* El formulario ya no es una segunda tarjeta: vive directo sobre la
   superficie azul. Nada de tarjetas dentro de tarjetas. */
#view-reg-comunidad .reg-form,#view-reg-proveedor .reg-form{
  background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;
}

/* Secciones: título navy + divisor fino. La numeración decorativa se retira
   (los números eran spans aria-hidden: ocultarlos no cambia nada funcional). */
#view-reg-comunidad .fsec-num,#view-reg-proveedor .fsec-num{display:none;}
#view-reg-comunidad .fsec-cabecera,#view-reg-proveedor .fsec-cabecera{
  grid-template-columns:1fr;margin-bottom:18px;
}
#view-reg-comunidad .fsec-cabecera h2,#view-reg-proveedor .fsec-cabecera h2{font-size:19px;}
#view-reg-comunidad .fsec + .fsec,#view-reg-proveedor .fsec + .fsec{
  border-top:1px solid #CCD6E0;padding-top:32px;
}
#view-reg-comunidad .fsec,#view-reg-proveedor .fsec{padding-bottom:30px;}
#view-reg-comunidad .fañadir,#view-reg-proveedor .fañadir,
#view-reg-comunidad .fzona-amplia,#view-reg-proveedor .fzona-amplia{border-top-color:#CCD6E0;}

/* Campos blancos sobre el azul: borde sereno, radio moderado, 48px de alto. */
#view-reg-comunidad .fcampo input:not([type="checkbox"]):not([type="file"]),
#view-reg-proveedor .fcampo input:not([type="checkbox"]):not([type="file"]),
#view-reg-comunidad .fcampo select,#view-reg-proveedor .fcampo select,
#view-reg-comunidad .fcampo textarea,#view-reg-proveedor .fcampo textarea,
#view-reg-comunidad .frefs input,#view-reg-proveedor .frefs input{
  background:#FFFFFF;border:1px solid #B8C5D2;border-radius:8px;
  min-height:48px;padding:12px 14px;
}
#view-reg-comunidad .fcampo label,#view-reg-proveedor .fcampo label{font-size:13.5px;}
#view-reg-comunidad .fayuda,#view-reg-proveedor .fayuda{color:#5F6B78;font-size:12.5px;}

/* Foco navy, claramente visible con teclado. */
#view-reg-comunidad .fcampo input:focus-visible,
#view-reg-proveedor .fcampo input:focus-visible,
#view-reg-comunidad .fcampo select:focus-visible,
#view-reg-proveedor .fcampo select:focus-visible,
#view-reg-comunidad .fcampo textarea:focus-visible,
#view-reg-proveedor .fcampo textarea:focus-visible,
#view-reg-comunidad .frefs input:focus-visible,
#view-reg-proveedor .frefs input:focus-visible{
  border-color:#0C2340;
  box-shadow:0 0 0 3px rgba(12,35,64,.13);
}

/* Solo lectura y deshabilitado: distinguibles, nunca confundibles con un
   campo editable. */
#view-reg-comunidad .fcampo input[readonly],#view-reg-proveedor .fcampo input[readonly],
#view-reg-comunidad .fcampo select:disabled,#view-reg-proveedor .fcampo select:disabled,
#view-reg-comunidad .fcampo input:disabled,#view-reg-proveedor .fcampo input:disabled{
  background:#F1F3F5;border-color:#CCD6E0;color:#41505F;
}

/* Carga de archivos: campo blanco con borde punteado sereno. */
#view-reg-comunidad .fcampo input[type="file"],#view-reg-proveedor .fcampo input[type="file"]{
  background:#FFFFFF;border:1px dashed #B8C5D2;border-radius:8px;
}

/* Chips y contador viven sobre blanco igual que antes; solo el borde
   se serena para calzar con la paleta del expediente. */
#view-reg-comunidad .fchips .chip,#view-reg-proveedor .fchips .chip{border-color:#B8C5D2;}
#view-reg-comunidad .fcontador,#view-reg-proveedor .fcontador{background:#FFFFFF;}

/* Área de acciones: zona final integrada, divisor arriba, fondo apenas más
   profundo dentro de la misma paleta, acción principal en navy. */
#view-reg-comunidad .fcierre,#view-reg-proveedor .fcierre{
  background:#E7EEF5;border:1px solid #CCD6E0;border-radius:10px;
  margin-top:26px;padding:22px 24px;
}
.fcierre-simple{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.fcierre-simple .form-msg{align-self:stretch;text-align:right;}
#view-reg-comunidad .fbtn,#view-reg-proveedor .fbtn{
  background:#0C2340;
}
#view-reg-comunidad .fbtn:hover:not(:disabled),
#view-reg-proveedor .fbtn:hover:not(:disabled){background:#14335C;}
#view-reg-comunidad .fbtn-secundario,#view-reg-proveedor .fbtn-secundario{border-color:#B8C5D2;}

/* Entrada muy sutil del expediente; el resto del movimiento ya es sobrio. */
#view-reg-comunidad .reg,#view-reg-proveedor .reg{
  animation:freg-entra 220ms var(--ease-salida);
}
@keyframes freg-entra{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

@media (max-width:768px){
  #view-reg-comunidad .reg,#view-reg-proveedor .reg{
    width:calc(100% - 32px);margin:20px auto 36px;
  }
  #view-reg-comunidad .fcierre,#view-reg-proveedor .fcierre{padding:18px 16px;}
  .fcierre-simple{align-items:stretch;}
  .fcierre-simple .form-msg{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  #view-reg-comunidad .reg,#view-reg-proveedor .reg{animation:none;}
}

/* ---------- cabecera unificada con la web pública ----------
   El registro y el panel usan el mismo azul de la landing: quien pasa de la
   web al formulario no debe sentir que cambió de aplicación. La navegación
   y su comportamiento quedan exactamente iguales. */
.topbar{
  background:var(--cg-navy);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.topbar .brand-mark{color:#fff;}
.topbar .brand-name{color:#fff;}
.topbar .brand-sub{color:rgba(255,255,255,.62);}
.topbar .nav-link{color:rgba(255,255,255,.8);}
.topbar .nav-link:hover{background:rgba(255,255,255,.1);color:#fff;}
.topbar .nav-link.is-active{background:var(--f-accion);color:#fff;}
.topbar a.nav-link{text-decoration:none;display:inline-flex;align-items:center;}
.topbar a:focus-visible,.topbar button:focus-visible{outline-color:#fff;}

/* El mensaje de éxito quedaba en 4.33 sobre su propio fondo verde claro:
   la tinta verde oscura lo lleva a 5.5. */
.form-msg.ok{color:var(--teal-tinta);}
.reg-form .form-msg.ok{background:var(--f-verde-suave);color:var(--f-verde);}
.reg-form .form-msg.err{background:rgba(179,38,30,.08);color:var(--f-error);}

@media (max-width:480px){
  /* "Enviar solicitud de verificación" no cabe en una línea a 390px: con
     white-space:nowrap el botón forzaba 15px de desborde en su contenedor.
     Se le permite envolver y se ajusta el aire lateral. */
  .fbtn{
    white-space:normal;text-align:center;line-height:1.35;
    padding:15px 20px;width:100%;
  }
  .fcierre{padding:var(--e-4);}
  .fbtn-secundario{white-space:normal;}
}

/* =========================================================================
   ÁREA PRIVADA — módulos de comunidad y proveedor
   -------------------------------------------------------------------------
   No es un dashboard: es el expediente de una contratación. La comunidad
   solicita, compara y adjudica; el proveedor descubre oportunidades y
   construye reputación. Todo lo que no ayude a responder "dónde estoy, qué
   pasa, qué requiere mi atención, qué puedo hacer y en qué estado va cada
   proceso" se saca de la pantalla.

   Recursos: tipografía, cifras, líneas, estados y aire. No tarjetas por dato,
   no un ícono por métrica, no degradados. La regla operativa es simple: si
   una línea divisoria resuelve la separación, no se crea una tarjeta.

   Prefijo gc- en todo para no chocar con la landing, el panel interno ni la
   capa de formularios, que conviven en esta misma hoja.
   ========================================================================= */

body.gc{background:var(--gc-bg);color:#16202B;}
.gc-app-container{width:min(1240px, calc(100% - 48px));margin:0 auto;}

/* ---------- cabecera del área privada ----------
   Sin "Cómo funciona", "Servicios" ni "Precios": eso es la landing. Acá solo
   marca, ayuda, lo que requiere atención y el perfil. */
.gc-head{
  background:var(--gc-navy);position:sticky;top:0;z-index:20;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gc-head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;}
.gc-brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:6px 2px;}
.gc-brand-mark{ /* isotipo sobre la cabecera navy */
  width:34px;height:34px;color:#fff;flex-shrink:0;display:block;
}
.gc-brand-name{color:#fff;font-weight:700;font-size:14px;line-height:1.15;letter-spacing:-.01em;}
.gc-head-acciones{display:flex;align-items:center;gap:4px;}
.gc-head-link{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:0;color:rgba(255,255,255,.8);
  font-family:inherit;font-size:13px;font-weight:600;
  min-height:44px;padding:0 12px;border-radius:8px;cursor:pointer;text-decoration:none;
  transition:background-color 180ms ease,color 180ms ease;
}
.gc-head-link:hover{background:rgba(255,255,255,.1);color:#fff;}
.gc-head-link .ico{width:17px;height:17px;stroke-width:1.6;}

/* Contador de atención: solo aparece si hay algo real que atender. */
.gc-notif{position:relative;min-width:44px;justify-content:center;}
.gc-notif-num{
  position:absolute;top:7px;right:6px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--gc-orange);color:#fff;
  font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--gc-navy);
}

/* ---------- perfil ---------- */
.gc-perfil{position:relative;}
.gc-perfil-btn{
  display:flex;align-items:center;gap:9px;background:transparent;border:0;cursor:pointer;
  color:#fff;font-family:inherit;min-height:44px;padding:0 8px 0 6px;border-radius:8px;
  transition:background-color 180ms ease;
}
.gc-perfil-btn:hover{background:rgba(255,255,255,.1);}
.gc-avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;
}
.gc-perfil-txt{text-align:left;line-height:1.25;min-width:0;}
.gc-perfil-txt b{display:block;font-size:12.5px;font-weight:600;color:#fff;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gc-perfil-txt span{display:block;font-size:12px;color:rgba(255,255,255,.6);}
.gc-perfil-btn .ico{width:16px;height:16px;color:rgba(255,255,255,.7);stroke-width:1.7;}
.gc-perfil-btn[aria-expanded="true"] .ico{transform:rotate(180deg);}

.gc-menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:248px;z-index:30;
  background:var(--gc-surface);border:1px solid var(--gc-border);border-radius:var(--gc-radio);
  box-shadow:0 2px 6px rgba(8,43,80,.06), 0 18px 40px rgba(8,43,80,.14);
  padding:6px;
}
.gc-menu[hidden]{display:none;}
.gc-menu-cabecera{padding:10px 12px 9px;border-bottom:1px solid var(--gc-border);margin-bottom:5px;}
.gc-menu-cabecera b{display:block;font-size:13.5px;color:var(--gc-navy);line-height:1.3;}
.gc-menu-cabecera span{display:block;font-size:12px;color:var(--gc-tinta-3);margin-top:2px;}
.gc-menu button,.gc-menu a{
  display:flex;align-items:center;width:100%;gap:9px;
  background:transparent;border:0;text-align:left;text-decoration:none;cursor:pointer;
  font-family:inherit;font-size:13px;color:#16202B;
  min-height:44px;padding:0 12px;border-radius:6px;
  transition:background-color 140ms ease;
}
.gc-menu button:hover,.gc-menu a:hover{background:#F1F4F8;}
.gc-menu .gc-menu-sep{height:1px;background:var(--gc-border);margin:5px 8px;}
.gc-menu .gc-menu-salir{color:var(--gc-orange-tinta);font-weight:600;}
.gc-menu .ico{width:16px;height:16px;color:var(--gc-tinta-3);}

/* ---------- cuerpo ---------- */
.gc-main{padding:28px 0 56px;}
.gc-cargando,.gc-error{padding:56px 0;max-width:56ch;}
.gc-cargando p,.gc-error p{color:var(--gc-tinta-2);font-size:14.5px;margin-top:6px;}

/* ---------- ficha de la entidad ----------
   Una cabecera, no seis tarjetas: identidad, atributos, estado y la única
   acción de edición. */
.gc-ficha{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px 22px;align-items:start;padding:6px 0 26px;
}
.gc-ficha-marca{
  width:74px;height:74px;border-radius:12px;grid-row:span 2;
  background:var(--gc-navy);color:#fff;display:grid;place-items:center;
  font-family:var(--fuente-titulo);font-size:26px;font-weight:600;letter-spacing:.01em;
}
.gc-ficha-marca.gc-ficha-marca-suave{
  background:#EEF1F5;color:var(--gc-navy);border:1px solid var(--gc-border);
}
.gc-ficha-marca .ico{width:32px;height:32px;stroke-width:1.4;}
.gc-ficha-cuerpo{min-width:0;}
.gc-ficha-nombre{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--fuente-titulo);font-size:30px;font-weight:600;
  color:var(--gc-navy);letter-spacing:-.02em;line-height:1.15;margin:0 0 6px;
}
.gc-ficha-datos{font-size:14px;color:var(--gc-tinta-2);line-height:1.6;}
.gc-ficha-datos b{color:#16202B;font-weight:600;}
.gc-ficha-rotulo{
  display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gc-tinta-3);margin-top:12px;
}
.gc-ficha-nota{font-size:13.5px;color:var(--gc-tinta-2);margin-top:10px;max-width:64ch;}
.gc-ficha-sello{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gc-green-tinta);background:rgba(20,125,104,.07);
  border:1px solid rgba(20,125,104,.4);border-radius:3px;
  padding:4px 10px;white-space:nowrap;
}
.gc-ficha-sello .ico{width:14px;height:14px;stroke-width:1.7;}
.gc-ficha-sello.gc-sello-pendiente{color:#7A5A10;background:rgba(122,90,16,.07);border-color:rgba(122,90,16,.35);}
.gc-ficha-sello.gc-sello-rechazado{color:#9E3312;background:rgba(158,51,18,.07);border-color:rgba(158,51,18,.35);}
.gc-ficha-actualizado{font-size:12px;color:var(--gc-tinta-3);margin-top:12px;}
.gc-ficha-accion{grid-column:3;grid-row:1;align-self:start;}

/* ---------- navegación operativa ----------
   Filete inferior, no botones tipo tarjeta. El contador es un número, no una
   píldora. */
.gc-tabs{
  display:flex;gap:2px;border-bottom:1px solid var(--gc-border);
  margin-bottom:24px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.gc-tab{
  position:relative;flex-shrink:0;
  background:transparent;border:0;border-bottom:3px solid transparent;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--gc-tinta-2);
  padding:0 18px;min-height:48px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
  transition:color 180ms ease,border-color 180ms ease;
}
.gc-tab:hover{color:var(--gc-navy);}
.gc-tab[aria-selected="true"]{color:var(--gc-navy);border-bottom-color:var(--gc-navy);}
.gc-tab-num{
  font-size:12px;font-weight:700;color:var(--gc-orange-tinta);
  font-variant-numeric:tabular-nums;
}
.gc-tab[aria-selected="true"] .gc-tab-num{color:var(--gc-orange-tinta);}
.gc-tabpanel[hidden]{display:none;}
.gc-tabpanel{animation:gc-entra 180ms ease;}
@keyframes gc-entra{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ---------- superficie ---------- */
.gc-panel{
  background:var(--gc-surface);border:1px solid var(--gc-border);
  border-radius:var(--gc-radio);box-shadow:var(--gc-sombra);
  margin-bottom:20px;
}
.gc-panel-cuerpo{padding:22px 24px;}
.gc-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 24px;border-bottom:1px solid var(--gc-border);
}
.gc-panel-head h2{font-size:17px;font-weight:600;color:var(--gc-navy);letter-spacing:-.01em;}
.gc-panel-head .gc-sub{font-size:13px;color:var(--gc-tinta-2);margin-top:3px;}

.gc-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start;}

/* ---------- franja de cifras ----------
   Una sola franja dividida por hairlines. Sin íconos, sin una tarjeta por
   número: el dato es la cifra. */
.gc-cifras{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;}
.gc-cifra{
  padding:22px 20px;border-left:1px solid var(--gc-border);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
}
.gc-cifra:first-child{border-left:0;}
.gc-cifra-num{
  font-family:var(--fuente-titulo);font-size:34px;font-weight:600;line-height:1;
  color:var(--gc-navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.gc-cifra-num.gc-cifra-vacia{color:var(--gc-tinta-3);}
.gc-cifra-rotulo{font-size:12.5px;color:var(--gc-tinta-2);line-height:1.35;max-width:15ch;}

/* ---------- bloques dentro de un panel ---------- */
.gc-bloque{padding:20px 24px 22px;}
.gc-bloque+.gc-bloque{border-top:1px solid var(--gc-border);}
.gc-bloque-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:14px;
}
.gc-bloque-head h2,.gc-bloque-head h3{font-size:16px;font-weight:600;color:var(--gc-navy);letter-spacing:-.01em;}
.gc-enlace{
  background:transparent;border:0;cursor:pointer;padding:6px 2px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--gc-navy);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--gc-border-fuerte);
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
}
.gc-enlace:hover{text-decoration-color:var(--gc-navy);}

/* ---------- expediente: la fila ----------
   Una solicitud no es una tarjeta: es un expediente con folio, asunto,
   antecedentes y estado. */
.gc-filas{border-top:1px solid var(--gc-border);}
.gc-fila{border-bottom:1px solid var(--gc-border);}
.gc-fila-cab{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto auto;
  gap:4px 18px;align-items:center;padding:16px 4px;
}
.gc-fila-folio{
  font-family:var(--fuente-mono);font-size:12px;line-height:1.35;
  color:var(--gc-tinta-3);letter-spacing:.01em;align-self:center;
}
.gc-fila-cuerpo{min-width:0;}
.gc-fila-titulo{
  font-size:15px;font-weight:600;color:var(--gc-navy);line-height:1.35;
  margin-bottom:3px;
}
.gc-fila-meta{font-size:12.5px;color:var(--gc-tinta-2);line-height:1.5;}
.gc-fila-meta b{color:#16202B;font-weight:600;}
.gc-fila-acc{display:flex;align-items:center;gap:8px;}

/* ---------- estados ----------
   Etiquetas planas, chicas, siempre con texto: el color acompaña, nunca es
   el único portador del significado. */
.gc-estado{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:3px;white-space:nowrap;
  border:1px solid transparent;
}
.gc-estado-recibida{color:#33465E;background:#EDF0F4;border-color:#DDE3EB;}
.gc-estado-buscando{color:#1B4F82;background:#E6EEF7;border-color:#D3E1F0;}
.gc-estado-propuestas{color:#7A5A10;background:#F5EEDD;border-color:#E9DDC2;}
.gc-estado-adjudicada{color:#0F6B59;background:#E4F0EC;border-color:#CFE4DD;}
.gc-estado-ejecucion{color:#0B4A55;background:#E3EEF0;border-color:#CDE1E4;}
.gc-estado-finalizada{color:#2A6154;background:#EBF2EF;border-color:#D8E6E1;}
.gc-estado-nueva{color:#9E3312;background:#FBEAE3;border-color:#F4D6CA;}
.gc-estado-inactiva{color:#5A6472;background:#F0F1F3;border-color:#E2E4E8;}

/* ---------- desplegable del expediente ---------- */
.gc-desplegar{
  width:44px;height:44px;flex-shrink:0;
  background:transparent;border:1px solid var(--gc-border);border-radius:7px;
  color:var(--gc-navy);cursor:pointer;display:grid;place-items:center;
  transition:border-color 180ms ease,background-color 180ms ease;
}
.gc-desplegar:hover{border-color:var(--gc-border-fuerte);background:#F5F7FA;}
.gc-desplegar .ico{width:17px;height:17px;transition:transform 180ms ease;}
.gc-desplegar[aria-expanded="true"] .ico{transform:rotate(180deg);}

.gc-detalle{padding:4px 4px 22px;}
.gc-detalle[hidden]{display:none;}
.gc-detalle-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px 28px;margin-bottom:4px;
}
.gc-dato{min-width:0;}
.gc-dato dt,.gc-dato-rotulo{
  font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gc-tinta-3);margin-bottom:5px;
}
.gc-dato dd,.gc-dato-valor{margin:0;font-size:14px;color:#16202B;line-height:1.55;overflow-wrap:anywhere;}
.gc-dato-valor.gc-monto{font-variant-numeric:tabular-nums;font-weight:600;}

.gc-adjuntos{display:flex;flex-direction:column;gap:6px;}
.gc-adjunto{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:#16202B;
}
.gc-adjunto .ico{width:16px;height:16px;color:var(--gc-tinta-3);flex-shrink:0;}

.gc-detalle-acciones{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--gc-border);
}

/* ---------- tabla editorial ----------
   Para comparar hay que poder leer en columna. Nunca una tarjeta por
   proveedor: se pierde justo lo que se está comparando. */
.gc-tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.gc-tabla{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;}
.gc-tabla th{
  text-align:left;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gc-tinta-3);padding:0 14px 10px 0;border-bottom:1.5px solid var(--gc-navy);
  white-space:nowrap;
}
.gc-tabla td{
  padding:13px 14px 13px 0;border-bottom:1px solid var(--gc-border);
  color:#16202B;vertical-align:top;
}
.gc-tabla th:last-child,.gc-tabla td:last-child{padding-right:0;}
.gc-tabla .gc-num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.gc-tabla .gc-principal{font-weight:600;color:var(--gc-navy);}
.gc-tabla tr.gc-elegida td{background:rgba(20,125,104,.055);}
.gc-tabla tr.gc-elegida .gc-principal{color:var(--gc-green-tinta);}
.gc-tabla-nota{font-size:12.5px;color:var(--gc-tinta-2);margin-top:12px;}

/* La comparación pone el mejor valor de cada columna en evidencia sin
   ordenar por él: la decisión sigue siendo del comité. */
.gc-mejor{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;
  color:var(--gc-green-tinta);text-transform:uppercase;margin-left:7px;vertical-align:1px;
}

/* ---------- actividad reciente ---------- */
.gc-actividad{padding:20px 22px;}
.gc-actividad h2{font-size:15px;font-weight:600;color:var(--gc-navy);margin-bottom:16px;}
.gc-linea{position:relative;padding-left:20px;}
.gc-linea::before{
  content:"";position:absolute;left:4px;top:6px;bottom:10px;
  width:1px;background:var(--gc-border);
}
.gc-hito{position:relative;padding-bottom:18px;}
.gc-hito::before{
  content:"";position:absolute;left:-20px;top:5px;width:9px;height:9px;
  border-radius:50%;background:var(--gc-surface);border:1.5px solid var(--gc-border-fuerte);
}
.gc-hito.gc-hito-vivo::before{border-color:var(--gc-orange-tinta);background:var(--gc-orange-tinta);}
.gc-hito-fecha{font-size:12px;font-weight:600;color:var(--gc-tinta-3);margin-bottom:3px;}
.gc-hito-que{font-size:13.5px;color:#16202B;font-weight:600;line-height:1.4;}
.gc-hito-cual{font-size:12.5px;color:var(--gc-tinta-2);line-height:1.45;margin-top:1px;}
.gc-actividad .gc-enlace{margin-top:2px;}

/* ---------- franja de confianza ----------
   Una sola, discreta, al pie. Sin ícono grande ni ilustración. */
.gc-confianza{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--gc-surface);border:1px solid var(--gc-border);border-radius:var(--gc-radio);
  padding:18px 24px;margin-bottom:20px;
}
.gc-confianza-txt{min-width:0;max-width:70ch;}
.gc-confianza-txt b{display:block;font-size:14px;font-weight:600;color:var(--gc-navy);margin-bottom:3px;}
.gc-confianza-txt span{font-size:13px;color:var(--gc-tinta-2);line-height:1.55;}

/* ---------- vacíos ----------
   Sin cursiva: es información, no una nota al margen. */
.gc-vacio{padding:36px 4px 40px;max-width:56ch;}
.gc-vacio b{display:block;font-size:15.5px;font-weight:600;color:var(--gc-navy);margin-bottom:8px;}
.gc-vacio p{font-size:13.5px;color:var(--gc-tinta-2);line-height:1.6;}
.gc-vacio p+p{margin-top:8px;}
.gc-vacio .gc-btn{margin-top:18px;}

/* ---------- botones ---------- */
.gc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:13.5px;font-weight:600;
  min-height:44px;padding:0 18px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;text-decoration:none;
  transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease;
}
.gc-btn .ico{width:17px;height:17px;stroke-width:1.7;}
.gc-btn-primario{background:var(--gc-orange-tinta);color:#fff;}
.gc-btn-primario:hover{background:var(--gc-orange-hover);}
.gc-btn-navy{background:var(--gc-navy);color:#fff;}
.gc-btn-navy:hover{background:var(--gc-navy-2);}
.gc-btn-linea{background:var(--gc-surface);border-color:var(--gc-border-fuerte);color:var(--gc-navy);}
.gc-btn-linea:hover{border-color:var(--gc-navy);background:#F5F7FA;}
.gc-btn-sm{min-height:44px;padding:0 15px;font-size:13px;}
.gc-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- avisos ---------- */
.gc-aviso{
  border:1px solid var(--gc-border);border-left:3px solid var(--gc-tinta-3);
  border-radius:8px;padding:14px 18px;margin-bottom:20px;
  font-size:13.5px;color:#16202B;line-height:1.6;background:var(--gc-surface);
}
.gc-aviso b{color:var(--gc-navy);}
.gc-aviso-alerta{border-left-color:var(--gc-orange-tinta);background:#FDF6F3;}
.gc-aviso-ok{border-left-color:var(--gc-green);background:#F2F8F6;}
.gc-aviso-espera{border-left-color:#7A5A10;background:#FBF7EE;}

/* ---------- formularios embebidos (edición, cotización, evaluación) ----------
   Conservan exactamente los mismos campos y nombres: solo cambia la
   presentación. */
.gc-form{padding:22px 24px 24px;}
.gc-form-seccion+.gc-form-seccion{margin-top:26px;padding-top:22px;border-top:1px solid var(--gc-border);}
.gc-form-seccion>h3{font-size:14px;font-weight:600;color:var(--gc-navy);margin-bottom:4px;}
.gc-form-seccion>.gc-form-nota{font-size:12.5px;color:var(--gc-tinta-2);margin-bottom:16px;max-width:64ch;}
.gc-form .field{margin-bottom:16px;}
.gc-form .field label,.gc-form .field .etiqueta{
  display:block;font-size:12px;font-weight:600;color:var(--gc-tinta-2);margin-bottom:6px;
}
.gc-form .field input,.gc-form .field select,.gc-form .field textarea,
.gc-form .stack-refs input{
  width:100%;font-family:inherit;font-size:14.5px;color:#16202B;background:var(--gc-surface);
  border:1px solid #B9C2D0;border-radius:8px;padding:11px 13px;min-height:44px;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
.gc-form .field input:hover,.gc-form .field select:hover,.gc-form .field textarea:hover{border-color:#8E9BAF;}
.gc-form .field input:focus,.gc-form .field select:focus,.gc-form .field textarea:focus{
  border-color:var(--gc-navy);box-shadow:0 0 0 3px rgba(8,43,80,.09);
}
.gc-form .field textarea{min-height:96px;resize:vertical;line-height:1.55;}
.gc-form .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.gc-form-botones{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--gc-border);
}
.gc-form .chip{min-height:44px;border-radius:8px;font-size:13px;padding:0 15px;display:inline-flex;align-items:center;}
.gc-form .upload-row{border-radius:8px;border-color:#C9D2DC;padding:6px 12px;min-height:44px;}
.gc-form .upload-name-input{min-height:36px;font-size:14px;}
.gc-form .checkline{
  border:1px solid var(--gc-border);border-radius:8px;padding:12px 14px;background:#FAFBFC;
}
.gc-form .check-label{display:flex;align-items:center;gap:12px;font-size:14px;cursor:pointer;min-height:44px;}

/* ---------- evaluación ---------- */
.gc-eval{display:flex;gap:6px;margin:6px 0 14px;}
.gc-eval-btn{
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:#B6BEC8;
  transition:color 140ms ease,transform 140ms ease;
}
.gc-eval-btn:hover{transform:translateY(-1px);}
.gc-eval-btn.gc-activa{color:#A57500;}
.gc-estrellas{font-size:19px;color:#A57500;letter-spacing:2px;line-height:1;}
.gc-estrellas-sm{font-size:14px;letter-spacing:1px;}

/* ---------- pie del área privada ---------- */
.gc-pie{border-top:1px solid var(--gc-border);background:var(--gc-surface);}
.gc-pie-in{
  display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;
  padding:20px 0;font-size:12.5px;color:var(--gc-tinta-2);
}
.gc-pie-links{display:flex;gap:22px;flex-wrap:wrap;}
.gc-pie-links a{color:var(--gc-tinta-2);text-decoration:none;padding:0;min-height:44px;display:inline-flex;align-items:center;}
.gc-pie-links a:hover{color:var(--gc-navy);text-decoration:underline;text-underline-offset:3px;}

/* ---------- vista de cuenta (destino del menú de perfil) ---------- */
.gc-volver{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--gc-tinta-2);
  min-height:44px;padding:0 2px;margin-bottom:6px;
}
.gc-volver:hover{color:var(--gc-navy);}
.gc-volver .ico{width:16px;height:16px;}
.gc-cuenta-titulo{
  font-family:var(--fuente-titulo);font-size:24px;font-weight:600;
  color:var(--gc-navy);letter-spacing:-.015em;margin-bottom:20px;
}
:target{scroll-margin-top:96px;}
.gc-anclado{scroll-margin-top:96px;}

/* ---------- toast ---------- */
.gc-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--gc-navy);color:#fff;font-size:13.5px;font-weight:500;
  padding:13px 20px;border-radius:9px;box-shadow:0 10px 30px rgba(8,43,80,.28);
  max-width:min(520px,calc(100% - 32px));z-index:60;
  opacity:0;pointer-events:none;transition:opacity 200ms ease,transform 200ms ease;
}
.gc-toast.gc-visible{opacity:1;transform:translate(-50%,0);}

/* =========================================================================
   RESPONSIVE
   Solo la navegación de módulos puede desplazarse de lado; la página nunca.
   ========================================================================= */
@media (max-width:1080px){
  .gc-cols{grid-template-columns:minmax(0,1fr);}
  .gc-actividad{padding:20px 24px;}
}
@media (max-width:860px){
  .gc-ficha{grid-template-columns:auto minmax(0,1fr);gap:6px 18px;}
  .gc-ficha-accion{grid-column:1 / -1;grid-row:auto;margin-top:16px;}
  .gc-ficha-nombre{font-size:25px;}
  .gc-ficha-marca{width:58px;height:58px;font-size:20px;border-radius:10px;}
  .gc-ficha-marca .ico{width:26px;height:26px;}
  .gc-cifras{grid-auto-flow:row;grid-template-columns:1fr 1fr;}
  .gc-cifra{border-left:0;border-top:1px solid var(--gc-border);align-items:flex-start;text-align:left;padding:18px 20px;}
  .gc-cifra:nth-child(-n+2){border-top:0;}
  .gc-cifra:nth-child(even){border-left:1px solid var(--gc-border);}
  .gc-cifra-num{font-size:30px;}
}
@media (max-width:760px){
  .gc-app-container{width:calc(100% - 32px);}
  .gc-perfil-txt{display:none;}
  .gc-head-link span:not(.gc-notif-num){
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .gc-head-link{padding:0 10px;min-width:44px;justify-content:center;}
  /* En móvil la fila deja de ser una grilla de columnas y se apila: folio,
     asunto, dato, estado y la acción — en ese orden de lectura. */
  .gc-fila-cab{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:16px 2px;align-items:start;}
  .gc-fila-folio{grid-column:1;grid-row:1;}
  .gc-desplegar{grid-column:2;grid-row:1 / span 2;align-self:start;}
  .gc-fila-cuerpo{grid-column:1;grid-row:2;}
  .gc-fila-acc{grid-column:1 / -1;grid-row:3;margin-top:10px;}
  .gc-panel-head,.gc-bloque,.gc-actividad,.gc-form,.gc-panel-cuerpo{padding-left:18px;padding-right:18px;}
  .gc-confianza{padding:18px;}
  .gc-detalle{padding-bottom:18px;}
}
@media (max-width:520px){
  .gc-app-container{width:calc(100% - 28px);}
  .gc-ficha{grid-template-columns:minmax(0,1fr);}
  .gc-ficha-marca{grid-row:auto;margin-bottom:6px;}
  .gc-ficha-nombre{font-size:22px;gap:8px;}
  .gc-cifras{grid-template-columns:1fr;}
  .gc-cifra{border-left:0!important;border-top:1px solid var(--gc-border);flex-direction:row;align-items:baseline;gap:12px;padding:14px 18px;}
  .gc-cifra:first-child{border-top:0;}
  .gc-cifra-num{font-size:26px;min-width:56px;}
  .gc-cifra-rotulo{max-width:none;}
  .gc-form .grid-2{grid-template-columns:1fr;}
  .gc-btn{width:100%;}
  .gc-fila-acc .gc-btn,.gc-detalle-acciones .gc-btn,.gc-form-botones .gc-btn{width:100%;}
  .gc-ficha-accion .gc-btn{width:100%;}
  .gc-menu{position:fixed;left:14px;right:14px;top:70px;min-width:0;}
}

/* ---------- ajustes de los controles heredados dentro del área privada ----------
   Los formularios de edición reutilizan exactamente los mismos campos, ids y
   nombres de antes; acá solo se los pone en la escala del módulo (44px de
   alto mínimo, radio de 8px, el navy nuevo). */
.gc-form .zona-picker{gap:10px;margin-bottom:12px;}
.gc-form .zona-picker select{
  flex:1 1 200px;min-width:0;max-width:100%;font-size:14px;
  min-height:44px;padding:10px 12px;border:1px solid #B9C2D0;border-radius:8px;
  text-overflow:ellipsis;
}
.gc-form .add-chip-row{gap:10px;margin-top:12px;}
.gc-form .add-chip-row input{flex:1 1 200px;min-width:0;}
.gc-form .chips{gap:10px;}
.gc-form .chip{border-color:#B9C2D0;color:var(--gc-tinta-2);}
.gc-form .chip:hover{border-color:var(--gc-navy);color:var(--gc-navy);}
.gc-form .chip.selected{background:var(--gc-navy);border-color:var(--gc-navy);color:#fff;}
.gc-form .chip.chip-national.selected{background:var(--gc-orange-tinta);border-color:var(--gc-orange-tinta);}
.gc-form .check-label input{width:22px;height:22px;accent-color:var(--gc-navy);flex-shrink:0;}
.gc-form .field input[type="file"]{
  padding:9px 12px;font-size:13.5px;background:#FAFBFC;cursor:pointer;
}
.gc-form .field input[type="file"]::file-selector-button{
  font-family:inherit;font-size:13px;font-weight:600;color:var(--gc-navy);
  background:var(--gc-surface);border:1px solid #B9C2D0;border-radius:6px;
  padding:7px 12px;margin-right:12px;cursor:pointer;min-height:34px;
}
.gc-form .field input[type="file"]::file-selector-button:hover{border-color:var(--gc-navy);}
.gc-form .file-list{margin-top:10px;}
.gc-form .file-list .upload-row{border-style:solid;border-color:var(--gc-border);background:#FAFBFC;}
.gc-form .tag{font-size:12px;color:var(--gc-green-tinta);background:rgba(20,125,104,.1);}
.gc-form .form-msg{margin-top:14px;}

/* El folio dentro de una celda de tabla es una segunda línea, no una columna. */
.gc-tabla .gc-fila-folio{margin-top:3px;font-size:12px;}

/* Contenedor de la comparación cargada bajo demanda. */
.gc-comparacion:empty{display:none;}

/* ---------- correcciones del pase de accesibilidad ----------
   Medido sobre la pantalla renderizada, no sobre los tokens: los fondos
   translúcidos (la fila verde de la propuesta adjudicada) se componen contra
   lo que tienen debajo antes de calcular el contraste. */

/* El dorado de las estrellas quedaba en 3.8 sobre la fila verde de la
   propuesta adjudicada — justo donde más se mira. */
.gc-estrellas{color:#8A6200;}

/* El chevron del expediente pasó a 44px: se le quita el borde para que no se
   vea como un botón pesado en una fila de datos. */
.gc-desplegar{border-color:transparent;}
.gc-desplegar:hover{border-color:var(--gc-border-fuerte);}

/* El salto al contenido también es un objetivo táctil. */
.saltar-al-contenido{min-height:44px;display:inline-flex;align-items:center;}

/* Los rótulos en versalitas ganaron peso al subir a 12px: se compensa el
   tracking para que la línea no se estire de más. */
.gc-dato dt,.gc-dato-rotulo,.gc-tabla th{letter-spacing:.05em;}

/* =========================================================================
   PERFIL CONTRACTUAL — Etapa 1
   -------------------------------------------------------------------------
   El formulario más largo del producto, así que no se presenta como una
   página larga: son pasos con estado propio, cada uno guardable como
   borrador. El avance y lo que falta están siempre a la vista, porque la
   pregunta real de quien lo llena es "¿qué me falta para poder contratar?".
   ========================================================================= */
.gc-contractual{margin-bottom:24px;}

/* ---------- cabecera con avance ---------- */
.gc-avance{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:center;
  padding:20px 24px;border-bottom:1px solid var(--gc-border);
}
.gc-avance h2{font-size:17px;font-weight:600;color:var(--gc-navy);letter-spacing:-.01em;}
.gc-avance-sub{font-size:13px;color:var(--gc-tinta-2);margin-top:3px;max-width:64ch;line-height:1.55;}
.gc-avance-cifra{display:flex;align-items:baseline;gap:10px;justify-self:end;font-variant-numeric:tabular-nums;}
.gc-avance-num{font-family:var(--fuente-titulo);font-size:30px;font-weight:600;color:var(--gc-navy);line-height:1;letter-spacing:-.02em;}
.gc-barra{grid-column:1 / -1;height:6px;border-radius:3px;background:#E8ECF1;overflow:hidden;}
.gc-barra span{display:block;height:100%;background:var(--gc-navy);border-radius:3px;transition:width 320ms cubic-bezier(.22,1,.36,1);}
.gc-barra.gc-barra-lista span{background:var(--gc-green);}

/* ---------- pasos ---------- */
.gc-pasos{
  display:flex;gap:2px;border-bottom:1px solid var(--gc-border);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
.gc-paso{
  position:relative;flex-shrink:0;display:inline-flex;align-items:center;gap:9px;
  background:transparent;border:0;border-bottom:3px solid transparent;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--gc-tinta-2);
  padding:0 16px;min-height:52px;cursor:pointer;white-space:nowrap;
  transition:color 180ms ease,border-color 180ms ease;
}
.gc-paso:hover{color:var(--gc-navy);}
.gc-paso[aria-selected="true"]{color:var(--gc-navy);border-bottom-color:var(--gc-navy);}
.gc-paso-num{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:#EDF0F4;color:var(--gc-tinta-2);
  font-variant-numeric:tabular-nums;
}
.gc-paso[aria-selected="true"] .gc-paso-num{background:var(--gc-navy);color:#fff;}
/* Un paso completo lleva el número en verde Y un check: el color nunca va solo. */
.gc-paso.gc-paso-listo .gc-paso-num{background:var(--gc-green);color:#fff;font-size:13px;}

.gc-paso-panel[hidden]{display:none;}
.gc-paso-panel{padding:24px;animation:gc-entra 180ms ease;}
.gc-paso-titulo{font-size:16px;font-weight:600;color:var(--gc-navy);margin-bottom:4px;}
.gc-paso-ayuda{font-size:13px;color:var(--gc-tinta-2);margin-bottom:20px;max-width:68ch;line-height:1.55;}

/* ---------- barra de acciones ---------- */
.gc-paso-acciones{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:18px 24px;border-top:1px solid var(--gc-border);background:#FBFCFD;
  border-radius:0 0 var(--gc-radio) var(--gc-radio);
}
.gc-paso-acciones .gc-espacio{flex:1;}
.gc-guardado{font-size:12.5px;color:var(--gc-green-tinta);font-weight:600;}

/* ---------- tarjetas de firmante ---------- */
.gc-firmantes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:18px;}
.gc-firmante{border:1px solid var(--gc-border);border-radius:10px;padding:16px 18px;background:var(--gc-surface);}
.gc-firmante-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.gc-firmante-nombre{font-size:14.5px;font-weight:600;color:var(--gc-navy);line-height:1.3;}
.gc-firmante-rol{font-size:12.5px;color:var(--gc-tinta-2);margin-top:2px;}
.gc-firmante-dato{font-size:12.5px;color:var(--gc-tinta-2);line-height:1.6;overflow-wrap:anywhere;}
.gc-firmante-pie{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--gc-border);
}
.gc-firmante.gc-inactivo{opacity:.62;background:#FAFBFC;}

/* Etiquetas chicas dentro de la tarjeta: principal, obligatorio, orden. */
.gc-marca{
  display:inline-flex;align-items:center;font-size:12px;font-weight:600;
  color:var(--gc-tinta-2);background:#F0F3F7;border:1px solid var(--gc-border);
  border-radius:4px;padding:3px 8px;white-space:nowrap;
}
.gc-marca-firme{color:var(--gc-navy);background:#E9EEF5;border-color:#D6DFEA;}

/* ---------- documentos ---------- */
.gc-docs{border-top:1px solid var(--gc-border);margin-bottom:18px;}
.gc-doc{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px 16px;align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--gc-border);
}
.gc-doc .ico{width:20px;height:20px;color:var(--gc-tinta-3);}
.gc-doc-nombre{font-size:14px;font-weight:600;color:var(--gc-navy);line-height:1.35;overflow-wrap:anywhere;}
.gc-doc-meta{font-size:12.5px;color:var(--gc-tinta-2);line-height:1.5;}
.gc-doc-motivo{font-size:12.5px;color:#9E3312;margin-top:3px;}

/* Requisito sin cumplir: una fila con su estado, no una alerta roja. */
.gc-requisito{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid var(--gc-border);border-radius:8px;
  background:#FBFCFD;margin-bottom:10px;
}
.gc-requisito b{display:block;font-size:13.5px;font-weight:600;color:var(--gc-navy);}
.gc-requisito span{font-size:12.5px;color:var(--gc-tinta-2);}

/* ---------- panel de pendientes ---------- */
.gc-pendientes{border:1px solid var(--gc-border);border-radius:10px;overflow:hidden;margin-bottom:18px;}
.gc-pendientes-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 18px;background:#FBFCFD;border-bottom:1px solid var(--gc-border);
}
.gc-pendientes-cab b{font-size:14px;font-weight:600;color:var(--gc-navy);}
.gc-lista-pendientes{list-style:none;margin:0;padding:0;}
.gc-lista-pendientes li{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 18px;border-bottom:1px solid var(--gc-border);
  font-size:13.5px;color:#16202B;line-height:1.5;
}
.gc-lista-pendientes li:last-child{border-bottom:0;}
.gc-lista-pendientes li::before{
  content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;margin-top:7px;
  background:var(--gc-tinta-3);
}
.gc-lista-pendientes li.gc-bloqueo::before{background:var(--gc-orange-tinta);}
.gc-lista-pendientes li.gc-bloqueo{color:#7A2A0E;}

/* ---------- resumen final ---------- */
.gc-resumen-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 28px;
  padding:18px 0;border-top:1px solid var(--gc-border);
}

/* ---------- estado de FirmaYa (reservado) ----------
   Hoy siempre dice "No verificado": en esta etapa no se consulta a FirmaYa y
   no se simula que se consultó. */
.gc-firmaya{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--gc-tinta-2);
  background:#F0F3F7;border:1px solid var(--gc-border);border-radius:4px;padding:3px 9px;
}

@media (max-width:760px){
  .gc-avance,.gc-paso-panel,.gc-paso-acciones{padding-left:18px;padding-right:18px;}
  .gc-avance{grid-template-columns:minmax(0,1fr);}
  .gc-avance-cifra{justify-self:start;}
  .gc-firmantes{grid-template-columns:1fr;}
  .gc-doc{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;}
  .gc-doc .ico{display:none;}
}
@media (max-width:520px){
  .gc-paso-acciones .gc-btn{width:100%;}
  .gc-paso-acciones .gc-espacio{display:none;}
  .gc-paso{padding:0 12px;font-size:13px;}
}

/* Las dos acciones de una fila de documento son palabras cortas ("Ver",
   "Quitar"): sin un ancho mínimo el objetivo táctil queda por debajo de lo
   que se puede tocar con el pulgar. */
.gc-doc .gc-enlace{min-width:44px;justify-content:center;}

/* =========================================================================
   CONTRATOS — Etapa 2
   -------------------------------------------------------------------------
   Un contrato no es un formulario más: es el documento que cierra el proceso.
   La pantalla se apoya en el mismo vocabulario del expediente — folio,
   estado, versión, huella — y reserva el naranjo para la única acción que
   importa en cada momento.
   ========================================================================= */

/* ---------- estados del contrato ---------- */
.gc-estado-borrador{color:#33465E;background:#EDF0F4;border-color:#DDE3EB;}
.gc-estado-revision{color:#1B4F82;background:#E6EEF7;border-color:#D3E1F0;}
.gc-estado-aprobado{color:#7A5A10;background:#F5EEDD;border-color:#E9DDC2;}
.gc-estado-generando{color:#0B4A55;background:#E3EEF0;border-color:#CDE1E4;}
.gc-estado-listo{color:#0F6B59;background:#E4F0EC;border-color:#CFE4DD;}
.gc-estado-fallido{color:#9E3312;background:#FBEAE3;border-color:#F4D6CA;}
.gc-estado-reemplazado,.gc-estado-anulado{color:#5A6472;background:#F0F1F3;border-color:#E2E4E8;}

/* ---------- tarjeta del contrato emitido ----------
   Cuando el PDF ya existe, esto es lo primero que se ve: el documento y su
   huella, no un formulario. */
.gc-emitido{
  border:1px solid var(--gc-border);border-left:3px solid var(--gc-green);
  border-radius:var(--gc-radio);background:var(--gc-surface);
  padding:22px 24px;margin-bottom:20px;box-shadow:var(--gc-sombra);
}
.gc-emitido-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.gc-emitido-titulo{
  font-family:var(--fuente-titulo);font-size:20px;font-weight:600;
  color:var(--gc-navy);letter-spacing:-.015em;line-height:1.25;
}
.gc-emitido-folio{
  font-family:var(--fuente-mono);font-size:12px;color:var(--gc-tinta-3);margin-top:4px;
}
.gc-emitido-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px 26px;margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--gc-border);
}
/* La huella se muestra en monoespaciada y truncada: es para comparar de un
   vistazo, no para leerla entera. */
.gc-huella{
  font-family:var(--fuente-mono);font-size:12.5px;color:#16202B;
  word-break:break-all;line-height:1.45;
}
.gc-emitido-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}

/* ---------- historial de versiones ---------- */
.gc-versiones{border-top:1px solid var(--gc-border);}
.gc-version{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:6px 16px;align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--gc-border);
}
.gc-version-num{
  width:34px;height:34px;flex-shrink:0;border-radius:8px;
  display:grid;place-items:center;font-size:13px;font-weight:700;
  background:#EDF0F4;color:var(--gc-tinta-2);font-variant-numeric:tabular-nums;
}
.gc-version.gc-version-vigente .gc-version-num{background:var(--gc-navy);color:#fff;}
.gc-version-meta{font-size:12.5px;color:var(--gc-tinta-2);line-height:1.5;}
.gc-version-motivo{font-size:12.5px;color:var(--gc-tinta-2);margin-top:3px;font-style:normal;}

/* ---------- hitos editables ---------- */
.gc-hitos{border-top:1px solid var(--gc-border);margin-bottom:16px;}
.gc-hito{
  display:grid;grid-template-columns:34px minmax(0,1.6fr) minmax(0,1.2fr) 88px 128px 44px;
  gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--gc-border);
}
.gc-hito input,.gc-hito select{
  width:100%;font-family:inherit;font-size:13.5px;color:#16202B;background:var(--gc-surface);
  border:1px solid #B9C2D0;border-radius:7px;padding:9px 10px;min-height:44px;
}
.gc-hito input:focus,.gc-hito select:focus{border-color:var(--gc-navy);box-shadow:0 0 0 3px rgba(8,43,80,.09);}
.gc-hito-num{
  height:44px;display:grid;place-items:center;font-size:13px;font-weight:700;
  color:var(--gc-tinta-3);font-variant-numeric:tabular-nums;
}
.gc-hito-quitar{
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--gc-border);border-radius:7px;
  color:var(--gc-tinta-2);cursor:pointer;
}
.gc-hito-quitar:hover{border-color:var(--gc-orange-tinta);color:var(--gc-orange-tinta);}
.gc-hito-rotulos{
  display:grid;grid-template-columns:34px minmax(0,1.6fr) minmax(0,1.2fr) 88px 128px 44px;
  gap:10px;padding-bottom:8px;
}
.gc-hito-rotulos span{
  font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gc-tinta-3);
}

/* El cuadre de los hitos con el total: verde si cuadra, naranjo si no. */
.gc-cuadre{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-radius:8px;margin-bottom:16px;
  font-size:13.5px;line-height:1.5;
}
.gc-cuadre-ok{background:#F2F8F6;border:1px solid #CFE4DD;color:#0F6B59;}
.gc-cuadre-mal{background:#FDF6F3;border:1px solid #F4D6CA;color:#7A2A0E;}
.gc-cuadre b{font-variant-numeric:tabular-nums;}

/* ---------- selección de firmantes ---------- */
.gc-sel-firmantes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:16px;}
.gc-sel-firmante{
  display:flex;align-items:flex-start;gap:12px;
  border:1px solid var(--gc-border);border-radius:9px;padding:14px 16px;
  background:var(--gc-surface);cursor:pointer;
  transition:border-color 160ms ease,background-color 160ms ease;
}
.gc-sel-firmante:hover{border-color:var(--gc-border-fuerte);}
.gc-sel-firmante.gc-elegido{border-color:var(--gc-navy);background:#F7F9FC;}
.gc-sel-firmante input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--gc-navy);}
.gc-sel-firmante b{display:block;font-size:14px;font-weight:600;color:var(--gc-navy);line-height:1.3;}
.gc-sel-firmante span{display:block;font-size:12.5px;color:var(--gc-tinta-2);line-height:1.5;}

/* ---------- lista de contratos ---------- */
.gc-filtros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
  padding:18px 24px;border-bottom:1px solid var(--gc-border);
}
.gc-filtros label{
  display:block;font-size:12px;font-weight:600;color:var(--gc-tinta-2);margin-bottom:6px;
}
.gc-filtros input,.gc-filtros select{
  width:100%;font-family:inherit;font-size:13.5px;color:#16202B;background:var(--gc-surface);
  border:1px solid #B9C2D0;border-radius:7px;padding:9px 10px;min-height:44px;
}

@media (max-width:860px){
  .gc-hito,.gc-hito-rotulos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .gc-hito-rotulos{display:none;}
  .gc-hito-num{justify-self:start;}
  .gc-hito-quitar{justify-self:end;}
  .gc-version{grid-template-columns:auto minmax(0,1fr);}
}
@media (max-width:520px){
  .gc-emitido,.gc-filtros{padding:18px;}
  .gc-emitido-acciones .gc-btn{width:100%;}
  .gc-hito,.gc-hito-rotulos{grid-template-columns:minmax(0,1fr);}
  .gc-sel-firmantes{grid-template-columns:1fr;}
}

/* ---------- el contrato ----------
   El producto vive en el mundo de las actas: la pieza que cierra el proceso
   se dibuja como lo que es, una hoja. La maqueta de la derecha no es una
   ilustración decorativa — reproduce la estructura real del PDF que genera
   el sistema, con su folio, su desglose y su huella. */
.contrato-bloque{overflow:hidden;}
.contrato-fila{
  display:grid;grid-template-columns:1fr 420px;gap:var(--e-14);align-items:start;
}
.contrato-lista{list-style:none;margin:var(--e-6) 0 0;padding:0;display:grid;gap:var(--e-4);}
.contrato-lista li{
  position:relative;padding-left:30px;font-size:15px;line-height:1.6;color:var(--dark);
  text-wrap:pretty;
}
/* Un filete corto en vez de una viñeta: el gesto del documento, no el del
   listado de una landing genérica. */
.contrato-lista li::before{
  content:"";position:absolute;left:0;top:11px;width:16px;height:1.5px;
  background:var(--f-accion);
}
.contrato-lista b{color:var(--navy);font-weight:600;}

/* Lo que todavía no existe va aparte y dicho como lo que es. */
.contrato-proximo{
  margin-top:var(--e-8);padding:var(--e-5) var(--e-6);
  border:1px solid var(--line);border-left:3px solid var(--line-fuerte);
  border-radius:var(--radius);background:var(--white);
}
.contrato-proximo h3{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:15px;font-weight:600;color:var(--navy);margin-bottom:6px;
}
.contrato-proximo p{font-size:14px;color:var(--grey);line-height:1.6;max-width:60ch;}
.etiqueta-pronto{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--oro-tinta);background:var(--oro-suave);
  border:1px solid rgba(122,90,16,.25);border-radius:3px;padding:3px 9px;
}

/* ---------- la hoja de ejemplo ---------- */
.contrato-hoja{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sombra-3);padding:26px 28px 22px;position:relative;
}
.contrato-hoja-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:16px;border-bottom:1.5px solid var(--navy);
}
.contrato-hoja-marca{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);
}
.contrato-hoja-folio{
  font-family:var(--fuente-mono);font-size:12px;color:var(--grey);text-align:right;line-height:1.5;
}
.contrato-hoja-titulo{
  font-family:var(--fuente-titulo);font-size:19px;font-weight:600;color:var(--navy);
  letter-spacing:-.015em;line-height:1.25;text-align:center;margin-bottom:18px;
}
.contrato-hoja-partes{display:grid;gap:12px;margin-bottom:18px;}
.contrato-hoja-parte span{
  display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey);margin-bottom:3px;
}
.contrato-hoja-parte b{display:block;font-size:14px;color:var(--dark);font-weight:600;line-height:1.35;}
.contrato-hoja-parte i{display:block;font-style:normal;font-size:12.5px;color:var(--grey);}

.contrato-hoja-montos{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;margin-bottom:16px;display:grid;gap:7px;
}
.contrato-hoja-monto{
  display:flex;justify-content:space-between;gap:14px;
  font-size:13.5px;color:var(--grey);font-variant-numeric:tabular-nums;
}
.contrato-hoja-monto b{color:var(--dark);font-weight:600;}
.contrato-hoja-monto.es-total{
  font-size:15px;color:var(--navy);padding-top:7px;border-top:1px solid var(--line);
}
.contrato-hoja-monto.es-total b{color:var(--navy);font-weight:700;}
.contrato-hoja-palabras{font-size:12.5px;color:var(--grey);font-style:italic;margin-top:2px;}

.contrato-hoja-firmas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px;}
.contrato-hoja-firma{border-top:1px solid var(--line-fuerte);padding-top:6px;}
.contrato-hoja-firma b{display:block;font-size:12.5px;color:var(--dark);font-weight:600;}
.contrato-hoja-firma span{display:block;font-size:12px;color:var(--grey);}

.contrato-hoja-pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--fuente-mono);font-size:12px;color:var(--grey);
}

@media (max-width:1000px){
  .contrato-fila{grid-template-columns:1fr;gap:var(--e-10);}
  .contrato-hoja{width:100%;max-width:460px;margin:0 auto;}
}
@media (max-width:560px){
  .contrato-hoja{padding:20px 18px 18px;}
  .contrato-hoja-firmas{grid-template-columns:1fr;}
  .contrato-hoja-cab{flex-direction:column;}
  .contrato-hoja-folio{text-align:left;}
}

/* =====================================================================
   NÓMINAS PÚBLICAS DEL SII
   ---------------------------------------------------------------------
   Dos superficies: la tarjeta que aparece en el formulario del proveedor
   cuando su RUT calza con el padrón, y el panel donde el equipo administra
   las importaciones.

   La tarjeta se lee como un extracto de registro, no como una notificación
   de aplicación: filete izquierdo que marca el estado, datos en pares
   rótulo/valor, y el aviso legal al pie separado por una línea. El color
   informa el estado y nunca es lo único que lo dice — siempre hay texto.
   ===================================================================== */

.sii-caja{
  margin-top:var(--e-4);
  padding:var(--e-4) var(--e-5);
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--line-fuerte);
  border-radius:var(--radius);
  font-size:var(--t-13);
  animation:sii-entra var(--dur-base) var(--ease-salida);
}
@keyframes sii-entra{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.sii-caja{animation:none;}}

.sii-caja.sii-ok{border-left-color:var(--teal);background:#FBFDFC;}
.sii-caja.sii-alerta{border-left-color:var(--stamp);background:#FDFBFA;}
.sii-caja.sii-neutro{border-left-color:var(--line-fuerte);}
.sii-caja.sii-cargando{border-left-color:var(--line-fuerte);color:var(--grey);}

.sii-cabecera{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-3);
  flex-wrap:wrap;margin-bottom:var(--e-2);
}
.sii-rotulo{
  margin:0;font-size:var(--t-11);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
}
.sii-estado{
  font-size:var(--t-12);font-weight:600;color:var(--dark);
  padding:2px 9px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--paper);white-space:nowrap;
}
.sii-ok .sii-estado{color:var(--teal-tinta);border-color:#BFD9D1;background:#F1F8F5;}
.sii-alerta .sii-estado{color:var(--stamp-oscuro);border-color:#E2C4BF;background:#FBF2F0;}

.sii-titulo{
  margin:0 0 var(--e-3);
  font-family:var(--fuente-titulo);font-size:var(--t-16);
  font-weight:600;color:var(--navy);line-height:1.3;
}

/* Pares rótulo/valor: en una línea cuando hay ancho, apilados en el teléfono. */
.sii-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--e-2) var(--e-5);margin:0;}
.sii-datos div{display:flex;flex-direction:column;gap:1px;}
.sii-datos dt{font-size:var(--t-11);color:var(--grey);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.sii-datos dd{margin:0;font-size:var(--t-13);color:var(--dark);font-variant-numeric:tabular-nums;}

.sii-giros{margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px dashed var(--line);}
.sii-giros-rotulo{
  margin:0 0 var(--e-1);font-size:var(--t-11);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--grey);
}
.sii-giros ul{margin:0;padding-left:var(--e-4);}
.sii-giros li{font-size:var(--t-12);color:var(--dark);line-height:1.55;}
.sii-giros li b{font-family:var(--fuente-mono);font-size:var(--t-11);color:var(--navy);margin-right:5px;}

.sii-acciones{
  margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;
}
.sii-linea{margin:0;font-size:var(--t-12);color:var(--grey);line-height:1.55;}
.sii-ojo{color:var(--stamp-oscuro);}

/* El límite de lo que este dato acredita. Va siempre, no es descartable. */
.sii-aviso{
  margin:var(--e-3) 0 0;padding-top:var(--e-2);
  border-top:1px solid var(--line);
  font-size:var(--t-12);color:var(--grey);line-height:1.5;
}

/* ---------- panel interno ---------- */
.sii-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.sii-cifra{background:var(--white);padding:var(--e-3) var(--e-4);display:flex;flex-direction:column;gap:2px;}
.sii-cifra-num{font-size:var(--t-20);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.15;}
.sii-cifra-rot{font-size:var(--t-11);color:var(--grey);text-transform:uppercase;letter-spacing:.05em;}

.sii-fuentes{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.sii-fuente{
  display:flex;justify-content:space-between;align-items:center;gap:var(--e-4);flex-wrap:wrap;
  padding:var(--e-3) var(--e-4);background:var(--white);
}
.sii-fuente + .sii-fuente{border-top:1px solid var(--line);}
.sii-fuente-nombre{margin:0;font-weight:600;color:var(--dark);font-size:var(--t-13);}
.sii-fuente-meta{margin:2px 0 0;font-size:var(--t-12);color:var(--grey);}

.sii-sincro{margin-top:var(--e-4);display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap;}
.sii-sincro .sii-linea{flex:1;min-width:220px;}

.sii-manual{margin-top:var(--e-4);border-top:1px solid var(--line);padding-top:var(--e-3);}
.sii-manual summary{cursor:pointer;font-size:var(--t-13);font-weight:600;color:var(--navy);}
.sii-manual summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--radius-sm);}
.sii-subida{display:flex;gap:var(--e-3);align-items:center;flex-wrap:wrap;margin-top:var(--e-3);}
.sii-select{
  font-family:inherit;font-size:var(--t-13);padding:9px 11px;min-height:40px;
  border:1px solid var(--line-fuerte);border-radius:var(--radius);background:var(--white);color:var(--dark);
}

.sii-resultado{
  margin-top:var(--e-4);padding:var(--e-3) var(--e-4);
  border:1px solid var(--line);border-left:3px solid var(--line-fuerte);
  border-radius:var(--radius);font-size:var(--t-13);background:var(--paper);
}
.sii-resultado p{margin:0 0 var(--e-2);}
.sii-resultado p:last-child{margin-bottom:0;}
.sii-resultado ul{margin:0;padding-left:var(--e-5);}
.sii-resultado li{line-height:1.6;}
.sii-resultado-ok{border-left-color:var(--teal);}
.sii-resultado-error{border-left-color:var(--stamp);}

.sii-fila-error td{background:#FDF7F6;}
.sii-detalle-celda{max-width:280px;font-size:var(--t-12);color:var(--grey);}
.sii-cambio{font-size:var(--t-12);line-height:1.55;}
.sii-cambio s{color:var(--grey);}

/* Estados de contraste: el color acompaña al texto, nunca lo reemplaza. */
.sii-p-ok{color:var(--teal-tinta);font-weight:600;}
.sii-p-alerta{color:var(--stamp-oscuro);font-weight:600;}
.sii-p-neutro{color:var(--grey);}

.sii-copias{margin:0;padding-left:var(--e-5);font-size:var(--t-12);color:var(--grey);}
.sii-copias li{line-height:1.7;}
.sii-copias b{font-family:var(--fuente-mono);font-size:var(--t-11);color:var(--dark);font-weight:500;}

.sii-aviso-pie{
  margin:var(--e-4) 0 0;font-size:var(--t-12);color:var(--grey);
  line-height:1.6;font-style:italic;
}

@media (max-width:620px){
  .sii-caja{padding:var(--e-3) var(--e-4);}
  .sii-fuente{align-items:flex-start;}
  .sii-fuente .btn{width:100%;}
  .sii-subida > *{width:100%;}
}

/* El domicilio es largo: ocupa la fila entera en vez de apretarse en una
   columna angosta al lado de la fecha. */
.sii-datos .sii-ancho{grid-column:1/-1;}