/*
Theme Name: Medicaltech
Theme URI: https://medicaltechcorp.com.mx/
Description: Tema hijo de Jawan para Medicaltech Labs. Todas las personalizaciones (CSS y PHP) deben hacerse aquí: el tema padre se sobrescribe al actualizarse.
Author: Pixely
Author URI: https://pixely.com.mx/
Template: jawan
Version: 1.0.0
Text Domain: medicaltech-child
*/

/* ===========================================================
   Variables de marca Medicaltech
   Tomadas del logo oficial: dorado y negro carbón
   =========================================================== */
:root {
    --mt-dorado:        #D49806;
    --mt-dorado-claro:  #FDCC01;
    --mt-dorado-oscuro: #BF7901;
    --mt-negro:         #211915;
    --mt-navbar:        #031520;
}

/* ===========================================================
   Personalizaciones del sitio
   Agregar aquí. Este archivo carga DESPUÉS del CSS del padre,
   por lo que no hace falta usar !important en la mayoría de casos.
   =========================================================== */

/* -----------------------------------------------------------
   Iconos SVG con el rojo de la plantilla escrito dentro del
   markup (jawan-core/elementor/widgets/tt_hero_two.php).
   No son editables desde el panel; el atributo fill del SVG
   pierde frente a cualquier regla CSS, así que basta con esto.
   ----------------------------------------------------------- */
svg [fill="#FF5824"],
svg[fill="#FF5824"] {
    fill: var(--mt-dorado-claro);
}

/* -----------------------------------------------------------
   Patrón hexagonal de marca (tomado del empaque Medicaltech)
   Uso: agregar la clase mt-hex a cualquier sección desde
   Elementor → Avanzado → Clases CSS. Modificadores opcionales:
     mt-hex--dorado  fondos oscuros
     mt-hex--sutil   la mitad de intensidad
     mt-hex--denso   hexágonos más pequeños
     mt-hex--amplio  hexágonos más grandes
   ----------------------------------------------------------- */
.mt-hex {
    position: relative;
}

.mt-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/hex-gris.svg");
    background-repeat: repeat;
    background-position: center;
    background-size: 90px auto;
    pointer-events: none;
    z-index: 0;
}

/* el contenido siempre por encima de la textura */
.mt-hex > * {
    position: relative;
    z-index: 1;
}

.mt-hex--dorado::before { background-image: url("assets/hex-dorado.svg"); }
.mt-hex--sutil::before  { opacity: .5; }
.mt-hex--denso::before  { background-size: 58px auto; }
.mt-hex--amplio::before { background-size: 140px auto; }

/* -----------------------------------------------------------
   Aplicación del patrón a secciones concretas de Home Two.
   Se usa el ID de contenedor (que Elementor siempre imprime)
   porque esta versión no renderiza las clases CSS inyectadas
   directamente en la base de datos.
     d1527f6 = Catálogo por Categorías
     54c0f87 = Notas / Blog
   ----------------------------------------------------------- */
.elementor-element-d1527f6,
.elementor-element-54c0f87 {
    position: relative;
}

.elementor-element-d1527f6::before,
.elementor-element-54c0f87::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/hex-gris.svg");
    background-repeat: repeat;
    background-position: center;
    background-size: 90px auto;
    pointer-events: none;
    z-index: 0;
}

/* la sección del blog, a media intensidad */
.elementor-element-54c0f87::before { opacity: .5; }

/* el contenido siempre por encima de la textura */
.elementor-element-d1527f6 > *,
.elementor-element-54c0f87 > * {
    position: relative;
    z-index: 1;
}

/* ===========================================================
   TARJETA DE PRODUCTO — rediseño Medicaltech
   Se estiliza el componente (.gm_trendingItem_03), no la
   sección, para que portada, tienda y categorías se vean igual.
   =========================================================== */

/* --- rejilla: alturas iguales y respiración --- */
.gm_ncollPD_item {
    display: flex;
    margin-bottom: 28px;
}

.gm_trendingItem_03 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(3, 21, 32, .09);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1),
                box-shadow .35s ease,
                border-color .35s ease;
}

