/* FRANJA a sangre, a tamano nativo.

   El pie vive FUERA de .scale-canvas, en flujo normal a nivel de body: por
   eso un width:100% ya es el ancho de la ventana y el color llega de borde
   a borde sin trucos. Antes estaba dentro del lienzo de 1440px y hacia
   falta una variable (--bleed-w) para romper ese ancho; ahora sobra.

   No se usa 100vw: incluye la barra de desplazamiento y devolveria el
   temblor. */
.footer{
  background:var(--primary-blue);
  color:var(--white);
  padding:75px 80px 60px;          /* Figma: 75 arriba, 60 abajo, 80 a los lados */
  margin-top:100px;
  width:100%;
}

/* Contenido centrado y topado a 1440, a tamaño nativo como la franja. */
.footer__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;gap:30px;   /* Figma: 30px entre secciones */
}

.footer__rule{height:0;border-top:1px solid var(--cool-gray-30);margin:0;}

.footer__top{
  display:flex;align-items:flex-start;gap:193px;
}

.footer__top > div:first-child{width:346px;flex:none;}

.footer__top > div:nth-child(2){width:224px;flex:none;}

.footer__news{width:320px;flex:none;}

.footer h3{
  font-family:var(--font-body);font-weight:700;
  font-size:20px;letter-spacing:4px;line-height:normal;
  color:var(--secondary-frost);
  width:326px;
}

.footer__top > div:first-child > p{
  font-family:var(--font-din);font-weight:400;
  font-size:15px;line-height:20px;
  color:var(--secondary-frost);
  margin-top:15px;                 /* Figma: 15px entre título y descripción */
}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:12px 20px;
  border:2px solid var(--secondary-frost);border-radius:22px;
  font-family:var(--font-din);font-weight:700;
  font-size:20px;letter-spacing:.6px;line-height:1;
  color:var(--secondary-frost);
  /* Figma sitúa el botón a 140.35px del alto de la columna. El bloque de
     texto de encima mide ~127px, así que el aire que queda son estos 15px.
     Si el titular parte en otro número de líneas, es el valor a tocar. */
  margin-top:15px;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}

.btn-outline:hover{transform:translateY(-2px);background:var(--white);color:var(--primary-blue);}

.footer h4{
  font-family:var(--font-body);font-weight:700;
  font-size:18px;line-height:1.1;color:var(--white);
}

.footer__top > div:nth-child(2) > p{
  font-family:var(--font-body);font-weight:400;
  font-size:16px;line-height:1;color:var(--white);
  width:224px;
  /* Los 45px de Figma se miden desde el borde superior del encabezado, que
     mide ~20px; de ahí estos 25px de margen. Igual en los dos siguientes. */
  margin-top:25px;
}

.footer__h4--siguenos{margin-top:25px;}

.footer__social{display:flex;gap:16px;margin-top:25px;}

.social-ico{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
  transition:transform .2s ease,opacity .2s ease;
}

.social-ico svg{width:24px;height:24px;}

.social-ico:hover{transform:translateY(-2px);opacity:.8;}

.footer__news{text-align:center;}

.footer__news h4{
  font-family:var(--font-ui);font-weight:600;
  font-size:20px;line-height:24px;color:var(--secondary-frost);
}

.footer__news > p{
  font-family:var(--font-ui);font-weight:400;
  font-size:16px;line-height:24px;color:var(--secondary-frost);
  margin-top:8px;
}

.news-field{position:relative;margin-top:18px;}

.news-field input{
  width:320px;max-width:100%;
  padding:12px 44px 12px 16px;
  border:1px solid var(--secondary-frost);border-radius:4px;
  background:transparent;color:var(--secondary-frost);
  font-family:var(--font-ui);font-weight:400;font-size:16px;line-height:24px;
}

.news-field input::placeholder{color:var(--secondary-frost);opacity:.75;}

.news-field input:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px;}

.news-field svg{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;pointer-events:none;color:var(--secondary-frost);
}

.btn-news{
  width:320px;max-width:100%;
  margin-top:15px;padding:12px 20px;
  border:2px solid var(--white);border-radius:10px;
  background:transparent;color:var(--white);
  font-family:var(--font-din);font-weight:700;
  font-size:16px;line-height:24px;letter-spacing:.48px;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}

.btn-news:hover{transform:translateY(-2px);background:var(--white);color:var(--primary-blue);}

.btn-news[disabled]{opacity:.75;cursor:default;transform:none;}

.news-consent{
  display:flex;align-items:flex-start;gap:8px;
  width:287px;margin-top:12px;text-align:justify;
}

.news-consent span{
  font-family:var(--font-ui);font-weight:400;
  font-size:10px;line-height:normal;color:var(--secondary-frost);
}

.news-consent input{
  width:7px;height:7px;margin:2px 0 0;flex:none;
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--secondary-frost);border-radius:1px;
  background:transparent;cursor:pointer;
}

