/* =========================================
   0) CSS VARIABLES & BASE RESET
========================================= */
:root{
  --bg-page:#f4f4f4;        /* gris claro del sitio */
  --text:#222;
  --muted:#555;
  --accent:#25d366;         /* WhatsApp */
  --card:#fff;
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0}

body.product-page{
  font-family:'Rubik',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:var(--bg-page);
  line-height:1.6;
}

.container{
  width:min(1300px, 94%);
  margin:40px auto 80px;
}


/* =========================================
   1) TYPOGRAPHY: TITLES & BASIC TEXT
========================================= */
/* Main product title */
.product-title{
  font-family: 'Raleway', sans-serif;
  font-size: clamp(26px, 3.5w, 38px);
  font-weight:600;
  margin:0 0 24px;
}

/* Subtitle as a standalone element */
.product-subtitle{
  font-family: 'Raleway', sans-serif;
  font-size: clamp(22px, 3w, 34px);
  font-weight:400;
  margin:0 0 24px;
  color:#555;
}

/* If subtitle wraps an h2 inside */
.product-subtitle h2{
  font-family:'Raleway', sans-serif;
  font-size: clamp(22px, 3w, 34px);
  margin:0 0 24px;
  color:#555;
}

/* Generic product copy block */
.product-copy{
  color:var(--muted);
  font-size: clamp(15px, 1.5vw, 17px);
  margin-bottom:28px;
}

/* Product description paragraphs used inside .container */
.container .products-description{
  font-family:'Raleway', sans-serif;
  font-size:16px;
  line-height:1.8;
  color:#333;
}
.container .products-description p{
  margin-bottom:1.2em;
  text-indent:2em;
}


/* =========================================
   2) HERO / INTRO LAYOUT
========================================= */
/* Full-width hero with transparent PNG */
.hero-product{
  background:transparent;
  padding: clamp(16px, 3vw, 28px);
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:28px;
}
.hero-product img{
  width:100%;
  max-height:540px;          /* controla altura visible sin recortar el PNG */
  object-fit:contain;
}
/* Smaller hero image variant */
.hero-product.hero-product--small img{
  max-width:90%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* Intro: copy 30% + hero 70% en desktop */
.product-intro{
  display:block;
  gap:24px;
  margin-bottom:28px;
}
@media (min-width:900px){
  .product-intro{
    display:flex;
    align-items:flex-start;
    gap:28px;
  }
  .product-intro .product-copy{
    flex:0 0 30%;
    margin:0;
    font-size:clamp(14px, 1.3vw, 15px);
  }
  .product-intro .hero-product{ flex:0 0 70%; }
  .product-intro .hero-product img{
    width:100%;
    height:auto;
    max-height:520px;
    object-fit:contain;
  }
}
/* Typography inside intro copy */
.product-intro .product-copy{
  font-family:'Raleway', sans-serif;
  font-size:15px;
  line-height:1.8;
  color:#333;
}
.product-intro .product-copy p{
  margin-bottom:1.2em;
  text-indent:2em;
}


/* =========================================
   3) GALLERIES – GENERIC GRID (.gallery)
========================================= */
.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:36px;
}
@media (max-width:768px){
  .gallery{ grid-template-columns:1fr; }
}

/* Base item card */
.gallery-item{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  aspect-ratio:4 / 3;
  /* escala configurable por galería */
  --gscale:1;
  opacity:0;
  transform:translateY(14px) scale(var(--gscale));
}

/* Appear animation */
@keyframes fadeInUp{
  to{ opacity:1; transform:translateY(0) scale(var(--gscale)); }
}
.gallery-item.visible{
  animation:fadeInUp .6s ease forwards;
  animation-delay:var(--delay, 0ms);
}

/* Image fit inside gallery items */
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Specific tuning for #gallery1 */
#gallery1 .gallery-item{
  --gscale:0.6;               /* 60% más chico */
  display:flex;
  align-items:center;         /* centro vertical */
  justify-content:center;     /* centro horizontal */
}
#gallery1 .gallery-item img{
  width:100%;
  height:100%;
  object-fit:contain;         /* imagen completa, sin recorte */
}