.gm_trendingItem_03:hover {
    transform: translateY(-6px);
    border-color: rgba(249, 194, 33, .55);
    box-shadow: 0 18px 38px -18px rgba(3, 21, 32, .28);
}

/* --- panel de imagen: el producto es blanco, necesita fondo --- */
.gm_trendingItem_03__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background-color: #F7F4EF;
    background-image: url("assets/hex-gris.svg");
    background-size: 54px auto;
    background-repeat: repeat;
    border-bottom: 1px solid rgba(3, 21, 32, .07);
}

.gm_trendingItem_03__thumb a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gm_trendingItem_03__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(3, 21, 32, .16));
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.gm_trendingItem_03:hover .gm_trendingItem_03__thumb img {
    transform: scale(1.05);
}

/* --- contenido --- */
.gm_trendingItem_03__centent {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
    text-align: left;
}

/* estrellas: fuera. No corresponden a un medicamento de prescripción
   y ademas dejaban un hueco vacio en la fila de metadatos. */
.gm_trendingItem_03 .star-rating,
.gm_trendingItem_03__review .star-rating {
    display: none !important;
}

.gm_trendingItem_03__meta a {
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9C6A02;
}

.gm_trendingItem_03__centent h2 {
    margin: 8px 0 0;
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 600;
    min-height: 2.7em;                     /* dos lineas: nombres parejos */
}

.gm_trendingItem_03__centent h2 a {
    color: #031520;
    transition: color .25s ease;
}

.gm_trendingItem_03:hover .gm_trendingItem_03__centent h2 a {
    color: #9C6A02;
}

/* --- zona de precio: se reemplaza el hueco por una etiqueta util --- */
.gm_trendingItem_03__price {
    margin-top: auto;
    padding-top: 14px;
}

.gm_pi03Price { display: none; }

.gm_trendingItem_03__price::before {
    content: "Precio bajo cotización";
    display: block;
    margin-bottom: 12px;
    font-size: .74rem;
    letter-spacing: .04em;
    color: rgba(3, 21, 32, .55);
}

/* --- boton de cotizacion --- */
.gm_trending_cart .add-request-quote-button,
.gm_trending_cart a.button {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #9C6A02;
    border-radius: 8px;
    background: transparent;
    color: #9C6A02;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    transition: background-color .25s ease, color .25s ease;
}

.gm_trending_cart .add-request-quote-button:hover,
.gm_trending_cart a.button:hover {
    background: #F9C221;
    border-color: #F9C221;
    color: #031520;
}

/* --- vista rapida: circular, aparece al pasar el cursor --- */
.gm_pd03Actions {
    position: absolute;
    top: 14px;
    right: 14px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease;
}

.gm_trendingItem_03:hover .gm_pd03Actions {
    opacity: 1;
    transform: translateY(0);
}

.gm_pd03Actions .xpc-quick-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #031520;
    box-shadow: 0 6px 16px -6px rgba(3, 21, 32, .35);
}

.gm_pd03Actions .xpc-quick-view:hover {
    background: #F9C221;
}

@media (max-width: 575px) {
    .gm_trendingItem_03__thumb { aspect-ratio: 1 / 1; padding: 16px; }
    .gm_trendingItem_03__centent { padding: 16px; }
}

/* boton de la tarjeta (sustituye al de carrito del tema) */
.gm_trending_cart .mt-btn-cotizar,
a.mt-btn-cotizar {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #9C6A02;
    border-radius: 8px;
    background: transparent;
    color: #9C6A02;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.gm_trending_cart .mt-btn-cotizar:hover,
a.mt-btn-cotizar:hover {
    background: #F9C221;
    border-color: #F9C221;
    color: #031520;
}

/* -----------------------------------------------------------
   CORRECCIÓN: el tema fuerza el botón de la tarjeta a 40x40 px
   (.gm_trendingItem_03__price .gm_trending_cart a) porque en el
   diseño original era un icono circular de carrito. Con texto
   dentro, el botón se rompía. Estos selectores llevan mayor
   especificidad que los del tema para poder anularlo.
   ----------------------------------------------------------- */
.gm_trendingItem_03 .gm_trendingItem_03__price {
    display: block;
}

.gm_trendingItem_03 .gm_trendingItem_03__price .gm_trending_cart,
.gm_trendingItem_03 .gm_trendingItem_03__price .align-self-stretch {
    display: block;
    width: 100%;
}

.gm_trendingItem_03 .gm_trendingItem_03__price .gm_trending_cart a.mt-btn-cotizar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin-top: 0;
    padding: 11px 14px;
    background: transparent;
    box-shadow: none;
    border: 1px solid #9C6A02;
    border-radius: 8px;
    color: #9C6A02;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.gm_trendingItem_03 .gm_trendingItem_03__price .gm_trending_cart a.mt-btn-cotizar:hover {
    background: #F9C221;
    border-color: #F9C221;
    color: #031520;
}

