/* =========================================================
   TECNOCOPIA — AJUSTES FINALES RESPONSIVE
   ========================================================= */

/* Evita desbordamientos que obliguen al navegador móvil a reducir la página */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* HERO de páginas de servicio: proporción estable en escritorio */
.service-page-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px) !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: center !important;
}

.service-page-hero-image {
  width: 100% !important;
  max-width: 520px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.service-page-hero-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 410px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* En Copistería, la imagen principal queda equilibrada con la de Encuadernaciones */
body:has(.service-page-hero-image img[src*="copisteria-malaga"]) .service-page-hero-image {
  max-width: 500px !important;
}

/* Estudiantes / Autónomos / Empresas / Profesionales en una fila */
.audience-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.audience-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* Imágenes que admiten zoom temporal con dos dedos */
.tecno-pinch-zoom {
  transform: scale(1);
  transform-origin: center center;
  transition: transform .18s ease;
  will-change: transform;
}

.tecno-pinch-zoom.tecno-pinching {
  position: relative;
  z-index: 1200;
  transition: none;
}

/* Móvil */
@media (max-width: 768px) {
  .service-page-hero {
    overflow: visible !important;
  }

  .service-page-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
  }

  .service-page-hero-grid > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  .service-page-hero-image {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
  }

  .service-page-hero-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .service-page-lead,
  .service-page-hero p,
  .service-section p,
  .service-section li {
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  .service-page-hero h1 {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
    line-height: 1.08 !important;
  }

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

  .audience-item {
    min-height: 58px !important;
    padding: 12px 9px !important;
  }
}

@media (max-width: 420px) {
  .audience-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }

  .audience-item {
    font-size: .92rem !important;
  }
}


/* =========================================================
   REFINAMIENTOS FINALES V2
   ========================================================= */

/* La fila de públicos de Copistería debe verse realmente en horizontal en escritorio */
@media (min-width: 769px) {
  .audience-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .audience-strip .audience-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 260px !important;
    white-space: nowrap !important;
  }
}

/* Imágenes hero: aspecto equilibrado y sin "zoom" forzado */
.service-page-hero-image img {
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* En móvil, cada página se apila de forma natural */
@media (max-width: 768px) {
  .service-page-hero-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .service-page-hero-grid > div:first-child {
    order: 1 !important;
  }

  .service-page-hero-image {
    order: 2 !important;
  }

  .service-page-hero-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* La imagen de Fotocopias / Impresión digital queda contenida y no domina la pantalla */
  body:has(.service-page-hero-image img[src*="copisteria-malaga"]) .service-page-hero-image {
    max-width: 560px !important;
    margin-inline: auto !important;
  }
}

/* El zoom temporal no deja la imagen ampliada al soltar */
.tecno-pinch-zoom {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* =========================================================
   CORRECCIONES V3
   ========================================================= */

/* Separación clara entre botones de presupuesto y WhatsApp */
.service-page-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  align-items:center !important;
}

/* Cuando eliminamos la imagen de carpetas en Ploteado, el texto ocupa el ancho natural */
.finish-text-only{
  width:100% !important;
  max-width:980px !important;
  margin-inline:auto !important;
}

/* En móvil los botones finales quedan con separación y sin amontonarse */
@media (max-width: 600px){
  .service-page-actions{
    gap:12px !important;
  }

  .service-page-actions .btn{
    margin:0 !important;
  }
}


/* =========================================================
   CORRECCIÓN V4 — BOTONES FINALES MÁS SEPARADOS
   ========================================================= */

/* Solo afecta al bloque final de las páginas de servicios */
.service-final-cta .service-page-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  column-gap:60px !important;
  row-gap:16px !important;
}

.service-final-cta .service-page-actions .btn{
  margin:0 !important;
}

/* En móvil siguen separados y cómodos de pulsar */
@media (max-width: 600px){
  .service-final-cta .service-page-actions{
    column-gap:28px !important;
    row-gap:14px !important;
  }
}


/* =========================================================
   CORRECCIÓN V6 — ESPACIO ENTRE BOTONES Y FOOTER
   ========================================================= */

/* Los botones vuelven a una separación normal entre sí */
.service-final-cta .service-page-actions{
  column-gap:14px !important;
  row-gap:12px !important;
}

/* Espacio blanco claro antes de la franja azul del pie */
.service-final-cta{
  padding-bottom:42px !important;
}

@media (max-width: 600px){
  .service-final-cta{
    padding-bottom:32px !important;
  }
}


/* =========================================================
   CORRECCIÓN V7 — ESPACIADO ENTRE SECCIONES + FOOTER
   ========================================================= */

/* Más aire vertical entre bloques de las páginas de servicios */
.service-section{
  padding-top:56px !important;
  padding-bottom:56px !important;
}

.service-section + .service-section{
  margin-top:12px !important;
}

/* Rótulos azules de sección */
.section-kicker,
.service-section .section-kicker,
.service-related .section-kicker,
.service-final-cta .section-kicker{
  display:block !important;
  margin-top:0 !important;
  margin-bottom:18px !important;
  line-height:1.25 !important;
}

/* Títulos principales de cada bloque */
.service-section h2,
.service-related h2,
.service-final-cta h2{
  margin-top:0 !important;
  margin-bottom:18px !important;
}

/* Párrafos introductorios y listas con más separación */
.service-section > .container > p,
.service-section .container > p,
.service-related p,
.service-final-cta p{
  margin-bottom:20px !important;
}

.service-section ul,
.service-section .audience-strip{
  margin-top:20px !important;
  margin-bottom:22px !important;
}

/* Bloques FAQ: más separación respecto al rótulo y respecto a la sección anterior */
.faq-section,
.service-faq{
  padding-top:58px !important;
  padding-bottom:58px !important;
}

/* Mantener el espacio antes del footer en CTAs finales */
.service-final-cta{
  padding-top:46px !important;
  padding-bottom:42px !important;
}

/* Footer: "Configurar cookies" igual visualmente que los demás enlaces */
footer a,
.site-footer a{
  text-decoration:none !important;
}

footer a:hover,
.site-footer a:hover{
  text-decoration:underline !important;
}

/* Si existe una clase específica de configuración de cookies, hereda el estilo del footer */
.cookie-settings-link,
#cookie-settings-link,
[data-cookie-settings]{
  color:inherit !important;
  text-decoration:none !important;
  font:inherit !important;
}

.cookie-settings-link:hover,
#cookie-settings-link:hover,
[data-cookie-settings]:hover{
  text-decoration:underline !important;
}

/* Móvil: mantener aire sin exagerar */
@media (max-width: 768px){
  .service-section,
  .faq-section,
  .service-faq{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }

  .section-kicker,
  .service-section .section-kicker,
  .service-related .section-kicker,
  .service-final-cta .section-kicker{
    margin-bottom:14px !important;
  }

  .service-section h2,
  .service-related h2,
  .service-final-cta h2{
    margin-bottom:16px !important;
  }

  .service-final-cta{
    padding-top:36px !important;
    padding-bottom:32px !important;
  }
}


/* =========================================================
   V8 — Zoom temporal controlado solo en imágenes de servicio
   ========================================================= */
.service-page-hero-image img.tecno-pinch-zoom,
.service-section img.tecno-pinch-zoom{
  touch-action:none !important;
  -ms-touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-user-drag:none !important;
}

.service-page-hero-image,
.service-section{
  isolation:isolate;
}

.tecno-pinching{
  position:relative !important;
  z-index:9999 !important;
}