/* =========================================
   4) LIGHTBOX (overlay for images)
========================================= */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:min(1100px, 94vw);
  max-height:86vh;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  background:#000;
}
.lightbox-close{
  position:absolute;
  top:18px; right:18px;
  width:44px; height:44px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:#000;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.lightbox-close:hover{ background:#fff; }


/* =========================================
   5) SPECS TABLES
========================================= */
.specs h2{
  font-size:clamp(20px, 2.5vw, 26px);
  margin:6px 0 14px;
}

.specs-table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.specs-table thead th{
  text-align:left;
  background:#fafafa;
  font-weight:600;
  padding:14px 16px;
  font-size:15px;
}
.specs-table td{
  padding:14px 16px;
  border-top:1px solid #eee;
  font-size:15px;
}

/* Optional centered table variant */
.specs-table--centered td{ text-align:center; }
.specs-table--centered th{
  text-align:center;
  background:#fafafa;
}

/* Classic table on mobile (no stacked headers) */
@media (max-width:700px){
  .specs-table{
    table-layout:fixed;     /* columnas fijas para que el texto envuelva */
    width:100%;
  }
  .specs-table th,
  .specs-table td{
    white-space:normal;     /* permitir multi-línea */
    word-break:break-word;
    padding:12px 10px;
  }
  .specs-table td::before{ content:none !important; }
}


/* =========================================
   6) CTA (WhatsApp button)
========================================= */
.cta{ margin-top:28px; display:flex; justify-content:center; }
.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:#fff;
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 8px 18px rgba(37,211,102,.25);
  transition:transform .06s ease, filter .2s ease;
}
.btn-whatsapp:hover{ filter:brightness(1.05); }
.btn-whatsapp:active{ transform:translateY(1px); }
.wa-ico{ width:20px; height:20px; }


/* =========================================
   7) FULL-WIDTH BLUEPRINT (wide plan image)
========================================= */
.product-blueprint{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--bg-page);
  padding:20px 0;
  display:flex;
  justify-content:center;
}
.product-blueprint img{
  width:100%;
  max-width:1200px;  /* limita el tamaño máximo en desktop */
  height:auto;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
@media (max-width:768px){
  .product-blueprint img{ max-width:94%; }
}


/* =========================================
   8) REBO GALLERY: MAIN + THUMBNAILS
   (used on p-rebo.html blocks)
========================================= */
/* Main viewport */
.rebo-gallery .gallery-main{
  aspect-ratio:16 / 10;       /* mantiene proporción estable */
  height:auto;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-top:8px;
}
/* Image inside main viewport */
.rebo-gallery .gallery-main img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;          /* se achica para entrar en el contenedor */
  display:block;
}
.rebo-gallery .gallery-main img.fit-image{ object-fit:contain; }

/* Thumbnails row (horizontal scroll) */
.gallery-thumbs{
  display:grid;
  grid-auto-flow:column;
  gap:10px;
  margin-top:10px;
  overflow-x:auto;
  padding-bottom:4px;
  justify-content:center;
}
.gallery-thumbs .thumb{
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
  overflow:hidden;
  outline:none;
}
.gallery-thumbs .thumb img{
  width:90px;
  height:64px;
  object-fit:cover;
  display:block;
  filter:grayscale(100%) opacity(.6);
  transition:filter .2s ease, transform .1s ease;
}
.gallery-thumbs .thumb:hover img{ transform:translateY(-1px); }
.gallery-thumbs .thumb.is-active img,
.gallery-thumbs .thumb[aria-pressed="true"] img{ filter:none; }


/* =========================================
   9) SHAFTLESS GRID GALLERY (#gallery)
   (3 / 2 / 1 columnas)
========================================= */
#gallery{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3, 1fr);  /* desktop: 3 columnas */
}
@media (max-width:1024px){
  #gallery{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  #gallery{ grid-template-columns:1fr; }
}
/* Opcional: “look” tipo thumbnail más compacto */
#gallery .gallery-item{ --gscale:0.9; }   /* 0.85–0.95 según gusto */


