/* ==========================================================================
   EMPRESA (/empresa-complementos-textiles/) y bloques compartidos con
   SERVICIOS (/servicios-textiles-alyco-import/), que en produccion es un
   duplicado de la estructura de Empresa: servicios.html carga este fichero
   y despues servicios.css.
   Medidas tomadas en produccion con Playwright a 1440, 900 y 390 px.
   ========================================================================== */

/* Josefin Sans 600 (Google Fonts, OFL): solo la usa el boton "¡pidelo!".
   Basta el subconjunto latin. */
@font-face {
  font-family: "Josefin Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../../fonts/josefin-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Espacio blanco entre el contenido y el pie: 20px en escritorio y 40px
   en tablet/movil (padding de 40px del main de WoodMart, al que el pie
   se superpone 20px en escritorio). */
.pagina-empresa .contenido,
.pagina-servicios .contenido { padding-bottom: 20px; }
@media (max-width: 1024px) {
  .pagina-empresa .contenido,
  .pagina-servicios .contenido { padding-bottom: 40px; }
}

/* ---------- Intro azul marino (a sangre) ----------------------------------
   Se monta 3px sobre el banner. 150px de padding + 10px de la columna. */
.intro-navy {
  margin-top: -3px; padding: 160px 0;
  background: var(--navy); color: var(--white); text-align: center;
}
.intro-navy__titulo {
  margin: 0 0 var(--widgets-spacing); color: var(--white);
  font-size: var(--fs-h2); font-weight: 700; line-height: 1; text-transform: uppercase;
}
.intro-navy__texto { max-width: 65%; margin-inline: auto; }

/* ---------- Bloques de texto + imagen (2 columnas 50/50) ------------------
   Dentro del contenedor de 1222 (util 1192): columnas de 586 con 20 de
   separacion, centradas en vertical. 50px de seccion + 10px de columna. */
.bloque { padding-block: 60px; }
.bloque__fila {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center;
}
.bloque__img { justify-self: center; width: 500px; max-width: 100%; }
.bloque__texto + .titulo-seccion { margin-top: var(--widgets-spacing); }
@media (max-width: 767px) {
  .bloque__fila { grid-template-columns: minmax(0, 1fr); }
  .bloque__img { width: 100%; }
}

/* ---------- CTA "¿no encuentras lo que buscas?" (a sangre) ----------------
   Fondo navy + capa #39AAFF con la foto al 40 %. Se solapa 20px con lo que
   sigue (margin-bottom negativo, como en produccion). */
.cta-medida {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 700px; margin-bottom: -20px; padding-block: 10px;
  background: var(--navy); color: var(--white); text-align: center;
}
.cta-medida::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4;
  background: var(--blue) url("../../img/paginas/destacada-home-3.jpg") center / cover no-repeat;
}
.cta-medida .titulo-seccion { margin: 0 0 var(--widgets-spacing); }
/* Fuente "JOSEFINA" en produccion: no carga, se ve la sans-serif del sistema */
.cta-medida__subtitulo {
  margin: 0 0 var(--widgets-spacing); color: var(--white);
  font-family: var(--font-sistema); font-size: 40px; font-style: italic; font-weight: 400; line-height: 1;
}
.cta-medida__boton {
  padding: 20px 20px 10px;
  font-family: "Josefin Sans", sans-serif; font-size: 40px; font-weight: 600; line-height: 1;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .cta-medida { min-height: 400px; }
  .cta-medida__subtitulo, .cta-medida__boton { font-size: 20px; }
}