/* ==========================================================================
   Seguratis · TOKENS
   Fuente: 01-diseno/05-IMPLEMENTACION.md §1 + 00-SISTEMA.md §2
   Este es el UNICO archivo donde puede aparecer un hexadecimal.
   ========================================================================== */

:root{
  /* --- Marca ------------------------------------------------------------ */
  --c-primary:#044268;          /* azul marino del logo: cifras, precios, tablas, marca */
  --c-primary-strong:#03314E;   /* hover de enlaces y elementos azules */
  --c-action:#E9714A;           /* coral: SOLO fondos pulsables */
  --c-action-strong:#D25E38;    /* hover/active del boton primario */
  --c-action-ink:#B04A28;       /* coral como TEXTO (5,40:1 sobre blanco) */
  --c-action-deep:#A8431F;      /* fondo de etiqueta destacada con texto blanco (5,4:1) */
  --c-accent:#F7B98F;           /* melocoton: solo marcador del H1 y comilla. Nunca con texto encima */

  /* --- Neutros calidos -------------------------------------------------- */
  --c-ink:#101820;              /* H1-H3, nombres, <strong> */
  --c-ink-article:#33424D;      /* cuerpo largo de articulo 16.5/1.65 */
  --c-ink-2:#55636B;            /* subtitulos, descripciones, cuerpo de FAQ */
  --c-ink-3:#69737E;            /* TODO el texto secundario pequeno (4,87:1 sobre blanco) */
  --c-ink-4:#A8B0B7;            /* SOLO graficos: chevrons, franjas, numeracion. Nunca texto */
  --c-ink-muted:#7C8494;
  --c-quote-ink:#3A4650;        /* citas en Georgia cursiva */

  --c-border:#E9E3DE;           /* borde 1px de tarjetas y tablas */
  --c-border-soft:#EDE7E2;      /* borde de tarjetas de lista e items de menu */
  --c-divider:#F0EAE5;          /* lineas de cabecera, footer, separadores */
  --c-field-border:#E4DCD6;     /* borde de inputs (1px) y de boton secundario/chip (1.5px) */

  --c-surface-1:#F8F4F1;        /* cajas de icono, boton neutro, celdas de logo */
  --c-surface-2:#FCF8F5;        /* fondo de seccion alterna y de bloques */
  --c-field:#FDFBFA;            /* fondo de inputs, selects y textarea */
  --c-row-alt:#FDFAF8;          /* fila alterna de tabla y hover de tarjeta enlazada */
  --c-white:#FFFFFF;

  /* --- Tintes funcionales ----------------------------------------------- */
  --c-cta-bg:#FDF1EA;           /* bloques CTA y chip activo. Nunca banda a ancho completo */
  --c-cta-border:#F3D3C0;       /* borde 1.5px del boton secundario dentro de bloques CTA */
  --c-cta-ink:#6E5A50;          /* parrafos dentro de bloques CTA */

  --c-note-bg:#FDF9F6;          /* avisos calidos suaves */
  --c-note-border:#F0E4DA;

  --c-tag-soft:#F0F7F2;         /* pastilla de ahorro y etiqueta "Principal" */
  --c-positive:#1E7A4F;         /* checks, badge de correduria, senales positivas */

  --c-summary-bg:#F4FAF6;       /* caja "Resumen" de articulos */
  --c-summary-border:#CDE7D6;
  /* Borde azul claro de la modalidad recomendada del ramo (maqueta madre-ramo). */
  --c-destacada-border:#BBD0DE;
  --c-summary-body:#2E4038;

  --c-warn-bg:#FBF7F1;          /* caja "Recuerda que..." */
  --c-warn-border:#EADFCF;
  --c-warn-ink:#6B4F22;
  --c-warn-body:#6B5B45;

  --c-negative:#B0453A;         /* aspas y errores. NUNCA en botones */
  --c-star:#E8A400;             /* estrellas de valoracion */
  --c-trustpilot:#00B67A;       /* solo los 5 cuadrados de Trustpilot */
  --c-quote:#F0BFA0;            /* comilla tipografica Georgia */
  --c-selection:#FBE0D3;        /* ::selection */

  /* Boton de WhatsApp. Valores de botones.dc.html, que NO coinciden con la
     tabla de 06-COMPONENTES.md §1 (borde #9FC9B4 e ink #1E7A4F): manda la
     maqueta. Tampoco va en mayusculas. */
  --c-whatsapp-border:#00B67A;
  --c-whatsapp-ink:#0A8C5E;
  --c-whatsapp-hover:#F2FBF7;
  /* Separador «›» entre migas de paso del multipaso (07-FORMULARIOS.md §2.1) */
  --c-step-sep:#D3CCC6;
  /* Borde de la caja de resumen de cotizacion, en resultados del comparador */
  --c-resumen-borde:#F3E2D6;

  /* --- Hero (00-SISTEMA.md §5.18) --------------------------------------- */
  /*
   * Un degradado por familia de plantilla, con los valores literales de las
   * maquetas. La diferencia que importa es el FINAL: los que cierran en blanco
   * se funden con la seccion siguiente, y los que cierran en #FBF6EF dejan un
   * canto visible. Antes todos usaban el de la home, que cierra en crema, y ese
   * canto salia en las catorce plantillas.
   */
  --hero-bg:radial-gradient(132% 100% at 100% -8%, #FBDFCC 0%, #FCEEE3 34%, #FBF6EF 68%, #FDFAF7 88%, #FFFFFF 100%);
  --hero-bg-home:radial-gradient(115% 95% at 100% -5%, #FBDFCC 0%, #FCEEE3 42%, #FBF6EF 100%);
  --hero-bg-ficha:radial-gradient(112% 78% at 100% -5%, #FBDFCC 0%, #FCEEE3 46%, #FBF6EF 100%);
  --hero-bg-gracias:radial-gradient(130% 100% at 100% -8%, #FBDFCC 0%, #FCEEE3 34%, #FBF6EF 68%, #FDFAF7 88%, #FFFFFF 100%);
  --hero-bg-contacto:radial-gradient(135% 108% at 100% -8%, #FBDFCC 0%, #FCEEE3 34%, #FBF6EF 66%, #FDFAF7 88%, #FFFFFF 100%);
  --hero-bg-blanco:radial-gradient(125% 78% at 100% -8%, #FBDFCC 0%, #FCEEE3 38%, #FBF6EF 72%, #FFFFFF 100%);
  --hero-bg-resultados:radial-gradient(132% 104% at 100% -8%, #FBDFCC 0%, #FCEEE3 34%, #FBF6EF 68%, #FDFAF7 88%, #FFFFFF 100%);
  --hero-blob-coral:radial-gradient(circle at 30% 30%, rgba(232,110,77,.20), rgba(232,110,77,0) 100%);
  --hero-blob-verde:radial-gradient(circle at 60% 40%, rgba(0,182,122,.13), rgba(0,182,122,0) 100%);
  --hero-dot-1:#F7C4A6;
  --hero-dot-2:#8FCBAE;
  --hero-dot-3:#F3D3C0;
  --hero-dot-4:#C9DED0;

  /* Placeholder rayado mientras no hay fotografia real (§2.4) */
  --ph:repeating-linear-gradient(135deg, #F4EEE9 0 8px, #FCF8F5 8px 16px);
  --ph-sm:repeating-linear-gradient(135deg, #F4EEE9 0 6px, #FCF8F5 6px 12px);

  /* --- Forma ------------------------------------------------------------ */
  --r:8px;                      /* tarjetas, inputs, tablas, bloques, avisos */
  --r-pill:999px;               /* TODOS los botones y las pills */
  --r-mark:4px;                 /* marcador del titular y cajas de logo */
  --r-frame:12px;               /* marco de pantalla */
  --bd:1px;
  --bd-strong:1.5px;

  /* --- Espaciado -------------------------------------------------------- */
  --pad-x:20px;                 /* margen lateral movil */
  --pad-x-d:24px;               /* margen lateral desktop */
  /*
   * 1280 px, no 1160. El documento 10-SISTEMA.md §8.3 sigue diciendo 1160,
   * pero las 14 maquetas de escritorio de la entrega final usan 1280 en 138
   * contenedores y 01-PLANTILLAS.md lo confirma. Manda la maqueta.
   */
  --container:1280px;           /* contenedor de contenido desktop */
  --container-header:1280px;    /* contenedor de la cabecera */
  /*
   * 73 px, no 68: 14 (padding) + 44 (boton) + 14 + 1 (borde). De aqui salen el
   * scroll-margin-top de las anclas, el top de las barras pegajosas y el
   * max-height del panel de menu. Si esto baila, bailan las tres cosas.
   */
  --header-h:73px;              /* alto de cabecera movil */
  --header-h-d:81px;            /* alto de cabecera desktop */
  --bar-h:78px;                 /* reserva inferior por barra fija */

  /* --- Alturas de control (§4.7 y §8.4) --------------------------------- */
  --h-btn:56px;
  --h-btn-lg:60px;              /* CTA de hero en desktop */
  --h-btn-sm:48px;
  --h-btn-xs:46px;
  --h-field:52px;
  --h-field-d:56px;
  --h-chip:52px;
  --h-chip-d:54px;
  --h-tap:44px;

  /* --- Sombras (§4.6) --------------------------------------------------- */
  --sh-form:0 18px 34px -26px rgba(16,24,32,.45);
  --sh-form-3:0 2px 4px -2px rgba(16,24,32,.08), 0 16px 28px -18px rgba(16,24,32,.3), 0 34px 60px -34px rgba(16,24,32,.42);
  --sh-card:0 10px 22px -20px rgba(16,24,32,.6);
  --sh-cta:0 14px 26px -14px rgba(233,113,74,.8);
  --sh-cta-lg:0 16px 30px -18px rgba(233,113,74,.95);   /* primario grande */
  --sh-cta-hover:0 18px 30px -14px rgba(233,113,74,.85);
  --sh-cta-sm:0 12px 22px -14px rgba(233,113,74,.8);
  --sh-tel:0 6px 16px -8px rgba(16,24,32,.22);          /* neutro y telefono */
  --sh-on-tint:0 10px 22px -16px rgba(16,24,32,.4);     /* secundario sobre tinte */
  --sh-mega:0 24px 44px -32px rgba(16,24,32,.5);
  --sh-panel:0 22px 34px -26px rgba(16,24,32,.5);

  /* --- Movimiento (§6) -------------------------------------------------- */
  --t-btn:transform .18s ease-out, box-shadow .18s ease-out, background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out;
  --t-soft:color .16s ease-out, background-color .16s ease-out, border-color .16s ease-out, opacity .16s ease-out;

  /* --- Tipografia ------------------------------------------------------- */
  --font:Manrope,"Helvetica Neue",Helvetica,sans-serif;
  --font-quote:Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}