.news-consent input:checked{background:var(--secondary-frost);}

.footer__nav{
  display:flex;justify-content:space-between;align-items:flex-start;gap:40px;
}

.footer__nav-group{display:flex;gap:75px;align-items:flex-start;}

.footer__brand{display:flex;flex-direction:column;}

.footer__logo{height:26px;width:auto;object-fit:contain;}

.footer .footer__copyright{
  font-family:var(--font-body);font-weight:400;
  font-size:14px;line-height:1.4;color:var(--white);
  margin:40px 0 0;                 /* Figma: 40px bajo el logo */
}

.footer__nav h5{
  font-family:var(--font-body);font-weight:700;
  font-size:18px;line-height:1.1;color:var(--white);
  white-space:nowrap;
}

.footer__nav ul{
  margin-top:25px;                 /* 45px de Figma menos el alto del h5 */
  display:flex;flex-direction:column;gap:11px;
}

.footer__nav a{
  font-family:var(--font-body);font-weight:400;font-size:16px;
  color:var(--secondary-frost);white-space:nowrap;
  transition:opacity .2s ease,transform .2s ease;display:inline-block;
}

.footer__nav a:hover{opacity:.8;transform:translateX(3px);text-decoration:underline;}

.footer__legal{
  display:flex;justify-content:flex-end;
  font-family:var(--font-body);font-size:16px;
}

.footer__legal ul{display:flex;flex-wrap:wrap;gap:66px;}

.footer__legal a{color:var(--secondary-frost);}

.footer__legal li:last-child a{color:var(--white);}

.footer__legal a:hover{text-decoration:underline;}

@media (max-width:768px){
  .social-ico{width:44px;height:44px;}
  .footer__nav a,
  .footer__legal a{display:flex;align-items:center;min-height:44px;}
  .footer__nav ul{gap:0;}
  .news-field input{padding:13px 44px 13px 14px;}
  .btn-news{padding:13px 24px;}
  .footer{padding:64px 40px 48px;}
  .footer__top{flex-wrap:wrap;gap:40px;}
  .footer__top > div:first-child,
  .footer__top > div:nth-child(2),
  .footer__news{width:100%;flex:1 1 260px;}
  .footer h3{width:auto;}
  .footer__news{text-align:left;}
  .news-consent{width:auto;}
  .footer__nav{flex-direction:column;gap:32px;}
  .footer__nav-group{flex-wrap:wrap;gap:32px;}
  .footer__legal{justify-content:flex-start;}
}

@media (max-width:768px){
  .footer{padding:56px 24px 40px;}
  .footer__top{flex-direction:column;flex-wrap:nowrap;gap:36px;}
  .footer__top > div:first-child,
  .footer__top > div:nth-child(2),
  .footer__news{width:100%;flex:none;}
  .footer h3{font-size:19px;letter-spacing:3px;width:auto;}
  .footer__news{text-align:left;}
  .news-field input,.btn-news{width:100%;}
  .footer__nav{flex-direction:column;gap:8px;}
  .footer__nav-group{flex-direction:column;gap:8px;}
  .footer__nav ul{margin-top:6px;gap:0;}
  .footer__nav a,
  .footer__legal a{display:flex;align-items:center;min-height:44px;}
  .footer__nav a:hover{transform:none;}
  .social-ico{width:44px;height:44px;}
  .news-field input{padding:13px 44px 13px 14px;}
  .btn-news{width:100%;padding:13px 24px;}
  .btn-outline{min-height:48px;}
  .footer__legal{flex-direction:column;gap:4px;}
  .footer__legal ul{flex-direction:column;gap:0;}
}

@media (max-width:480px){
  .footer{padding:44px 18px 32px;}
  .footer h3{font-size:18px;letter-spacing:2px;}
  .footer__rule{margin:32px 0 26px;}
}

/* Modal de formularios.

   El display:flex del overlay pisaria la regla [hidden]{display:none} que
   trae el navegador de serie, asi que hace falta declararla a mano; sin la
   segunda regla el modal se veria siempre. */
.forms-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;}
.forms-modal[hidden]{display:none;}
.forms-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.forms-modal__panel{
  position:relative;background:#fff;color:var(--primary-blue);
  padding:40px;border-radius:8px;min-width:280px;max-width:90vw;
  text-align:center;
}
.forms-modal__x{
  position:absolute;top:12px;right:16px;background:none;border:0;
  font-size:24px;line-height:1;cursor:pointer;color:inherit;
}
.forms-modal__list{
  list-style:none;margin:24px 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}

/* Boton relleno, no enlace subrayado: es la accion principal del modal. */
.forms-modal__list a{
  display:inline-block;background:var(--primary-blue);color:#fff;
  text-decoration:none;padding:14px 32px;border-radius:8px;
  font-weight:600;transition:opacity .2s ease;
}
.forms-modal__list a:hover,
.forms-modal__list a:focus{opacity:.85;color:#fff;text-decoration:none;}