/* =========================
   RESET Y VARIABLES BASE
========================= */
:root {
  font-size : 100%;
  font-family : system-ui, sans-serif;
  scroll-behavior : smooth;
}

/* =========================
   RESET GENERAL Y ELEMENTOS BASE
========================= */
 * { -ms-overflow-style: none;  scrollbar-width: none;  } 
 *::-webkit-scrollbar { display: none; }
* , *::before , *::after {
  margin : 0;
  padding : 0;
  border : 0;
  box-sizing : border-box;
  vertical-align : baseline;
}
*::before , *::after {
  display : block;
}
img , picture , video , iframe , figure , canvas {
  max-width : 100%;
  display : block;
  width : 100%;
  height : initial;
  object-fit : cover;
  object-position : center center;
}
a {
  display : block;
  text-decoration : none;
  color : inherit;
  font :  inherit;
}
p a {
  display : inline;
}
li , menu, summary {
  list-style-type : none;
}
ol {
  counter-reset : revert;
}
h1 , h2 , h3 , h4 , h5 , h6 , p , span , a , strong , blockquote , i , b , u , em , pre , code , mark , del {
  font :  inherit;
  line-height :  1em;
  text-decoration :  none;
  color : inherit;
  overflow-wrap : break-word;
  text-wrap : pretty;
}

mark {
  background-color : transparent;
}
blockquote::before , blockquote::after , q::before , q::after {
  content : none;
}
form , input , textarea , select , button , label {
  font :  inherit;
  hyphens : auto;
  background-color : transparent;
  color : inherit;
  display : block;
  appearance : none;
}
fieldset {
  border : none;
}
::placeholder {
  color : unset;
}
button , label {
  cursor : pointer;
}
table , tr , td , th , tbody , thead , tfoot {
  border-collapse : collapse;
  border-spacing : 0;
  font : inherit;
}
svg {
  width : 100%;
  height : initial;
  display : block;
  fill : currentColor;
}

/* =========================
   BODY Y TIPOGRAFÍA
========================= */
body {
  min-height : 100vh;
  line-height : 1.5em;
  color : inherit;
  hyphens : auto;
  font-smooth : always;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
     font-family: "Montserrat", sans-serif;
       font-optical-sizing: auto;
}

/* =======================================================
 * Interacciones:
 *   - Hover opcional en enlaces y redes sociales (si se añade)
 *   - Layout flexible y responsive mediante grid y flexbox
 * Datos:
 *   - Contenedores principales: Footer, Footer-grid
 *   - Elementos interactivos: enlaces sociales, logo (posible hover)
 *   - Estados visuales: hover, color, gap, padding
 * Estructura:
 *   - FOOTER:
 *       * Contenedor principal: fondo rojo, flex column, centrado
 *   - GRID DEL FOOTER:
 *       * Grid responsivo con auto-fit, mínimo 14rem por columna
 *       * Centrado horizontal y vertical, gap entre columnas
 *   - ITEMS DEL FOOTER:
 *       * Footer-item: contenedor flex column para cada bloque
 *       * Footer-item--text: títulos de sección con tamaño grande y color dorado
 *       * Footer-item--madeby: texto secundario
 *       * Footer-logo: tamaño del logo
 *   - REDES SOCIALES DEL FOOTER:
 *       * Footer-social-links: contenedor flex row, gap entre iconos
 *       * Footer-social-link: tamaño de cada icono social
 *   - COPYRIGHT:
 *       * Footer-copyright--p: texto con tamaño pequeño
 * Funciones / CSS especiales:
 *   - Uso de flex y grid para layout responsive
 *   - Espaciado y tipografía consistente con el branding
 * =======================================================
 */


/* =========================
   FOOTER PRINCIPAL
========================= */
.Footer{
  background-color:#ee3b37;
  width: 100%;
 display: flex;
 flex-flow: column nowrap;
 justify-content: center;
 align-items: center;
 padding: 1rem;
 gap: 1rem;
}

/* =========================
   GRID DEL FOOTER
========================= */
.Footer-grid{
  width: 80%;
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
justify-content: center;
  align-items: center;
  gap: 2rem;
  color: black;
}

/* =========================
   ITEMS DEL FOOTER
========================= */
.Footer-item{
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  padding: 1rem;
}

.Footer-item--text{
font-size: 1.5rem;
font-weight: 500;
color:black;
}
.Footer-item--madeby{
font-size: 1rem;
}
.Footer-logo{
  width: 3rem;
}

/* =========================
   REDES SOCIALES DEL FOOTER
========================= */
.Footer-social-links{
    flex-flow: row nowrap;
display: flex;
gap: 1rem;
}
.Footer-social-link{
  width: 1.5rem;
}

.Footer-text{
  font-weight: 500;
  font-size: 1rem;
}
.Footer-item--logo{
}

/* =========================
   COPYRIGHT DEL FOOTER
========================= */
.Footer-copyright--p{
  font-size: .9rem;
}