/* ===========================================================
   TARJETA DE PRODUCTO EN TIENDA Y CATEGORÍAS (.gm_productItem01)
   Mismo lenguaje visual que la tarjeta de la portada.
   El botón de cotización se movió al bloque de detalles desde
   las plantillas product-style-1/2 del tema hijo: en la capa
   .gm_pd01Actions (iconos de 48px sobre la imagen) no cabía.
   =========================================================== */
.jawan_product_item .gm_productItem01 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(3, 21, 32, .09);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1),
                box-shadow .35s ease,
                border-color .35s ease;
}

.jawan_product_item .gm_productItem01:hover {
    transform: translateY(-6px);
    border-color: rgba(249, 194, 33, .55);
    box-shadow: 0 18px 38px -18px rgba(3, 21, 32, .28);
}

/* panel de imagen con la textura del empaque */
.jawan_product_item .gm_productItem01 .gm_pd01Thumb {
    height: 300px;
    padding: 22px;
    background-color: #F7F4EF;
    background-image: url("assets/hex-gris.svg");
    background-size: 54px auto;
    background-repeat: repeat;
    border-bottom: 1px solid rgba(3, 21, 32, .07);
}

.jawan_product_item .gm_productItem01 .gm_pd01Thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(3, 21, 32, .16));
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.jawan_product_item .gm_productItem01:hover .gm_pd01Thumb img {
    transform: scale(1.05);
}

/* iconos de acción: circulares y solo al pasar el cursor */
.jawan_product_item .gm_productItem01 .gm_pd01Actions {
    bottom: 14px;
    right: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}

.jawan_product_item .gm_productItem01:hover .gm_pd01Actions {
    opacity: 1;
    transform: translateY(0);
}

.jawan_product_item .gm_productItem01 .gm_pd01Actions a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #031520;
    box-shadow: 0 6px 16px -6px rgba(3, 21, 32, .35);
}

.jawan_product_item .gm_productItem01 .gm_pd01Actions a:hover {
    background: #F9C221;
    color: #031520;
}

/* detalles */
.jawan_product_item .gm_productItem01 .gm_pd01Details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
    text-align: left;
}

.jawan_product_item .gm_productItem01 .gm_pd01Details h2 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 600;
    min-height: 2.7em;
}

.jawan_product_item .gm_productItem01 .gm_pd01Details h2 a {
    color: #031520;
    transition: color .25s ease;
}

.jawan_product_item .gm_productItem01:hover .gm_pd01Details h2 a {
    color: #9C6A02;
}

/* estrellas fuera; el hueco del precio pasa a ser etiqueta útil */
.jawan_product_item .gm_pd01Reviws,
.jawan_product_item .gm_productItem01 .star-rating {
    display: none !important;
}

.jawan_product_item .gm_productItem01 .gm_pd01Price { display: none; }

.jawan_product_item .gm_productItem01 .gm_pd01PricRevw_wrap {
    display: block;
    margin-top: auto;
    padding-top: 14px;
}

.jawan_product_item .gm_productItem01 .gm_pd01PricRevw_wrap::before {
    content: "Precio bajo cotización";
    display: block;
    margin-bottom: 12px;
    font-size: .74rem;
    letter-spacing: .04em;
    color: rgba(3, 21, 32, .55);
}

/* botón, a ancho completo dentro de los detalles */
.jawan_product_item .gm_productItem01 .gm_pd01Details .align-self-stretch {
    display: block;
    width: 100%;
}