/* =========================================
   10) REBO LAYOUT: TABLE + GALLERY SIDE-BY-SIDE
========================================= */
.rebo-row{
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin:24px 0;
}
/* ancho de la tabla en desktop */
.rebo-specs{
  flex:0 0 clamp(300px, 40%, 460px);
  min-width:280px;
}
/* la galería ocupa el resto */
.rebo-gallery{ flex:1 1 0; }
/* En mobile, uno debajo del otro */
@media (max-width:900px){
  .rebo-row{ flex-direction:column; }
  .rebo-specs, .rebo-gallery{ flex:none; width:100%; }
}

/* ===== Servicios: layout y thumbnails tipo galería ===== */



.service-text {
  font-family:'Raleway', sans-serif;
  font-size:16px;
  line-height:1.8;
  color:#333;
}
.service-text p{
  margin-bottom:1.2em;
  text-indent:2em;
}

/* Texto + fotos lado a lado en desktop */
.service-block{
  display: grid;
  grid-template-columns: 1.1fr 1fr;  /* ajustá 1fr/1fr si querés mitad y mitad */
  gap: 24px;
  margin: 28px 0;
}
.service-block.reverse{ grid-template-columns: 1fr 1.1fr; }

/* En mobile, uno debajo del otro */
@media (max-width: 900px){
  .service-block{ grid-template-columns: 1fr; }
}

/* Rejilla de “thumbnails” 3 / 2 / 1 */
.service-images{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);   /* desktop: 3 */
}
@media (max-width: 1024px){
  .service-images{ grid-template-columns: repeat(2, 1fr); }  /* tablet: 2 */
}
@media (max-width: 600px){
  .service-images{ grid-template-columns: 1fr; }             /* mobile: 1 */
}

/* Look tipo .gallery: ratio y recorte */
.service-images img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;      /* o 16/10 si preferís más panorámico */
  object-fit: cover;        /* recorta suavemente para llenar el marco */
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: block;
}

/* Opcional: alinear el texto verticalmente */
.service-text{ align-self: center; }
.service-text h2{ margin-top: 0; }


/* ===== Servicios: collage 1 grande + 2 chicas (respeta .reverse) ===== */
.service-images.collage{
  display: grid;
  gap: 12px;
  grid-template-columns: 2fr 1fr; /* grande a la izquierda */
  grid-auto-rows: 140px;          /* alto base de las chicas */
}

.service-images.collage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: block;
}

/* Ubicación de las 3 imágenes */
.service-images.collage img:nth-child(1){ grid-column: 1; grid-row: 1 / span 2; } /* grande */
.service-images.collage img:nth-child(2){ grid-column: 2; grid-row: 1; }          /* chica arriba */
.service-images.collage img:nth-child(3){ grid-column: 2; grid-row: 2; }          /* chica abajo */

/* Espejo para los bloques .reverse (grande a la derecha) */
.service-block.reverse .service-images.collage{
  grid-template-columns: 1fr 2fr;
}
.service-block.reverse .service-images.collage img:nth-child(1){ grid-column: 2; grid-row: 1 / span 2; }
.service-block.reverse .service-images.collage img:nth-child(2){ grid-column: 1; grid-row: 1; }
.service-block.reverse .service-images.collage img:nth-child(3){ grid-column: 1; grid-row: 2; }

/* Responsive: apilar en mobile */
@media (max-width: 900px){
  .service-images.collage{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .service-images.collage img{ aspect-ratio: 4 / 3; } /* mantiene forma agradable al apilar */
}



/* === Ajuste global: tabla más ancha / galería más angosta === */
.rebo-specs{
  flex: 0 0 clamp(420px, 45%, 760px);  /* antes ~40% → ahora ~58% */
  min-width: 360px;                    /* evita que se achique demasiado */
}

.rebo-gallery{
  flex: 1 1 42%;                       /* limita la galería a ~42% */
  max-width: 50%;
}

/* Mobile igual que antes: apilado */
@media (max-width: 900px){
  .rebo-specs, .rebo-gallery{ flex: none; max-width: 100%; }
}


/* ===== Full-bleed hero banner (slideshow) ===== */
.hero-banner{
  position: relative;
  width: 100vw;              /* break out of .container */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: clamp(260px, 42vw, 560px);
  overflow: hidden;
  background: #000;
}

.hero-banner img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* full-bleed crop */
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
}
.hero-banner img.is-active{ opacity: 1; }

