/* ============================================================
   CEMPROTECTA · responsive
   Los siete cortes del prototipo V2/V3, en un fichero propio y
   ENCOLADO EL ULTIMO. Es deliberado: muchas de estas reglas
   redefinen componentes cuya base vive en components.css. Con la
   misma especificidad gana el fichero que carga despues, asi que
   si el responsive no fuera el ultimo quedaria anulado -que es
   exactamente lo que ocurria antes de separarlo-.
   ============================================================ */


/* 1 · 1240 — la cabecera empieza a comprimirse */
@media (max-width:1239.98px){
  .hd .wp-block-navigation__container{gap:13px}
  .hd .wp-block-navigation-item__content{font-size:13.5px}
  .hd-main .wp-block-button__link{padding:11px 14px; font-size:14px}
  .hd-in{gap:var(--s4)}
}

/* 2 · 1120 — el margen lateral baja de 48 a 24 */
@media (max-width:1119.98px){
  :root{--pad:var(--s5)}
}

/* 3 · 1060 — el CTA de cabecera se retira para que quepa el menú */
@media (max-width:1059.98px){
  .hd-main .wp-block-buttons{display:none}
}

/* 4 · 980 — todas las retículas de dos y más columnas pasan a una */
@media (max-width:979.98px){
  .bleed.right,.bleed.left{grid-template-columns:1fr; gap:var(--s6)}
  .bleed.right > .txt,.bleed.left > .txt{
    padding-inline:var(--pad); max-width:var(--maxw); margin:0 auto; width:100%;
  }
  .bleed .ph{border-inline:none}
  .duo{grid-template-columns:1fr; gap:var(--s6)}
  .flow{grid-template-columns:1fr 1fr; gap:var(--s5) var(--s6)}
  .seq li{grid-template-columns:4.5rem minmax(0,1fr); gap:var(--s3) var(--s4)}
  .seq h3{grid-column:2}
  .seq p{grid-column:2}
  .row{grid-template-columns:1fr; gap:var(--s2)}
  .fam a{grid-template-columns:1fr; gap:var(--s3)}
  .incl-r{grid-template-columns:1fr; gap:var(--s2)}
  .ft-g{grid-template-columns:1fr 1fr}
}

/* 5 · 900 — menú hamburguesa, y el CTA vuelve porque ya hay sitio */
@media (max-width:899.98px){
  .hd .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}
  .hd .wp-block-navigation__responsive-container-open{display:flex}
  .hd .wp-block-navigation{flex:0 0 auto}
  .hd-main .wp-block-buttons{display:flex}
  .hd-main .hd-in{justify-content:space-between; gap:var(--s3)}
  /* El panel desplegable del menu es position:fixed. Un ancestro con
     backdrop-filter se convierte en su bloque contenedor, asi que el panel
     quedaba encerrado dentro de la cabecera en vez de cubrir la pantalla y se
     veia cortado. Desde el corte en que aparece el boton de menu se retira el
     desenfoque; el fondo pasa a opaco, que es lo que el desenfoque simulaba. */
  .hd{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper)}
}

/* 6 · 680 — modo móvil: ritmo más corto, columna única, barra fija inferior */
@media (max-width:679.98px){
  :root{--secY:var(--s7); --pad:22px}
  body{font-size:16.5px}
  .hero{padding:var(--s8) 0 var(--s7)}
  .hero::before{opacity:.45}
  .hd{position:static}
  .hd-main .wp-block-buttons{display:none}   /* la barra fija inferior asume el CTA */
  .hd-top .cm-email{display:none}
  .ft-g{grid-template-columns:1fr; gap:var(--s5)}
  .grid3{grid-template-columns:1fr; gap:var(--s3)}
  .pick{padding:var(--s4)}
  .flow{grid-template-columns:1fr; gap:0}
  .flow > div{padding:var(--s4) 0; border-bottom:1px solid var(--line); gap:var(--s1)}
  .flow > div:last-child{border-bottom:none; padding-bottom:0}
  .seq li{grid-template-columns:3.2rem minmax(0,1fr); padding:var(--s4) 0; gap:var(--s2) var(--s3)}
  .cols2{columns:1}
  .close .wrap{padding-top:var(--s8); padding-bottom:var(--s8)}
  .mbar{display:flex}
  .tabs{overflow-x:auto; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap; font-size:15px; padding:var(--s3)}
  /* Botones a ancho completo en movil. Se nombran las dos formas: la clase
     del prototipo y la que produce el bloque de boton de WordPress. */
  .btns .btn{width:100%}
  .btns .wp-block-button{width:100%}
  .btns .wp-block-button__link{width:100%}
  .btns .tel{width:100%; justify-content:center}
  .btn-3, p.btn-3{width:auto}
  /* El diagrama de la portada cambia de orientacion, no de contenido. */
  .dg-wide{display:none} .dg-tall{display:block}
  .ph{min-height:200px}
  .ph.tall{min-height:260px}
  .ph.portrait{aspect-ratio:3/4}
  .countries{gap:var(--s5)}
  .figs{gap:var(--s3)}
  .fig{flex:1 1 100%; padding:var(--s4) var(--s5)}
  .incl-r,.incl-f,.incl-h{padding-inline:var(--s5)}
  .faq summary{font-size:18px; padding-right:var(--s6)}
  .statement{max-width:none}
}

/* 7 · 400 — móviles estrechos: el margen baja a 18 */
@media (max-width:399.98px){
  :root{--pad:18px}
  .fam a,.row{gap:var(--s2)}
  .mbar .btn{font-size:14px; padding:13px 8px}
}

/* ---------- pie entre 680 y 980 ----------
   Con dos columnas, el bloque de marca y el menu Web quedaban en la misma
   fila y la marca dejaba debajo un hueco de casi 200 px. Los tres grupos de
   enlaces pasan a una fila de tres y la marca ocupa el ancho completo. */
@media (max-width:979.98px) and (min-width:680px){
  .ft-g{grid-template-columns:repeat(3,1fr)}
  .ft-g > div:first-child{grid-column:1 / -1}
}

/* ---------- pestanas a dos columnas en movil (23.09.2026) ----------
   Con desplazamiento horizontal y barra oculta, la segunda pestana quedaba
   cortada a 390 px sin ninguna pista de que hubiera mas. Por debajo de
   480 px las dos pestanas se reparten el ancho y su texto puede partirse
   en dos lineas: aguanta tambien etiquetas mas largas en catalan, ingles
   o ruso. */
@media (max-width:479.98px){
  .tabs{overflow-x:visible}
  .tab{flex:1 1 0; min-width:0; white-space:normal; line-height:1.3; text-align:center; font-size:14.5px; padding:var(--s3) var(--s2)}
}