.jawan_product_item .gm_productItem01 .gm_pd01Details a.mt-btn-cotizar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid #9C6A02;
    border-radius: 8px;
    background: transparent;
    color: #9C6A02;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.jawan_product_item .gm_productItem01 .gm_pd01Details a.mt-btn-cotizar:hover {
    background: #F9C221;
    border-color: #F9C221;
    color: #031520;
}

@media (max-width: 575px) {
    .jawan_product_item .gm_productItem01 .gm_pd01Thumb { height: 240px; padding: 16px; }
    .jawan_product_item .gm_productItem01 .gm_pd01Details { padding: 16px; }
}

/* ===========================================================
   PÁGINA "VERIFICA TU PRODUCTO"  (.mtv)
   Mismo lenguaje visual que Home Two: panel hueso con textura
   hexagonal del empaque, acento dorado y azul profundo.
   El marcado vive en el contenido de la página 1713.
   =========================================================== */
.mtv {
    --mtv-oro:        #F9C221;
    --mtv-oro-texto:  #9C6A02;
    --mtv-tinta:      #031520;
    --mtv-hueso:      #F7F4EF;
    --mtv-borde:      rgba(3, 21, 32, .09);
    color: var(--mtv-tinta);
}

.mtv * { box-sizing: border-box; }

.mtv__wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.mtv__seccion { padding: 64px 0; }

.mtv__seccion--hueso {
    position: relative;
    background-color: var(--mtv-hueso);
    background-image: url("assets/hex-gris.svg");
    background-size: 90px auto;
    background-repeat: repeat;
}

.mtv__etiqueta {
    display: block;
    margin-bottom: 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mtv-oro-texto);
}

.mtv h1,
.mtv h2 {
    margin: 0 0 14px;
    line-height: 1.2;
    color: var(--mtv-tinta);
    font-weight: 700;
}

.mtv h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.mtv h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }

.mtv h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--mtv-tinta);
}

.mtv p {
    margin: 0 0 14px;
    line-height: 1.65;
    color: rgba(3, 21, 32, .72);
}

.mtv__entrada {
    max-width: 720px;
    font-size: 1.05rem;
}

/* ---------- bloque del verificador ---------- */
.mtv__verificador {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    padding: 34px 28px 30px;
    background: #fff;
    border: 1px solid var(--mtv-borde);
    border-top: 3px solid var(--mtv-oro);
    border-radius: 16px;
    box-shadow: 0 22px 44px -26px rgba(3, 21, 32, .32);
}

.mtv__verificador h2 { font-size: 1.3rem; }

.mtv__verificador .mtv__nota {
    margin: 16px 0 0;
    font-size: .86rem;
    color: rgba(3, 21, 32, .55);
}

#autentikalo-widget-mec {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

/* ---------- pasos ---------- */
.mtv__pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 34px;
}

.mtv__paso {
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--mtv-borde);
    border-radius: 14px;
}

.mtv__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--mtv-oro);
    color: var(--mtv-tinta);
    font-weight: 700;
    font-size: .95rem;
}

.mtv__paso p { margin: 0; font-size: .94rem; }

/* ---------- resultados ---------- */
.mtv__resultados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 34px;
}

.mtv__resultado {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--mtv-borde);
    border-left: 4px solid var(--mtv-borde);
    border-radius: 12px;
}

