/* ==========================================================
BASE.CSS
Sistema global del sitio Soluciones Efectivas.

Contiene:
- Variables de diseño
- Reset global
- Tipografía base
- Elementos HTML generales
- Contenedores
- Accesibilidad

No incluir:
- Header
- Footer
- Componentes específicos
- Secciones de páginas
========================================================== */


/* ==========================================================
VARIABLES GLOBALES
========================================================== */

:root{
  --sea-blue-950:#0c2448;
  --sea-blue-900:#12386d;
  --sea-blue-800:#184687;
  --sea-blue-700:#2460a9;
  --sea-blue-100:#eaf1fa;

  --sea-green-900:#4f6519;
  --sea-green-800:#678221;
  --sea-green-700:#7d9d29;
  --sea-green-600:#95b734;
  --sea-green-500:#a8c94f;
  --sea-green-400:#bad96d;
  --sea-green-300:#cce69a;
  --sea-green-200:#dff0bf;
  --sea-green-100:#f2f7e6;
  --sea-green-050:#f8fbf1;

  --sea-wine-800:#67013a;

  --sea-ink:#172033;
  --sea-muted:#5f6b7d;
  --sea-line:#dfe5ec;
  --sea-surface:#f6f8fb;
  --sea-white:#ffffff;

  --shadow-sm:0 10px 30px rgba(18,56,109,.08);
  --shadow-lg:0 24px 70px rgba(18,56,109,.16);

  --radius-sm:14px;
  --radius-md:24px;
  --radius-lg:36px;

  --container:1180px;
  --header-height:88px;
}


/* ==========================================================
RESET GLOBAL
========================================================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--sea-ink);
  background:var(--sea-white);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size:16px;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body.menu-open{
  overflow:hidden;
}


img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  color:inherit;
}

ul{
  margin:0;
  padding:0;
  list-style:none;
}


h1,
h2,
h3,
p{
  margin-top:0;
}

h1,
h2,
h3{
  line-height:1.12;
  text-wrap:balance;
}

p{
  text-wrap:pretty;
}


/* ==========================================================
ESTRUCTURA GLOBAL
========================================================== */

.container{
  width:min(calc(100% - 40px),var(--container));
  margin-inline:auto;
}

.section{
  padding:110px 0;
}


/* ==========================================================
ACCESIBILIDAD
========================================================== */

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:9999;
  padding:12px 16px;
  color:var(--sea-white);
  background:var(--sea-blue-950);
  border-radius:8px;
  transform:translateY(-150%);
  transition:transform .2s ease;
}

.skip-link:focus{
  transform:translateY(0);
}


:focus-visible{
  outline:3px solid rgba(149,183,52,.65);
  outline-offset:3px;
}

.button:focus-visible{
 outline:3px solid var(--sea-green-600);
 outline-offset:4px;
}

/* ==========================================================
RESPONSIVE GLOBAL
========================================================== */

@media(max-width:700px){

  .container{
    width:min(calc(100% - 28px),var(--container));
  }

  .section{
    padding:68px 0;
  }

}


@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }

}