/* VARIABLES */
:root { --font-family: "Open Sans", sans-serif; --radius-8:8px; --radius-16:16px; --transition: .3s ease; }

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
input, textarea, select, button { font: inherit; }

/* BASE */
body { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font-family); font-size: 16px; line-height: 1.5; color: #565655; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { text-decoration: none; transition: color var(--transition), background-color var(--transition), opacity var(--transition); }
button { transition: background-color var(--transition), color var(--transition), opacity var(--transition); }
:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }

/* LAYOUT */
.container-fluid { width: 100%; clear: both; }
.container { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: 20px; }
#contenido { flex: 1; }

/* UTILIDADES */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Mobile-first: por defecto (0 - 767px) */
.d-desktop { display: none !important; }
.d-mobile { display: block !important; }

/* Desktop (768px en adelante) */
@media (min-width: 768px) {
	.d-desktop { display: block !important; }
	.d-mobile { display: none !important; }
}