/* =====================================================================
   PRODUCTO.CSS
   Estilos exclusivos del contenido de la página de detalle de producto.
   El navbar, footer y componentes compartidos (section-title, product-card,
   btn-outline-solint, btn-fill-solint, location-line, equipos-section, etc.)
   ya están definidos en styles.css y se reutilizan tal cual en esta página.
   ===================================================================== */

/* ===================== FICHA DE PRODUCTO ===================== */
/* Estructura en 3 bloques apilados normalmente (sin grid/flex compartiendo
   ancho entre imagen y texto):
   1) .product-hero-band: div independiente de ancho completo (100% garantizado,
      porque no comparte fila con nada) que contiene tags/título/marca.
   2) .product-grid-media: la imagen, posicionada ABSOLUTA sobre la banda,
      así puede sobreponerse a ella sin afectar en nada su ancho.
   3) .product-body-row: va después de la banda, con el CTA y la
      Descripción/Especificaciones, corrido a la derecha para no chocar
      con la imagen que flota encima. */

      .product-page{
        position:relative; /* contexto de posicionamiento para la imagen absoluta */
      }
      
      /* --- 1) Banda azul: ancho 100% garantizado, sin columnas al lado --- */
      .product-hero-band{
        background:var(--color-secondary);
        color:#fff;
        width:100%;
        padding:60px 6vw 40px calc(42% + 4vw);
        box-sizing:border-box;
      }
      .product-hero-info-inner {
        /* max-width: 560px; */
        text-align: right;
        padding: 90px 0 100px 0;
    }
      
    .product-tags {
        font-family: var(--font-title);
        font-weight: 100;
        font-size: 32px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--color-primary);
        margin-bottom: 1.2rem;
    }
      
    .product-title {
        font-family: var(--font-title);
        font-size: 72px;
        line-height: 1.05;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 1.6rem;
    }
      
    .product-brand {
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 0.8;
        margin: 0;
        color: var(--color-primary);
    }
      .product-brand strong{
        display:block;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.5px;
        color:var(--color-primary);
      }
      
      /* --- 2) Imagen: posicionada absoluta, se sobrepone a la banda --- */
      .product-grid-media{
        position:absolute;
        top:0;
        left:6vw;
        width:36%;
        padding-top:60px;
      }
      
      .product-main-image{
        width:100%;
        aspect-ratio:1/0.86;
        border:1px solid var(--color-secondary);
        background:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:2.5rem;
        box-sizing:border-box;
      }
      .product-main-image img{
        max-width:100%;
        max-height:100%;
        object-fit:contain;
      }
      
      .product-thumbs{
        display:flex;
        gap:1rem;
        margin-top:1.2rem;
      }
      .product-thumb{
        width:120px;
        height:95px;
        border:2px solid var(--color-secondary);
        background:#fff;
        padding:.5rem;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:border-color .2s;
        flex-shrink:0;
      }
      .product-thumb img{
        max-width:100%;
        max-height:100%;
        object-fit:contain;
      }
      .product-thumb.active,
      .product-thumb:hover{
        border-color:var(--color-primary);
      }
      
      /* --- 3) Fila debajo de la banda: CTA + descripción, corrida a la derecha --- */
      .product-body-row{
        width:100%;
      }
      .product-grid-content{
        margin-left:calc(42% + 4vw);
        padding-right:6vw;
        box-sizing:border-box;
      }
      
      @media (max-width:991.98px){
        .product-hero-band{padding:40px 6vw;}
        .product-grid-media{
          position:static;
          width:100%;
          padding:40px 6vw 0;
        }
        .product-grid-content{margin-left:0;padding:0 6vw;}
        .product-title{font-size:2.2rem;}
      }
      
      /* ===================== BOTÓN "COTIZA HOY MISMO" ===================== */
      /* En flujo normal, justo debajo del bloque azul */
      .product-cta-wrap{
        background:#fff;
        padding:22px 0 0;
        text-align:right;
      }
      .product-cta{
        background:var(--color-primary);
        color:#fff;
        font-family:var(--font-body);
        font-weight:700;
        font-size:1rem;
        padding:.9rem 2.6rem;
        border-radius:30px;
        border:none;
        display:inline-block;
      }
      .product-cta:hover{background:var(--color-secondary);color:#fff;}
      
      @media (max-width:991.98px){
        .product-cta-wrap{text-align:center;padding:22px 6vw 0;}
      }
      
      /* ===================== DESCRIPCIÓN Y ESPECIFICACIONES ===================== */
      .product-details-body{
        padding:20px 0 40px;
        max-width:640px;
      }
      .product-details-title{
        font-family:var(--font-title);
        color:var(--color-secondary);
        font-size:1.7rem;
        text-transform:uppercase;
        letter-spacing:.5px;
        margin:2rem 0 .8rem;
      }
      .product-details-title:first-child{margin-top:0;}
      .product-details-body p{
        font-family:var(--font-body);
        font-size:.95rem;
        line-height:1.65;
        color:var(--color-text);
        margin-bottom:.9rem;
      }
      .product-details-body p strong{color:var(--color-text);}
      
      @media (max-width:991.98px){
        .product-details-body{max-width:100%;padding:20px 6vw 40px;}
      }