/* =========================================================
   48 FIL Palacio de Minería — Landing Page
   Paleta oficial y tipografía Montserrat
   ========================================================= */

/* ---------- Tipografía (Montserrat) ---------- */
@font-face { font-family:"Montserrat"; font-weight:300; font-style:normal; font-display:swap; src:url("../assets/fonts/Montserrat-Light.otf") format("opentype"); }
@font-face { font-family:"Montserrat"; font-weight:400; font-style:normal; font-display:swap; src:url("../assets/fonts/Montserrat-Regular.otf") format("opentype"); }
@font-face { font-family:"Montserrat"; font-weight:500; font-style:normal; font-display:swap; src:url("../assets/fonts/Montserrat-Medium.otf") format("opentype"); }
@font-face { font-family:"Montserrat"; font-weight:600; font-style:normal; font-display:swap; src:url("../assets/fonts/Montserrat-SemiBold.otf") format("opentype"); }
@font-face { font-family:"Montserrat"; font-weight:700; font-style:normal; font-display:swap; src:url("../assets/fonts/Montserrat-Bold.otf") format("opentype"); }
@font-face { font-family:"Montserrat"; font-weight:800; font-style:normal; font-display:swap; src:url("../assets/fonts/Montserrat-ExtraBold.otf") format("opentype"); }
@font-face { font-family:"Montserrat"; font-weight:900; font-style:normal; font-display:swap; src:url("../assets/fonts/Montserrat-Black.otf") format("opentype"); }

/* ---------- Variables ---------- */
:root{
  --verde:#028387;
  --verde-dark:#016d70;
  --naranja:#f26543;
  --amarillo:#fbb158;
  --azul:#28a0da;
  --verde-2:#018b4e;
  --texto:#1a1a1a;
  --blanco:#ffffff;
  --wrap:1180px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Montserrat",system-ui,sans-serif;
  color:var(--texto);
  background:var(--verde);
  line-height:1.4;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{background:var(--verde)}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:14px;
  gap:16px;
}
.brand{display:inline-flex}
.brand__logo{
  height:clamp(42px,5vw,56px);
  width:auto;
  /* El monograma entregado es azul marino; en el header teal se muestra en
     blanco (como en el diseño) invirtiéndolo. */
  filter:brightness(0) invert(1);
}
.escudos{display:flex;align-items:center;gap:14px}
.escudo{
  height:clamp(44px,5.5vw,56px);
  width:auto;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{background:var(--blanco)}
.hero__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,5vw,64px);
  padding-block:clamp(28px,5vw,56px);
  flex-wrap:wrap;
}
.hero__logo{height:clamp(96px,13vw,150px);width:auto}
.hero__fechas{height:clamp(56px,8vw,84px);width:auto}

/* =========================================================
   ACCIONES (fondo verde con tarjetas)
   ========================================================= */
.acciones{background:var(--verde)}
.acciones__inner{padding-block:clamp(40px,6vw,72px)}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
.cards__cell{display:flex;flex-direction:column;align-items:center}

.card{
  display:block;
  width:100%;
  max-width:176px;
}
.card__svg{
  width:100%;
  height:auto;
  overflow:visible;                 /* deja ver la sombra del filtro */
  transition:transform .22s ease;
}
.card:hover .card__svg,
.card:focus-visible .card__svg{transform:translateY(-6px)}
.card:focus-visible{outline:none}

/* Sublinks bajo "Programa Cultural" */
.sublinks{
  margin-top:14px;
  width:100%;
  max-width:176px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}
.sublinks a{
  color:#e7f6f6;
  font-size:12px;
  font-weight:500;
  line-height:1.25;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
  align-self:flex-start;
}
.sublinks a:hover{color:#fff;border-bottom-color:currentColor}

/* CTA */
.cta-wrap{
  display:flex;
  justify-content:center;
  margin-top:clamp(32px,5vw,52px);
}
.cta{display:block;width:100%;max-width:300px}
.cta__svg{
  width:100%;
  height:auto;
  overflow:visible;
  transition:transform .22s ease;
}
.cta:hover .cta__svg,
.cta:focus-visible .cta__svg{transform:translateY(-4px) scale(1.02)}
.cta:focus-visible{outline:none}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--blanco)}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px,4vw,40px);
  padding-block:clamp(24px,4vw,40px);
  flex-wrap:wrap;
}
.footer__badges{display:flex;align-items:center;gap:18px}
.footer__badges img{height:clamp(58px,7vw,78px);width:auto}

.footer__text{
  flex:1 1 300px;
  text-align:center;
  color:var(--verde);
}
.footer__strong{font-weight:700;font-size:clamp(12px,1.3vw,14px);line-height:1.5}
.footer__small{font-weight:500;font-size:clamp(10px,1.1vw,12px);margin-top:6px}

.footer__social{display:flex;align-items:center;gap:14px}
.footer__social img{height:30px;width:30px;transition:transform .2s ease,opacity .2s ease}
.footer__social a:hover img{transform:translateY(-3px);opacity:.85}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .hero__inner{flex-direction:column;text-align:center}
  .cards{grid-template-columns:repeat(2,1fr);gap:28px}
  .sublinks{align-items:center;text-align:center}
  .sublinks a{align-self:center}
  .footer__inner{flex-direction:column;text-align:center}
}

@media (max-width:420px){
  .cards{grid-template-columns:repeat(2,1fr);gap:18px}
  .footer__badges{gap:12px}
}

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}