@charset "UTF-8";

:root{
    /* --------------- COLORS --------------- */
    --white: #ffffff;        /* Fondos principales, cards, superficies limpias */
    --black: #000000;        /* Casos puntuales: overlays, sombras fuertes */

    --c-font-50:  #f5f7f8;   /* Fondos muy suaves, tablas alternas, skeletons */
    --c-font-100: #e6eaee;   /* Divisores, borders light, estados disabled */
    --c-font-200: #c3c9cf;   /* Texto muy secundario, placeholders, hints */
    --c-font-300: #9aa3ab;   /* Labels, meta info, fechas, texto auxiliar */
    --c-font-400: #656d75;   /* Texto secundario, descripciones largas */
    --c-font-500: #2b2f33;   /* Texto principal (body text) */
    --c-font-600: #181c20;   /* Títulos, headers, texto de alto contraste */

    --c-primary-100: #EEF4FA; /* Fondos sutiles, banners suaves, highlights */
    --c-primary-200: #D6E3F1; /* Estados hover light, cards informativas */
    --c-primary-300: #B3CBE4; /* Bordes activos, fondos interactivos */
    --c-primary-400: #7FA6CC; /* Botones secundarios, links suaves */
    --c-primary-500: #4F7FB3; /* Hover / active en botones primarios */
    --c-primary-600: #29547C; /* Botón principal, branding, elementos clave */
    --c-primary-700: #1F4469; /* Active / pressed, headers fuertes */
    --c-primary-800: #163554; /* Fondos oscuros, top bars */
    --c-primary-900: #0E233B; /* Dark sections, footer, dark mode base */

    --c-secondary-100: #EDF7F8; /* Fondos informativos, success light */
    --c-secondary-200: #D2ECEE; /* Hover suave, mensajes secundarios */
    --c-secondary-300: #9FCFD4; /* Badges suaves, iconos */
    --c-secondary-400: #4B949C; /* Links secundarios, iconografía */
    --c-secondary-500: #3F7F86; /* Hover / active secundarios */
    --c-secondary-600: #336A70; /* Estados activos, botones secundarios */
    --c-secondary-700: #28585D; /* Dark teal, secciones */
    --c-secondary-800: #1E4246; /* Fondos oscuros */
    --c-secondary-900: #132C2F; /* Dark mode, footer alternativo */

    --c-accent-100: #FBF7E3; /* Fondos de aviso, highlights suaves */
    --c-accent-200: #F4EDBF; /* Hover light, badges informativos */
    --c-accent-300: #E8D67A; /* Iconos destacados, etiquetas */
    --c-accent-400: #f0ca50; /* CTA principal, acciones importantes */
    --c-accent-500: #B89A3C; /* Hover CTA, focus */
    --c-accent-600: #9A7E30; /* Active CTA, iconos fuertes */
    --c-accent-700: #7E6526; /* Dorado oscuro, detalles premium */
    --c-accent-800: #604C1C; /* Fondos oscuros cálidos */
    --c-accent-900: #403213; /* Dark accent, dark mode highlights */

    --c-indigo-600: #4f62a8;
    --c-indigo-100: #EEF1FA;

    --c-green-600: #3f7e69;
    --c-green-100: #EDF6F2;

    --c-bkg: #f9fafa;        /* Fondo general de la app, descansa la vista */

    /* --------------- FONT-FAMILY --------------- */
    --ff-title    : 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-subtitle : 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-main     : 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* --------------- FONT-SIZE --------------- */
    --fs-50:  0.6875rem; /* 11px */
    --fs-100: 0.75rem;   /* 12px */
    --fs-200: 0.8125rem; /* 13px */
    --fs-300: 0.875rem;  /* 14px */
    --fs-400: 0.9375rem; /* 15px ← body */
    --fs-500: 1.0625rem; /* 17px */
    --fs-600: 1.25rem;   /* 20px */
    --fs-700: 1.5rem;    /* 24px */
    --fs-800: 1.875rem;  /* 30px */
    --fs-900: 2.25rem;   /* 36px */

    /* --------------- CLAMP --------------- */
    /* min viewport width: 500px | max viewport width: 900px */
    --cl-100-300: clamp(var(--fs-100), 0.6719rem + 0.25vw, var(--fs-300)); 
    --cl-200-500: clamp(var(--fs-200), 0.6563rem + 0.5vw, var(--fs-500));
    --cl-300-600: clamp(var(--fs-300), 0.4063rem + 1.5vw, var(--fs-600));
    --cl-500-700: clamp(var(--fs-500), 0.5156rem + 1.75vw, var(--fs-700));
    --cl-600-900: clamp(var(--fs-600), 0rem + 4vw, var(--fs-900));

    /* --------------- SIZES --------------- */
    --max-width: 1800px;
    --max-width-small: 1200px;
    --max-width-big: 2000px;
    --section-padding-block: 8rem;
    --section-padding-inline: 2rem;
    --big-section-margin: 1.5rem;

    --header-height: 97px;

    /* --------------- OTHER --------------- */
    --br-big: 1rem;
    --br-med: .5rem;
    --br-small: 0.25rem;

    --border-size: .5px;
    --b-main: var(--border-size) solid var(--c-font-100);
    --b-dark: var(--border-size) solid #d6d9dd;
    --b-footer: var(--border-size) solid #4F7FB3;

    --ls-100: 0.04em;  /* textos muy pequeños (labels, meta, overlines) */
    --ls-200: 0.06em;  /* navegación, botones pequeños */
    --ls-300: 0.08em;  /* secciones, captions, topbar */

    --box-shadow: 0 0 0 var(--border-size) var(--c-font-200), 0 0 0 0 #e9e9e900;
    --box-shadow-hover: 0 0 0 var(--border-size) var(--c-font-200), 0 10px 30px 5px #e9e9e980;
}

@media screen and ( max-width: 900px ){
  :root{
    --section-padding-block: 4rem;
    --section-padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--c-font-100);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--c-font-400);
  /* border-radius: 20rem; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--c-font-500);
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: baseline;
}

img, picture, video, iframe, figure {
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: inherit;

  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

p a, span a {
  display: inline;
  text-decoration: underline;
}

ul:not(.list) li, ol:not(.list) li {
  list-style-type: none;
}

html {
  scroll-behavior: smooth;
  font-size: 150%;
}

h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em {
  font-size: 1em;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  color: inherit;
}

b, strong{
    font-weight: 600;
}

u{
  text-decoration: underline;
}

em{
  font-style: italic;
}

hr{
  margin: 1rem 0;
   border-bottom: 1.5px solid var(--c-primary-100);
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

::-moz-selection {
  color: var(--c-secondary-400);
  background-color: var(--c-secondary-100);
}

::selection {
  color: var(--c-secondary-400);
  background-color: var(--c-secondary-100);
}

form, input, textarea, select, button, label {
  font-family: inherit;
  font-size: inherit;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  background-color: transparent;
  color: inherit;
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

textarea{
  resize: vertical;
  min-height: 100px;
}

table, tr, td {
  border-collapse: collapse;
  border-spacing: 0;
}

svg {
  width: 100%;
  display: block;
  /* fill: currentColor; */
  pointer-events: none;
}

a svg, p svg, button svg{
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

body {
  min-height: 100vh;
  font-size: 100%;
  font-family: var(--ff-main);
  font-weight: 400;
  color: var(--c-font-500);
  letter-spacing: 0.01em;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}