.mtv__resultado--ok    { border-left-color: #2E7D4F; }
.mtv__resultado--aviso { border-left-color: var(--mtv-oro); }
.mtv__resultado--alto  { border-left-color: #C0392B; }

.mtv__resultado h3 { display: flex; align-items: center; gap: 9px; }

.mtv__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
}

.mtv__resultado--ok    .mtv__punto { background: #2E7D4F; }
.mtv__resultado--aviso .mtv__punto { background: var(--mtv-oro); }
.mtv__resultado--alto  .mtv__punto { background: #C0392B; }

.mtv__resultado p { margin: 0; font-size: .92rem; }

/* ---------- dos columnas ---------- */
.mtv__duo {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 44px;
    align-items: center;
}

.mtv__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mtv__lista li {
    position: relative;
    padding: 0 0 12px 26px;
    line-height: 1.6;
    color: rgba(3, 21, 32, .72);
}

.mtv__lista li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--mtv-oro);
    transform: rotate(45deg);
}

.mtv__marco {
    padding: 26px;
    background: var(--mtv-hueso);
    background-image: url("assets/hex-gris.svg");
    background-size: 64px auto;
    border: 1px solid var(--mtv-borde);
    border-radius: 14px;
    text-align: center;
}

.mtv__marco img { max-width: 100%; height: auto; border-radius: 8px; }

.mtv__marco .mtv__pendiente {
    display: block;
    padding: 52px 16px;
    font-size: .88rem;
    color: rgba(3, 21, 32, .45);
    border: 1px dashed rgba(3, 21, 32, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .6);
}

/* ---------- cierre ---------- */
.mtv__cierre {
    padding: 44px 40px;
    background: var(--mtv-tinta);
    border-radius: 16px;
    text-align: center;
}

.mtv__cierre h2,
.mtv__cierre p { color: #fff; }
.mtv__cierre p { color: rgba(255, 255, 255, .74); max-width: 620px; margin-inline: auto; }

.mtv__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 22px;
}

.mtv__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 26px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.mtv__btn--solido {
    background: var(--mtv-oro);
    border: 1px solid var(--mtv-oro);
    color: var(--mtv-tinta);
}

.mtv__btn--solido:hover { background: #FFD34D; border-color: #FFD34D; color: var(--mtv-tinta); }

.mtv__btn--linea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.mtv__btn--linea:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .mtv__duo { grid-template-columns: 1fr; gap: 28px; }
    .mtv__pasos,
    .mtv__resultados { grid-template-columns: 1fr; gap: 16px; }
    .mtv__seccion { padding: 46px 0; }
    .mtv__cierre { padding: 34px 22px; }
}

/* La página "Verifica tu producto" trae su propio encabezado diseñado,
   así que se oculta el título estándar del tema para no duplicar el H1. */
.page-id-1713 .entry-header {
    display: none;
}

.page-id-1713 .entry-content,
.page-id-1713 .site-main {
    margin-top: 0;
    padding-top: 0;
}

/* -----------------------------------------------------------
   CORRECCIÓN: bandas con textura a todo el ancho.
   La página se renderiza dentro de un .container de ancho fijo
   (1320px), por lo que las secciones con patrón quedaban
   recortadas a los lados, como una caja flotante. Se sacan con
   márgenes negativos calculados contra el viewport; el contenido
   sigue centrado por .mtv__wrap. El tema ya define
   body{overflow-x:hidden}, así que no aparece scroll horizontal.
   ----------------------------------------------------------- */
.mtv__seccion--hueso {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 72px;
    padding-bottom: 72px;
    border-top: 1px solid rgba(3, 21, 32, .07);
    border-bottom: 1px solid rgba(3, 21, 32, .07);
    background-size: 78px auto;
}

/* el encabezado abre la página: sin línea superior */
.mtv > .mtv__seccion--hueso:first-child {
    border-top: none;
    padding-top: 78px;
}

/* las secciones claras respiran un poco más entre bandas */
.mtv__seccion:not(.mtv__seccion--hueso) {
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (max-width: 900px) {
    .mtv__seccion--hueso,
    .mtv__seccion:not(.mtv__seccion--hueso) {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .mtv > .mtv__seccion--hueso:first-child { padding-top: 52px; }
}

/* ===========================================================
   AJUSTES PARA MÓVIL
   El header venía del demo pensado para escritorio: la barra
   superior usa elementor-inline-items (una sola línea sin
   envolver) y sus tres textos suman ~85 caracteres, que en una
   pantalla de 375 px desbordan y provocan la franja lateral
   vacía en todo el sitio.
   =========================================================== */

/* Cinturón de seguridad contra desbordes horizontales.
   El tema ya define body{overflow-x:hidden}, pero si el desborde
   ocurre a nivel de html la franja sigue apareciendo. */

@media (max-width: 991px) {

    /* --- barra superior: envolver y centrar --- */
    .elementor-1469 .elementor-icon-list-items.elementor-inline-items {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 2px;
        column-gap: 14px;
    }

    .elementor-1469 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
        margin-right: 0;
        font-size: 11.5px;
        line-height: 1.5;
    }

    /* el divisor entre items estorba cuando hay salto de línea */
    .elementor-1469 .elementor-inline-items .elementor-icon-list-item:not(:last-child)::after {
        display: none;
    }

    /* --- bloques de contacto del header: que apilen bien --- */
    .elementor-1469 .gm_iconbox02,
    .elementor-1469 .tt_icon_box {
        min-width: 0;
    }

    /* --- nada dentro del header puede empujar el ancho --- */
    .header-content-holder,
    .header-content-holder .e-con,
    .header-content-holder .e-con-inner {
        max-width: 100%;
    }

    .header-content-holder img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 767px) {

    /* --- barra superior aún más compacta --- */
    .elementor-1469 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
        font-size: 11px;
    }

    /* --- el menú lateral móvil no debe exceder la pantalla --- */
    .jawan-mob-nav .mobile-nav,
    .mobile--nav-menu {
        max-width: 88vw;
    }

    /* --- rejilla de producto: una columna cómoda --- */
    .gm_ncollPD_item {
        margin-bottom: 20px;
    }

    /* --- el mega menú no aplica en móvil: que no fuerce ancho --- */
    .gm_widget_nav,
    .jawan-nav {
        max-width: 100%;
    }
}

/* ===========================================================
   HEADER EN MÓVIL — corrección de layout
   El navbar del demo reparte el ancho así en móvil:
     .elementor-element-62e9276  (logo + buscador) = 100%
     .elementor-element-a87fc2a  (hamburguesa)     =  10%
   Suman 110%, por eso se desbordaban y la hamburguesa caía
   fuera de línea. Aquí se reparte por flex en vez de por
   porcentajes fijos, y se agranda el logo (venía en 100 px).
   Va en CSS y no en los ajustes del widget para que no se
   pierda al volver a guardar el header desde Elementor.
   =========================================================== */

@media (max-width: 991px) {

    /* --- el navbar, una sola fila --- */
    .elementor-element-ec8d7a6 > .e-con-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
    }

    /* --- logo + buscador: ocupan el espacio disponible --- */
    .elementor-element-62e9276 {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    /* --- hamburguesa: solo lo que necesita, al final --- */
    .elementor-element-a87fc2a {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-end;
    }

    /* --- logo más grande y legible --- */
    .elementor-element-8595b58 {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

    .elementor-element-8595b58 img,
    .elementor-element-8595b58 .site-main-logo {
        width: 150px;
        max-width: 150px;
        height: auto;
    }

    /* --- buscador y hamburguesa alineados en la misma línea --- */
    .elementor-element-f11f0a0,
    .elementor-element-e706644 {
        display: flex;
        align-items: center;
    }

    .elementor-element-f11f0a0 .elementor-widget-container,
    .elementor-element-e706644 .elementor-widget-container {
        display: flex;
        align-items: center;
    }
}

@media (max-width: 575px) {

    /* en pantallas pequeñas el logo baja un poco, sin perder presencia */
    .elementor-element-8595b58 img,
    .elementor-element-8595b58 .site-main-logo {
        width: 132px;
        max-width: 132px;
    }

    .elementor-element-ec8d7a6 > .e-con-inner {
        gap: 8px;
    }
}

/* -----------------------------------------------------------
   CORRECCIÓN: botón "subir al inicio" y desplazamiento lateral
   En iOS, con overflow-x:hidden puesto a la vez en html y body,
   los elementos position:fixed pueden anclarse al documento en
   lugar de a la ventana; el botón queda entonces fuera del área
   visible y extiende el scroll horizontal.
   'clip' recorta igual pero NO crea contenedor de scroll, así
   que el posicionamiento fijo se mantiene relativo a la ventana.
   Se deja 'hidden' antes como respaldo para navegadores viejos.
   ----------------------------------------------------------- */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

.scroll-top-btn {
    right: 16px;
    bottom: 16px;
    max-width: 40px;
}

@media (max-width: 767px) {
    .scroll-top-btn {
        right: 12px;
        bottom: 12px;
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}