/* Optional subtle overlay for legibility on bright images */
.hero-banner::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.15));
  pointer-events: none;
}

/* noscript fallback keeps size/fit */
.hero-banner.noscript img{ opacity: 1; }


/* Slideshow Pallets/Flexo: transición suave */
.hero-product.hero-product--small img[data-slideshow]{
  transition: opacity 1s ease;
  opacity: 1;
}
.hero-product.hero-product--small img.fade-out{
  opacity: 0;
}


/* Slideshow Dobladora Pegadora */
/* Slideshow en blueprints (fade suave) */
.product-blueprint img[data-slideshow]{
  opacity: 1;
  transition: opacity 1000ms ease; /* 1s */
  display: block;
}
.product-blueprint img.fade-out{ opacity: 0; }


/* Título de tabla dobladora encoladora */
.specs-table caption{
  caption-side: top;
  background:#fafafa;
  font-weight:700;
  text-align:center;
  padding:12px 16px;
  font-size:16px;
  border-bottom:1px solid #eee;
  border-top-left-radius:12px;   /* armoniza con tu tabla redondeada */
  border-top-right-radius:12px;
  display:block;                 /* permite los bordes redondeados */
}

/* ===== Tablas de Pliegos ===== */
.pliegos-header{ margin:16px 0 8px; }
.pliegos-toggle{
  background:none; border:none; padding:0;
  color:#0066cc; text-decoration:underline; cursor:pointer; font:inherit;
}
.pliegos{ margin-top:12px; }
.pliegos.is-hidden{ display:none; }

/* Layout: tabla izquierda + imagen derecha */
.pliegos-row{
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin:24px 0;
}
.pliego-specs{
  flex:0 0 clamp(340px, 48%, 620px);
  min-width:320px;
}
/* No escalar más allá del tamaño real; solo reducir si hace falta */
.pliego-figure { 
  display: flex;              /* opcional: para centrar la imagen */
  justify-content: center;    /* centra cuando queda más chica que el contenedor */
}

