@media screen and (max-width: 768px) {

  html, body {
    overflow-x: hidden !important;
  }

  #wrapper {
    width: 100% !important;
    padding: 0 !important;
  }

  #wrapper:before {
    display: none !important;
  }

  #wrapper section {
    display: block !important;
    grid-template-areas: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    margin: 0 !important;
  }

  #wrapper section > header,
  #wrapper section > .content,
  #wrapper section > footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    text-align: left !important;
    justify-self: stretch !important;
  }

  #wrapper > section > header:before,
  #wrapper > section > header h1:before,
  #wrapper > section > header h1:after,
  #wrapper > section > header h2:before,
  #wrapper > section > header h2:after,
  #wrapper > section:last-of-type > header:after {
    display: none !important;
  }

  #wrapper > section > .content > section {
    left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .copyright {
    left: 0 !important;
    width: 100% !important;
    padding: 1.5rem !important;
  }

  /* HERO */
  .intro {
    display: block !important;
  }

  .intro > header {
    transform: none !important;
    padding: 2rem 1.5rem 1.5rem 1.5rem !important;
    text-align: center !important;
  }

  .intro > header h1 {
    margin: 0 0 1rem 0 !important;
    font-size: 2.1rem !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
  }

  .intro > header p {
    margin: 0 auto 1.25rem auto !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }

  .intro .actions {
    margin-top: 1rem !important;
    justify-content: center !important;
  }

  .intro .content {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  .intro .content::after {
    display: none !important;
  }

  .image.fill {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .image.fill img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }

  .hero-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    width: 180px !important;
    max-width: 70% !important;
    margin: 1.25rem auto 0 auto !important;
    z-index: 2 !important;
  }

  .hero-login-btn {
    position: relative !important;
    z-index: 5 !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  .hero-cta-wrap {
    margin-top: 1.25rem !important;
    justify-content: center !important;
  }

  /* VÍDEO */
  .video-container {
    height: auto !important;
    padding: 0 !important;
    display: block !important;
  }

  .video-container video {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  /* IMÁGENES */
  .image.main,
  .big-image {
    max-width: 100% !important;
    margin-top: 1.5rem !important;
  }

  .image.main img,
  .big-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  /* FEATURES / LOGOS */
  .features article {
    transform: none !important;
    margin: 1.25rem 0 !important;
  }

  .logos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .logo-item {
    height: 72px !important;
  }

  .logo-item img {
    max-width: 100% !important;
    max-height: 46px !important;
  }

  /* LEGAL */
  .legal-bar {
    gap: 1rem !important;
    padding: 1.5rem !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .legal-bar a {
    text-align: center !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }

  /* FORM */
  form > .fields {
    width: 100% !important;
    margin: 0 0 1.5rem 0 !important;
  }

  form > .fields > .field,
  form > .fields > .field.half,
  form > .fields > .field.third,
  form > .fields > .field.quarter {
    width: 100% !important;
    padding: 1rem 0 0 0 !important;
  }

  /* BOTONES */
  ul.actions {
    margin-left: 0 !important;
  }

  ul.actions li {
    padding-left: 0 !important;
  }

  ul.actions .button,
  ul.actions input[type="submit"] {
    width: 100% !important;
    text-align: center !important;
  }
}

/* =========================
FIX BLOQUE VERDE
========================= */

@media screen and (max-width:768px){

section{
padding:60px 30px;
}

section.accent{
padding:70px 30px;
min-height:auto;
}

section.accent .content{
max-width:520px;
margin:auto;
}

}

/* =========================
MAPA ESPAÑA MOBILE FIX
========================= */

@media screen and (max-width:768px){

img[src*="map"],
img[src*="Mapa"]{

width:100%;
height:auto;

max-width:100%;

display:block;

margin:30px auto;

}

}

@media screen and (max-width:768px){

.hero-cta-wrap{
margin-top:30px;
}

.hero-login-btn{
width:100%;
max-width:260px;
margin:auto;
display:block;
text-align:center;
}

}

/* =========================
MAPA ESPAÑA DENTRO DEL BLOQUE VERDE
SOLO MOBILE
========================= */

@media screen and (max-width:768px){

section.accent .content{
display:flex;
flex-direction:column;
align-items:center;
}

section.accent img[src*="map"],
section.accent img[src*="Mapa"]{

width:100%;
max-width:420px;

margin:40px auto 20px auto;

}

}

@media screen and (max-width:768px){

.mapa-espana{
width:100%;
max-width:520px;
display:block;
margin:40px auto;
}

}

/* =================================
FIX TEMPLATE PARADIGM SHIFT MOBILE
================================= */

@media screen and (max-width:768px){

/* eliminar altura forzada de secciones */

#wrapper > section{
min-height:auto !important;
height:auto !important;
padding:60px 30px;
}

/* eliminar separación header/content */

#wrapper > section > header{
margin-bottom:20px;
}

#wrapper > section > .content{
margin-top:0;
padding-top:0;
}

/* arreglar imagen azul */

.intro .content{
margin-top:-40px;
}

.intro .content img{
width:100%;
height:auto;
display:block;
margin:0;
}

/* compactar bloque referentes */

.dca-members{
margin-top:40px !important;
}

}

/* =========================
MAPA ESPAÑA SOLO MOBILE
========================= */

@media screen and (max-width:768px){

.mapa-espana{
width:100%;
height:auto;
display:block;
margin:40px auto;
max-width:420px;
}

}