.elementor-755 .elementor-element.elementor-element-ef26503{--display:flex;--padding-top:72px;--padding-bottom:72px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-ef26503:not(.elementor-motion-effects-element-type-background), .elementor-755 .elementor-element.elementor-element-ef26503 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2E2E2E;}.elementor-755 .elementor-element.elementor-element-c8ca730{--display:flex;--padding-top:72px;--padding-bottom:72px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-665f7b7{--display:flex;--padding-top:72px;--padding-bottom:72px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-665f7b7:not(.elementor-motion-effects-element-type-background), .elementor-755 .elementor-element.elementor-element-665f7b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F3EF;}.elementor-755 .elementor-element.elementor-element-d88f3d7{--display:flex;--padding-top:72px;--padding-bottom:72px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-d88f3d7:not(.elementor-motion-effects-element-type-background), .elementor-755 .elementor-element.elementor-element-d88f3d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-755 .elementor-element.elementor-element-9152f0e{--display:flex;--padding-top:56px;--padding-bottom:56px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-9152f0e:not(.elementor-motion-effects-element-type-background), .elementor-755 .elementor-element.elementor-element-9152f0e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2E2E2E;}.elementor-755 .elementor-element.elementor-element-5340a75{--display:flex;--padding-top:56px;--padding-bottom:56px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-5340a75:not(.elementor-motion-effects-element-type-background), .elementor-755 .elementor-element.elementor-element-5340a75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F3EF;}.elementor-755 .elementor-element.elementor-element-51c5d1b{--display:flex;--padding-top:72px;--padding-bottom:72px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-51c5d1b:not(.elementor-motion-effects-element-type-background), .elementor-755 .elementor-element.elementor-element-51c5d1b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E8E6D9;}.elementor-755 .elementor-element.elementor-element-48bf744{--display:flex;--padding-top:72px;--padding-bottom:72px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-48bf744:not(.elementor-motion-effects-element-type-background), .elementor-755 .elementor-element.elementor-element-48bf744 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2E2E2E;}@media(max-width:767px){.elementor-755 .elementor-element.elementor-element-ef26503{--padding-top:15px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-c8ca730{--padding-top:35px;--padding-bottom:35px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-665f7b7{--padding-top:25px;--padding-bottom:25px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-d88f3d7{--padding-top:35px;--padding-bottom:35px;--padding-left:0px;--padding-right:0px;}.elementor-755 .elementor-element.elementor-element-9152f0e{--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-755 .elementor-element.elementor-element-ef26503{--content-width:1100px;}.elementor-755 .elementor-element.elementor-element-c8ca730{--content-width:1100px;}.elementor-755 .elementor-element.elementor-element-d88f3d7{--content-width:1100px;}.elementor-755 .elementor-element.elementor-element-9152f0e{--content-width:1100px;}.elementor-755 .elementor-element.elementor-element-5340a75{--content-width:1100px;}.elementor-755 .elementor-element.elementor-element-51c5d1b{--content-width:1100px;}.elementor-755 .elementor-element.elementor-element-48bf744{--content-width:1100px;}}/* Start custom CSS for html, class: .elementor-element-51cdeff */.wrap {
    margin: 0 auto;
    padding: 0 24px;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.hero-img {
    border-radius: 16px;
    overflow: hidden;
    background: #3a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.hero-tag {
    display: inline-block;
    background: #ebcb6824;
    color: #ebcb68;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}
.hero-h1 {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 12px;
}
.hero-h1 em {
    color: #ebcb68;
    font-style: normal;
}
.hero-sub {
    font-size: 15px;
    color: #aaa;
    margin-bottom: 28px;
    line-height: 1.6;
}
.hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.btn-pri {
    background: #cc7a00;
    color: #fff;
    border: none;
    padding: 13px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
}
.btn-pri:hover {
    background: #da8d1b!important;
}
.btn-sec {
    background: #00000000;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .3);
    padding: 13px 22px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.btn-sec:hover {
    background: #00000000!important;
    
}

/* ==========================================================================
   Versión Responsive para el Segundo Hero (.hero-grid)
   ========================================================================== */

@media (max-width: 768px) {
    /* El contenedor global mantiene sus 24px de colchón pero asegura que todo fluya */
    .wrap {
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* Pasamos la rejilla a 1 sola columna y centramos el contenido */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    /* Reducimos el padding interno de la imagen para que gane tamaño real en móvil */
    .hero-img {
        padding: 16px; /* Reducido de 32px para que el producto sea más grande */
        border-radius: 12px;
    }

    /* Ajuste de tipografías para evitar saltos de línea caóticos */
    .hero-h1 {
        font-size: 28px; /* Tamaño controlado para pantallas móviles */
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .hero-sub {
        font-size: 14px;
        margin-bottom: 24px;
        padding: 0 10px; /* Le da un pequeño aire a los lados del texto */
    }

    /* Alineación de botones en vertical y centrados */
    .hero-btns {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    /* Forzamos a que ambos botones compartan el mismo ancho visual */
    .btn-pri, .btn-sec {
        width: 100%;
        max-width: 300px;
        box-sizing: border-box;
        text-align: center;
        padding: 12px 20px; /* Un pelín más compactos para el dedo */
    }
}

/* Ajuste fino para móviles ultradebidos (Pantallas de menos de 400px) */
@media (max-width: 400px) {
    .hero-h1 {
        font-size: 25px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-eee4e53 */.sec-hd {
    text-align: center;
    margin-bottom: 48px;
}
.sec-tag {
    display: inline-block;
    background: #2e2e2e;
    color: #ebcb68;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
}
.sec-hd p {
    font-size: 16px;
    color: #666;
    max-width: 520px;
    margin: 0 auto;
}
.ben-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ben-card {
    border-radius: 16px;
    overflow: hidden;
    border: 0.5px solid #E8E5DF;
    background: #f5f3ef;
}
.ben-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #E8E6D9;
}
.ben-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ben-body {
    padding: 22px;
}
.ben-title {
    font-size: 17px;
    font-weight: 700;
    color: #2e2e2e;
    margin-bottom: 8px;
}
.ben-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
}

/* ==========================================================================
   Versión Responsive para Grid de Tarjetas con Imagen (.ben-grid)
   ========================================================================== */

/* Tablets y pantallas medianas (Hasta 992px) */
@media (max-width: 992px) {
    .sec-hd {
        margin-bottom: 36px; /* Reducimos el espacio de la cabecera */
    }

    .ben-grid {
        grid-template-columns: repeat(2, 1fr); /* Pasamos a 2 columnas en lugar de 3 */
        gap: 20px; /* Estrechamos un poco el espacio entre tarjetas */
    }
}

/* Tablets pequeñas y móviles en horizontal (Hasta 768px) */
@media (max-width: 768px) {
    .sec-hd p {
        font-size: 15px; /* Reducimos ligeramente el texto de la cabecera */
        padding: 0 16px; /* Evitamos que el texto roce los bordes */
    }

    .ben-body {
        padding: 18px; /* Compactamos un poco el contenido interno */
    }

    .ben-title {
        font-size: 16px; /* Título sutilmente más pequeño */
    }
}

/* Móviles verticales (Hasta 576px) */
@media (max-width: 576px) {
    .ben-grid {
        grid-template-columns: 1fr; /* Ahora sí, 1 sola columna por tarjeta */
        gap: 16px;
    }

    .ben-img {
        aspect-ratio: 16 / 10; /* Hacemos la imagen un poco menos alta en móvil para que no ocupe toda la pantalla */
    }

    .ben-body {
        padding: 20px 16px; /* Reajustamos el aire interior */
    }

    .ben-desc {
        font-size: 13.5px; /* Lectura más cómoda en pantallas pequeñas */
        line-height: 1.6;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0f13af1 */.sec-hd  {
    text-align: center;
    margin-bottom: 48px;
}
.sec-tag {
    display: inline-block;
    background: #2e2e2e;
    color: #ebcb68;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
}
.sec-hd h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2e2e2e!important;
    margin-bottom: 10px;
}
.sec-hd p {
    font-size: 16px;
    color: #666!important;
    max-width: 520px;
    margin: 0 auto;
}
.models-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 860px;
    margin: 0 auto;
}
.model-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid #e8e5df;
}
.model-card.pop {
    border: 2px solid #cc7a00;
}
.model-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #cc7a00;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
}
.model-head {
    padding: 24px 24px 0;
    position: relative;
}
.model-tier {
    font-size: 10px;
    font-weight: 700;
    color: #cc7a00;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 6px;
}
.model-name {
    font-size: 26px;
    font-weight: 800;
    color: #2e2e2e;
    margin-bottom: 8px;
    line-height: 1;
}
.model-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 16px;
}
.model-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f5f3ef;
    border-radius: 10px;
}
.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.spec-key {
    color: #888;
}
.spec-val.amber {
    color: #cc7a00;
    font-size: 15px;
}
.spec-val {
    font-weight: 700;
    color: #2e2e2e;
}
.model-img {
    padding: 16px 24px;
    background: #e8e6d9;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
.model-img img {
    max-height: 180px;
    width: auto;
    object-fit: contain;
}
.model-footer {
    padding: 16px 24px 20px;
}
.btn-model-pri {
    width: 100%;
    padding: 12px;
    background: #cc7a00;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-model-pri:hover {
    background: #cc8926;
}
.btn-model-sec {
    width: 100%;
    padding: 12px;
    background: #00000000;
    color: #2e2e2e;
    border: 1.5px solid #2e2e2e;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-model-sec:hover {
    background: #00000000;
     color: #2e2e2e;
}

/* ==========================================================================
   Versión Responsive para Grid de Modelos (.models-grid)
   ========================================================================== */

/* Tablets y pantallas medianas (Hasta 768px) */
@media (max-width: 768px) {
    .sec-hd {
        margin-bottom: 32px;
        padding: 0 16px;
    }

    .sec-hd h2 {
        font-size: 24px; /* Un tamaño más equilibrado para títulos en móvil */
    }

    .sec-hd p {
        font-size: 15px;
    }

    /* La cuadrícula de modelos pasa a una sola columna */
    .models-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 0px; /* Colchón lateral de seguridad */
        max-width: 450px; /* Evita que las tarjetas se ensanchen demasiado en horizontal */
        margin: 0 auto;
    }

    .model-head {
        padding: 20px 20px 0;
    }

    .model-name {
        font-size: 23px; /* Evita que nombres largos fuercen saltos de línea feos */
        padding-right: 75px; /* Deja espacio reservado para la insignia absoluta sin solaparse */
    }

    .model-badge {
        top: 16px;
        right: 30px;
        padding: 3px 8px;
        font-size: 9.5px;
    }

    .model-img {
        padding: 16px;
        min-height: 180px; /* Reducimos ligeramente la altura de la zona de imagen */
    }

    .model-img img {
        max-height: 150px; /* Ajuste proporcional del producto */
    }

    .model-footer {
        padding: 12px 20px 16px;
    }
}

/* Ajuste fino para móviles muy estrechos (Hasta 400px) */
@media (max-width: 400px) {
    .model-head {
        /* En pantallas diminutas, bajamos la insignia para que no colisione con nada */
        display: flex;
        flex-direction: column;
    }

    .model-badge {
        display: inline-block;
        align-self: flex-start;
        margin-bottom: 12px;
        order: -1; /* Hace que se pinte arriba del todo, antes que el tier */
    }

    .model-name {
        padding-right: 0; /* Ya no hace falta el colchón porque la insignia no flota */
        font-size: 21px;
    }

    .spec-row {
        font-size: 12px; /* Forzamos a que las filas de datos técnicos quepan limpiamente */
    }
    
    .spec-val.amber {
        font-size: 14px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-caab911 *//* Contenedores globales de ancho */

/* Estilos de la Cabecera de la Sección */
.sec-hd {
  text-align: center;
  margin-bottom: 48px;
}
.sec-hd h2 {
  font-size: 28px;
  font-weight: 700;
  color: #2E2E2E;
  margin-bottom: 10px;
}
.sec-hd p {
  font-size: 16px;
  color: #666;
  max-width: 520px;
  margin: 0 auto;
}
.sec-tag {
  display: inline-block;
  background: #2E2E2E;
  color: #EBCB68;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 12px;
}

/* Estilos Base de la Sección de Aperturas (Escritorio - 4 columnas) */

.aper-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.aper-card {
  background: #F5F3EF;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  border: 0.5px solid #E8E5DF;
}
.aper-num {
  font-size: 11px;
  font-weight: 700;
  color: #CC7A00;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.aper-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  background: #E8E6D9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aper-name {
  font-size: 14px;
  font-weight: 700;
  color: #2E2E2E;
  margin-bottom: 6px;
}
.aper-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}

/* ==========================================================================
   Adaptaciones Responsive
   ========================================================================== */

/* Tablets y pantallas medianas (Hasta 900px) -> Pasa a 1 columna */
@media (max-width: 900px) {
  .aper-grid {
    grid-template-columns: 1fr;
  }
}

/* Móviles (Hasta 600px) -> Forzado inverso a 2 columnas (2x2) y reducción de cabecera */
@media (max-width: 600px) {
  .sec-hd h2 {
    font-size: 22px;
  }
  .aper-grid {
    grid-template-columns: 1fr 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e6d592d *//* Contenedor global de ancho */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Estilos Base de la Sección (Escritorio - 2 columnas en grid) */

.link-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.link-tag {
  font-size: 10px;
  font-weight: 700;
  color: #EBCB68;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.link-h {
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 10px;
  line-height: 1.3;
}
.link-p {
  font-size: 14px;
  color: #AAAAAA;
  line-height: 1.7;
  margin-bottom: 20px;
}
.btn-link {
  display: inline-block;
  background: #CC7A00;
  color: #FFFFFF;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.link-img {
  border-radius: 12px;
  overflow: hidden;
  background: #3a3a3a;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.link-img img {
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   Adaptaciones Responsive
   ========================================================================== */

/* Tablets y pantallas medianas (Hasta 900px) -> Pasa a una sola columna */
@media (max-width: 900px) {
  .link-inner {
    grid-template-columns: 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1b33b8c *//* Contenedores globales de ancho */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Estilos de la Cabecera de la Sección */
.sec-hd {
  text-align: center;
  margin-bottom: 48px;
}
.sec-hd h2 {
  font-size: 28px;
  font-weight: 700;
  color: #2E2E2E;
  margin-bottom: 10px;
}
.sec-tag {
  display: inline-block;
  background: #2E2E2E;
  color: #EBCB68;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 12px;
}

/* Estilos Base de la Sección Técnica Desplegable */
.spec-sec {
  padding: 56px 0;
  background: #F5F3EF;
}
.spec-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 680px;
  margin: 0 auto;
}
.spec-item {
  border-bottom: 1px solid #E8E5DF;
}
.spec-item:first-child {
  border-top: 1px solid #E8E5DF;
}

/* Botón disparador (Pregunta técnica) */
.spec-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  cursor: pointer;
  gap: 12px;
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  box-shadow: none !important;
}

/* Evita interferencias de fondos globales en hover y focus */
.spec-q:hover,
.spec-q:focus {
  background: transparent !important;
  background-color: transparent !important;
  outline: none;
}

/* Texto de la Pregunta y efectos hover/focus */
.spec-qt {
  font-size: 15px;
  font-weight: 600;
  color: #2E2E2E;
  transition: color .2s ease;
}

/* Forzar cambio de color en el texto al pasar el ratón */
.spec-q:hover .spec-qt,
.spec-q:focus .spec-qt {
  color: #CC7A00 !important;
}

/* Icono circular del "+" */
.spec-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #E0DDD8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  transition: transform .3s ease, background .2s ease, border-color .2s ease;
}
.spec-icon svg {
  transition: transform .3s ease;
}
.spec-icon svg path {
  transition: stroke .2s ease;
}

/* Efectos hover/focus en el propio círculo */
.spec-q:hover .spec-icon,
.spec-q:focus .spec-icon {
  border-color: #CC7A00 !important;
}

/* Estilos para el estado abierto (Acordeón activo) */
.spec-item.open .spec-icon {
  background: #CC7A00 !important;
  border-color: #CC7A00 !important;
}
.spec-item.open .spec-icon svg {
  transform: rotate(45deg);
}
.spec-item.open .spec-icon svg path {
  stroke: #FFFFFF !important; /* El símbolo + pasa a blanco si se abre */
}
.spec-item.open .spec-qt {
  color: #CC7A00 !important;
}

.spec-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

/* Estilos de las Tablas de Especificaciones */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 16px;
}
.spec-table th {
  background: #2E2E2E;
  color: #EBCB68;
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
}
.spec-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #E8E5DF;
  color: #555;
}
.spec-table tr:nth-child(even) td {
  background: #FAFAF8;
}
.spec-table td:first-child {
  font-weight: 600;
  color: #2E2E2E;
}

/* ==========================================================================
   Versión Responsive Corregida para la Ficha Técnica (.spec-sec)
   ========================================================================== */

/* Tablets y Móviles (Pantallas hasta 768px) */
@media (max-width: 768px) {
  .spec-sec {
    padding: 48px 16px;
    box-sizing: border-box;
    width: 100% !important;
    overflow: hidden; /* Evita que la sección misma estire la pantalla */
  }

  .spec-list {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .spec-q {
    padding: 16px 0;
    gap: 16px;
    box-sizing: border-box;
  }

  .spec-qt {
    font-size: 14px;
    line-height: 1.4;
    flex: 1; /* Obliga al texto a ocupar el espacio restante sin empujar al icono */
    word-break: break-word;
  }

  .spec-table th, 
  .spec-table td {
    padding: 8px;
    font-size: 12.5px;
  }
}

/* Móviles verticales y pantallas estrechas (Hasta 480px) - ANTI DESBORDAMIENTO */
@media (max-width: 480px) {
  .spec-sec {
    padding: 40px 0px;
  }

  /* Forzamos de forma estricta el comportamiento de bloque */
  .spec-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important; /* Evita que las columnas calculen anchos automáticos */
    border-collapse: collapse;
    box-sizing: border-box;
  }

  .spec-table thead,
  .spec-table tbody,
  .spec-table tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .spec-table th {
    display: block !important;
    width: 100% !important;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
  }

  .spec-table tr {
    padding: 10px 4px;
    border-bottom: 1px solid #E8E5DF;
  }

  .spec-table td {
    display: block !important; /* Forzado estricto a bloque vertical */
    width: 100% !important;
    max-width: 100% !important;
    padding: 2px 8px !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box;
    word-break: break-word; /* Rompe textos o números si se quedan sin espacio */
  }

  /* Primera celda: Propiedad (ej: "Transmitancia Uf") */
  .spec-table td:first-child {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888888;
    margin-bottom: 2px;
    font-weight: 600;
  }

  /* Segunda celda: Valor (ej: "0,97 W/m²K") */
  .spec-table td:last-child {
    font-size: 13.5px;
    font-weight: 700;
    color: #2E2E2E;
    padding-bottom: 4px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a7df742 *//* Contenedor global de ancho */

/* Contenedor General de la Sección */
.cta-sec {
  color: #ffffff;
}

/* Caja contenedora central (Estructura interna) */
.cta-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.cta-inner h2 {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}
.cta-inner p {
  font-size: 16px;
  color: #aaaaaa;
  margin-bottom: 32px;
}

/* Botón Blanco Principal con Efectos Hover Forzados */
.cta-inner .btn-white {
  display: inline-block;
  padding: 14px 28px;
  background-color: #ffffff !important;
  color: #2E2E2E !important;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: none !important;
}

.cta-inner .btn-white:hover,
.cta-inner .btn-white:focus {
  opacity: 0.95 !important;
  transform: translateY(-2px) !important; /* Efecto flotante interactivo */
  outline: none;
}

.cta-inner .btn-white:active {
  transform: translateY(0px) !important;
}

/* Texto del Showroom inferior en escritorio */
.cta-showroom-text {
  font-size: 12px !important;
  color: #666666 !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  line-height: 1.5;
}

/* ==========================================================================
   Versión Responsive (Anti-desbordamiento en móviles)
   ========================================================================== */

/* Tablets y Móviles (Hasta 768px) */
@media (max-width: 768px) {
  .cta-sec {
    padding: 60px 16px !important; /* Evita que el fondo roce los bordes del dispositivo */
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden;
  }

  .cta-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cta-inner h2 {
    font-size: 26px; /* Reducción equilibrada para evitar cortes bruscos */
    line-height: 1.25;
  }

  .cta-inner p {
    font-size: 15px;
    margin-bottom: 24px;
    padding: 0 8px;
  }

  /* Botón adaptado al ancho móvil seguro */
  .cta-inner .btn-white {
    width: 100% !important;
    max-width: 290px; /* Tamaño idóneo para que no se estire de forma infinita */
    padding: 12px 20px !important;
    box-sizing: border-box !important;
  }

  /* Evitamos que la línea larga del showroom rompa la pantalla por la derecha */
  .cta-showroom-text {
    margin-top: 20px !important;
    font-size: 11.5px !important;
    padding: 0 12px;
    word-break: break-word; /* Si el número de teléfono o dirección no cabe, salta de línea limpio */
  }
}

/* Ajuste fino para móviles muy pequeños (Hasta 400px) */
@media (max-width: 400px) {
  .cta-sec {
    padding: 48px 12px !important;
  }

  .cta-inner h2 {
    font-size: 23px;
  }

  .cta-inner .btn-white {
    max-width: 100% !important; /* Aprovecha todo el ancho disponible del colchón lateral */
  }
}/* End custom CSS */