/*
=========================================================
BASE.CSS
Estilos base del tema
=========================================================
*/

*,
*::before,
*::after{

	box-sizing:border-box;

}

html{

	font-size:16px;

	scroll-behavior:smooth;

	-webkit-text-size-adjust:100%;

}

body{

	margin:0;

	padding:0;

	font-family:var(--font-primary);

	font-size:var(--font-size-md);

	font-weight:var(--weight-regular);

	line-height:1.7;

	color:var(--text-color);

	background:var(--background);

	text-rendering:optimizeLegibility;

	-webkit-font-smoothing:antialiased;

	-moz-osx-font-smoothing:grayscale;

}

/* ==============================
   IMÁGENES
============================== */

img{

	display:block;

	max-width:100%;

	height:auto;

	border:none;

}

/* ==============================
   ENLACES
============================== */

a{

	color:inherit;

	text-decoration:none;

	transition:var(--transition);

}

a:hover{

	color:var(--color-secondary);

}

/* ==============================
   LISTAS
============================== */

ul,
ol{

	margin:0;

	padding:0;

	list-style:none;

}

/* ==============================
   TÍTULOS
============================== */

h1,
h2,
h3,
h4,
h5,
h6{

	margin:0;

	line-height:1.2;

	font-weight:var(--weight-bold);

	color:var(--heading-color);

}

h1,
h2{

	font-family:var(--font-display);

	font-weight:var(--weight-semibold);

}

h1{

	font-size:clamp(2.5rem,5vw,4.6rem);

}

h2{

	font-size:clamp(2rem,4vw,3.2rem);

}

h3{

	font-size:1.5rem;

}

p{

	margin:0 0 1.5rem;

	color:var(--text-light);

}

/* ==============================
   BOTONES
============================== */

button{

	font:inherit;

	cursor:pointer;

	background:none;

	border:none;

}

/* ==============================
   FORMULARIOS
============================== */

input,
textarea,
select{

	font:inherit;

	width:100%;

}

textarea{

	resize:vertical;

	min-height:160px;

}

/* ==============================
   TABLAS
============================== */

table{

	width:100%;

	border-collapse:collapse;

}

/* ==============================
   SELECCIÓN
============================== */

::selection{

	background:var(--color-secondary);

	color:#fff;

}

/* ==============================
   FOCUS
============================== */

:focus-visible{

	outline:3px solid var(--color-secondary);

	outline-offset:3px;

}

/* ==============================
   SKIP LINK
============================== */

.skip-link{

	position:absolute;

	left:-9999px;

	top:0;

	background:#000;

	color:#fff;

	padding:12px 18px;

	z-index:9999;

}

.skip-link:focus{

	left:20px;

	top:20px;

}

/* ==============================
   SCREEN READER
============================== */

.screen-reader-text{

	position:absolute;

	width:1px;

	height:1px;

	padding:0;

	margin:-1px;

	overflow:hidden;

	clip:rect(0,0,0,0);

	border:0;

}