.pliego-figure img{
  width: auto !important;     /* ← clave: NO forzar 100% */
  max-width: 100%;            /* si el contenedor es más angosto, que reduzca */
  height: auto;
  object-fit: contain;        /* evita recortes (puede omitirse) */
  display: block;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
/* Responsive: apila en mobile */
@media (max-width:900px){
  .pliegos-row{ flex-direction:column; }
  .pliego-specs, .pliego-figure{ flex:none; width:100%; }
}


/* ==== Cassette: galería centrada + tamaños responsivos ==== */
.rebo-gallery[data-gallery="cassette"]{
  /* contenedor centrado y limitado */
  width: min(70vw, 1200px);   /* ~70% del viewport, con tope opcional */
  margin: 0 auto 18px;        /* centra y separa de lo siguiente */
  display: block;
}

.rebo-gallery[data-gallery="cassette"] .gallery-main{
  width: 100%;                /* la imagen ocupa el ancho del contenedor */
  max-width: 100%;
  margin: 0 auto;             /* por si algún navegador lo necesita */
}

.rebo-gallery[data-gallery="cassette"] .gallery-main img{
  width: 100%;
  height: auto;
  object-fit: contain;        /* sin recorte */
  display: block;
}

/* miniaturas centradas debajo (ya están centradas, reforzamos) */
.rebo-gallery[data-gallery="cassette"] .gallery-thumbs{
  justify-content: center;
  margin-top: 10px;
}

/* tabla centrada debajo de la galería */
.cassette-specs{
  max-width: min(1100px, 94vw);
  margin: 18px auto 0;        /* centrada y con respiro superior */
}

/* En mobile: la imagen principal al 100% del ancho */
@media (max-width: 900px){
  .rebo-gallery[data-gallery="cassette"]{
    width: 100%;
  }
}


/* ==== Apiladora vertical: galería centrada + tamaños responsivos ==== */
.rebo-gallery[data-gallery="apiladora-vertical"]{
  width: min(70vw, 1200px);  /* ~70% del viewport en desktop, con tope opcional */
  margin: 0 auto 18px;       /* centrada y con separación inferior */
  display: block;
}

.rebo-gallery[data-gallery="apiladora-vertical"] .gallery-main{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.rebo-gallery[data-gallery="apiladora-vertical"] .gallery-main img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Miniaturas centradas debajo */
.rebo-gallery[data-gallery="apiladora-vertical"] .gallery-thumbs{
  justify-content: center;
  margin-top: 10px;
}

/* En mobile: ocupar el 100% del ancho */
@media (max-width: 900px){
  .rebo-gallery[data-gallery="apiladora-vertical"]{
    width: 100%;
  }
}

/* === Servicios: alternar lados (img↔texto) en desktop === */
@media (min-width: 900px){
  /* Base: imágenes izquierda, texto derecha */
  .service-block{
    grid-template-columns: 1.1fr 1fr;      /* ajustá proporción si querés */
  }
  .service-block .service-images{ grid-column: 1; }
  .service-block .service-text  { grid-column: 2; }

  /* Bloques pares: texto izquierda, imágenes derecha */
  .service-block:nth-of-type(even){
    grid-template-columns: 1fr 1.1fr;
  }
  .service-block:nth-of-type(even) .service-images{ grid-column: 2; }
  .service-block:nth-of-type(even) .service-text  { grid-column: 1; }

  /* Si algún bloque trae la clase .reverse, la ignoramos (por si quedó en el HTML) */
  .service-block.reverse{ grid-template-columns: inherit; }
}

/* Collage: espejo automático en los pares (1 grande + 2 chicas) */
@media (min-width: 900px){
  .service-block:nth-of-type(even) .service-images.collage{
    grid-template-columns: 1fr 2fr;
  }
  .service-block:nth-of-type(even) .service-images.collage img:nth-child(1){ grid-column: 2; grid-row: 1 / span 2; }
  .service-block:nth-of-type(even) .service-images.collage img:nth-child(2){ grid-column: 1; grid-row: 1; }
  .service-block:nth-of-type(even) .service-images.collage img:nth-child(3){ grid-column: 1; grid-row: 2; }
}

/* En mobile ya tenés 1 columna, se mantiene el apilado actual. */

/* Servicios: alinear arriba cuando texto va a la izquierda */
@media (min-width: 900px){
  .service-block{ align-items: start; }           /* las dos columnas arriba */
  .service-block .service-text{ align-self: start !important; } /* por si quedó center */
  .service-text h2{ margin-top: 0; }              /* evita salto por margen del título */
}
@media (min-width: 900px){
  .service-block.reverse .service-images,
  .service-block.reverse .service-text{
    grid-row: 1; /* asegura que ambos queden en la misma fila */
  }
}

@media (min-width: 900px){
  .service-block{
    column-gap: 16px;   /* antes 24px */
    row-gap: 12px;      /* por si hay varias filas de fotos */
    align-items: start; /* ambos arriba, sin desalinear */
  }
  .service-text{ align-self: start; }
  .service-text h2{ margin-top: 0; }
}
/* Rejilla por defecto (tu configuración actual) */
@media (min-width: 900px){
  .service-images{ display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }
}

/* Caso 1 sola imagen: que sea 1 columna y alineada a la izquierda */
@media (min-width: 900px){
  .service-images:has(img:first-child:last-child){

    justify-items: start;        /* se alinea a la izquierda si su ancho fuera menor */
  }
}

/* Caso 2 imágenes: que sean 2 columnas iguales */
@media (min-width: 900px){
  .service-images:has(img:nth-child(2):last-child){
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px){
  /* Caso una sola imagen: no la estires, solo alinéala */
  .service-images:has(img:first-child:last-child){
    display: flex;                /* cambia de grid a flex */
    justify-content: flex-start;  /* la imagen queda a la izquierda */
  }

  /* Si en algún bloque quisieras que la imagen sola quede a la derecha */
  .service-block:nth-of-type(even) .service-images:has(img:first-child:last-child){
    justify-content: flex-end;
  }

  /* Importante: asegúrate que la imagen no tenga width:100% forzado */
  .service-images img{
    width: auto;
    max-width: 100%;   /* para que no se desborde en mobile */
    height: auto;
  }
}


/* Crossfade base */
.hero-product{
  position: relative;
  width: 100%;
  /* Lock a stable viewport so height doesn't jump between images */
  --hero-ratio: 16 / 10;         /* adjust if your images are taller/wider */
  aspect-ratio: var(--hero-ratio);
  max-height: 540px;             /* matches your mobile cap */
  display: block;
}

/* Desktop cap you already use on intro hero */
@media (min-width:900px){
  .product-intro .hero-product{ max-height:520px; }
}

/* Stack both images to fill the same viewport (no shrink after fade) */
.hero-product img[data-slideshow="sincro"],
.hero-product img[data-slideshow-overlay],
.product-intro .hero-product img[data-slideshow="sincro"],
.product-intro .hero-product img[data-slideshow-overlay]{
  position: absolute;
  inset: 0;                      /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: contain;           /* preserve full image without crop */
  display: block;
  transition: opacity 1s ease;   /* crossfade duration (match JS DURATION) */
}

/* Default states */
.hero-product img[data-slideshow="sincro"]{ opacity: 1; }
.hero-product img[data-slideshow-overlay]{
  opacity: 0;
  pointer-events: none;
}

/* Desktop: top-align hero slideshow to match .product-copy */
@media (min-width:900px){
  /* Make the hero’s internal flexbox align to the top (not center) */
  .product-intro .hero-product{
    align-items: flex-start;   /* overrides the default center */
    padding-top: 0;            /* remove extra top spacing so tops align */
  }

  /* Pin the images to the top of the hero viewport */
  .product-intro .hero-product img[data-slideshow="sincro"],
  .product-intro .hero-product img[data-slideshow-overlay]{
    object-position: top center;  /* keep width, anchor content to top */
  }
}

.hero-product{
  /* default */
  --hero-ratio: 16 / 10;
  aspect-ratio: var(--hero-ratio);
}





/* ==== SERVICIOS: Mostrar solo la primera imagen en mobile ===== */
@media (max-width: 900px) {
  .service-block {
    display: flex;
    flex-direction: column;
  }

  /* Texto primero, imagen después */
  .service-text {
    order: 1;
  }

  .service-images {
    order: 2;
  }

  /* Ocultar todas las imágenes excepto la primera */
  .service-images img:not(:first-child) {
    display: none;
  }

  /* Asegurar que la primera imagen se vea bien */
  .service-images img:first-child {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 12px;
  }
}

/* ===== Fix imágenes de collage en mobile ===== */
@media (max-width: 900px) {
  .service-images.collage {
    display: block; /* romper la grilla en mobile */
  }

  .service-images.collage img:first-child {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}



/* Cort Stand Mantener alto fijo en slideshows hero */
.hero-product {
  position: relative;
  aspect-ratio: var(--hero-ratio);
  overflow: hidden;
}

.hero-product img,
.hero-product img[data-slideshow-overlay] {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* fuerza misma escala */
  object-position: top center;
}


/* Evitar micro-salto en crossfade */
.hero-product img,
.hero-product img[data-slideshow-overlay] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;

  position: absolute;   /* <- clave: ambas en misma caja */
  top: 0;
  left: 0;

  backface-visibility: hidden;
  transform: translateZ(0); /* fuerza render en GPU */
}
.hero-product {
  position: relative;
  overflow: hidden;
}

/* Reducir fuente de tablas en mobile */
@media (max-width: 700px){
  .specs-table caption{
    font-size: 14px;   /* antes 16px aprox */
    line-height: 1.4;
  }
  .specs-table th,
  .specs-table td{
    font-size: 13px;   /* antes 15px */
    line-height: 1.4;
  }
}