/* ========================================================
   VISITA NUESTRA TIENDA — ver inc/tiendas/render.php.
   Color y tipografía desde los tokens de style.css.
   ======================================================== */

/* ========================================================
   LA CABECERA PEGADA AL MENÚ
   Reglas GEMELAS de las de css/impacto.css y css/sobre-nosotros.css: cada landing carga solo
   su hoja, y las tres necesitan lo mismo. Si Kadence cambia sus clases, hay que tocar las tres.
   ======================================================== */
body.mmc-landing-sangre .content-area,
body.mmc-landing-sangre .site-main,
body.mmc-landing-sangre .entry-content-wrap,
body.mmc-landing-sangre .entry-content,
body.mmc-landing-sangre .content-container,
body.mmc-landing-sangre .site-container,
body.mmc-landing-sangre .wp-site-blocks,
body.mmc-landing-sangre #primary,
body.mmc-landing-sangre article.entry {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.mmc-landing-sangre .wp-block-kadence-header,
body.mmc-landing-sangre .kb-header-placeholder-wrapper { margin-bottom: 0 !important; }

body.mmc-landing-sangre .entry-hero-container-inner,
body.mmc-landing-sangre .entry-header,
body.mmc-landing-sangre .page-title { display: none !important; }

/* ========================================================
   BASE
   ======================================================== */
.mmc-tie {
    font-family: var(--mmc-fuente);
    color: var(--mmc-texto);
    overflow-x: clip;
}

/* Las piezas a sangre salen del contenedor del tema para ocupar la ventana entera. */
.mmc-tie .mmc-tie-hero,
.mmc-tie .mmc-tie-destacado {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* La separación entre bloques va en MARGEN, no en relleno: los márgenes verticales de hermanos
   se colapsan y queda el mayor, no la suma. Con relleno, cada hueco sería el doble. */
.mmc-tie-bloque {
    max-width: 1280px;
    margin: 56px auto;
    padding: 0 20px;
}

.mmc-tie .mmc-tie-seccion-titulo {
    margin: 0 0 32px;
    font-size: clamp(21px, 2.3vw, 26px);
    font-weight: 700;
    line-height: var(--mmc-lh-titulo);
    color: var(--mmc-texto-fuerte);
    text-align: center;
}

/* ========================================================
   CABECERA
   ======================================================== */
.mmc-tie-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    margin-bottom: 56px;
    padding: 70px 20px;
    text-align: center;
}
.mmc-tie-hero-plano { background: linear-gradient(100deg, var(--mmc-acento), var(--mmc-accion)); }
.mmc-tie-hero-caja { max-width: 860px; }

.mmc-tie .mmc-tie-hero-titulo {
    margin: 0;
    color: #fff;
    font-size: clamp(27px, 4.2vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
    /* Seguro de legibilidad: el velo se puede bajar a cero desde el panel. */
    text-shadow: 0 1px 14px rgba(0,0,0,.35);
}

.mmc-tie .mmc-tie-hero-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}
/* Píldoras blancas sobre la foto. Los colores van fijos y no por token porque viven sobre una
   imagen que elige el usuario: lo único seguro encima de cualquier foto es el blanco. */
.mmc-tie-hero-btn {
    display: inline-block;
    padding: 14px 34px;
    border-radius: var(--mmc-radio-pildora);
    background: #fff;
    color: var(--mmc-texto-fuerte);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mmc-tie-hero-btn:hover { background: var(--mmc-texto-fuerte); color: #fff; }

/* ========================================================
   FICHAS DE TIENDA
   ======================================================== */
/* Dos columnas abiertas, sin tarjeta: a la izquierda toda la información y a la derecha la
   foto con el mapa debajo. Sin borde ni fondo propio — la ficha ya se distingue por su peso
   tipográfico, y encerrarla en una caja la hacía competir con las demás secciones. */
/* NO es 50/50. En la referencia la columna de texto ocupa alrededor del 40% y las imágenes el
   58%: el texto va en línea corta, que se lee mejor, y la foto se lleva el espacio porque es
   lo que vende la tienda. El minmax(0,…) evita que una palabra larga en el texto ensanche su
   columna por encima de lo que le toca. */
.mmc-tie-ficha {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.mmc-tie-ficha + .mmc-tie-ficha { margin-top: 80px; }

.mmc-tie-ficha-datos { min-width: 0; }
.mmc-tie-ficha-media { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.mmc-tie-ficha-foto img,
.mmc-tie-ficha-mapa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--mmc-radio-grande);
}
/* Ventanas de proporción fija: con fotos de altos distintos, la columna derecha quedaba más
   larga o más corta que el texto según la imagen que se subiera. */
.mmc-tie-ficha-foto,
.mmc-tie-ficha-mapa { aspect-ratio: 16 / 11; }

.mmc-tie .mmc-tie-ficha-ciudad {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 400;
    color: var(--mmc-texto-tenue);
}
.mmc-tie .mmc-tie-ficha-nombre {
    margin: 0 0 28px;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--mmc-texto-fuerte);
    text-wrap: balance;
}
/* Medidas de la referencia (.storePage .title). */
.mmc-tie .mmc-tie-ficha-subtitulo {
    margin: 0 0 32px;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    color: var(--mmc-negro);
}

/* --- Ventajas dentro de la ficha --- */
/* Medidas de la referencia (.storePage .list). */
.mmc-tie .mmc-tie-ficha-ventajas {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mmc-tie .mmc-tie-ficha-ventajas li {
    display: flex;
    /* center y no flex-start: con el texto a dos líneas la referencia deja el icono a media
       altura, no pegado a la primera. */
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: var(--mmc-negro);
}
.mmc-tie-ficha-ventajas img { flex-shrink: 0; width: 24px; height: 24px; object-fit: contain; }

/* --- Teléfono y dirección, con su icono --- */
/* Medidas de la referencia (.storePage .contact): 18px y 40px de aire debajo de cada dato. */
.mmc-tie .mmc-tie-dato {
    display: flex;
    align-items: center;
    gap: 14px;
    /* El aire va ARRIBA de cada dato, no abajo: así cada uno se separa de lo que tenga encima
       sea lo que sea, y el último no empuja al botón con un margen que ya no hace falta. */
    margin: 18px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mmc-negro);
}

/* El primer dato después del horario necesita más aire que el que hay entre teléfono y
   dirección: ahí se cambia de bloque, no de línea.

   Va con el selector de hermano adyacente y no con :first-of-type, que era lo que había y
   estaba mal: ese pseudo-selector mira el primer <p> del CONTENEDOR, y el primero es la
   ciudad. El margen se le estaba aplicando a ella y el teléfono se quedaba pegado a la tabla. */
.mmc-tie .mmc-tie-horario + .mmc-tie-dato { margin-top: 30px; }
.mmc-tie-dato-icono { flex-shrink: 0; width: 22px; height: 22px; object-fit: contain; color: var(--mmc-enlace); }
.mmc-tie-dato a { color: var(--mmc-negro); text-decoration: none; }
.mmc-tie-dato a:hover { color: var(--mmc-enlace); text-decoration: underline; }

/* --- Horario ---
   La etiqueta de "Abierto ahora" se quitó: era texto fijo y una etiqueta que anuncia abierto
   con la tienda cerrada es peor que no tener ninguna. Queda solo el rótulo con su raya. */
.mmc-tie .mmc-tie-horario-titulo {
    margin: 34px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mmc-borde);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--mmc-negro);
}

.mmc-tie-horario { margin: 0; text-align: left; }
.mmc-tie-horario-fila {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--mmc-fondo-suave);
}
.mmc-tie-horario-fila:last-child { border-bottom: none; }
.mmc-tie .mmc-tie-horario dt { margin: 0; font-size: 16px; font-weight: 400; color: var(--mmc-negro); }
/* Peso 300 en las horas: es lo que las distingue del día sin cambiarles el color. */
.mmc-tie .mmc-tie-horario dd { margin: 0; font-size: 16px; font-weight: 300; color: var(--mmc-negro); text-align: right; }

/* --- Botones de la ficha --- */
.mmc-tie-ficha-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
/* Los botones se ajustan a su texto, no se estiran. Con flex:1 ocupaban media columna cada uno
   y pesaban más que el nombre de la tienda; en la referencia son dos píldoras compactas.

   Las medidas verticales —relleno, cuerpo, interlineado y borde— son LAS MISMAS que las del
   botón de indicaciones de más abajo, para que los tres tengan exactamente el mismo alto.
   Antes el de abajo iba a 18px con borde de 2 y los de arriba a 14px con borde de 1, y se
   veían de tres tamaños distintos en la misma columna. */
.mmc-tie-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 12px 26px;
    border-radius: var(--mmc-radio-pildora);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background .15s, color .15s;
}
/* #2196F3 va literal: es el celeste que pidió el usuario y ningún token del tema se le
   parece — el azul de acción (--mmc-accion) es mucho más oscuro. */
.mmc-tie-btn-solido { background: #2196F3; color: #fff; border: 2px solid #2196F3; }
.mmc-tie-btn-solido:hover { background: #1478c8; border-color: #1478c8; color: #fff; }
.mmc-tie-btn-linea { background: #fff; color: var(--mmc-texto-fuerte); border: 2px solid var(--mmc-texto-fuerte); }
.mmc-tie-btn-linea:hover { background: var(--mmc-texto-fuerte); color: #fff; }

/* BOTÓN DE INDICACIONES — medidas de la referencia (.storePage .ctaGetDirection): 306×48,
   borde de 2px, 18px en negrita.

   El ancho de 306px va como MÁXIMO y no como medida fija: en una columna estrecha, un ancho
   fijo se saldría del contenedor. El alto se consigue con relleno en vez de con height, así
   que un texto largo que pase a dos líneas ensancha el botón en vez de desbordarlo.
   El color es --mmc-texto-fuerte, que es exactamente el #020621 de la referencia. */
.mmc-tie-btn-mapa {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 306px;
    margin-top: 28px;
    padding: 12px 26px;
    border: 2px solid var(--mmc-texto-fuerte);
    border-radius: var(--mmc-radio-pildora);
    color: var(--mmc-texto-fuerte);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background .3s, color .3s;
}
.mmc-tie-btn-mapa:hover { background: var(--mmc-texto-fuerte); color: #fff; }

/* ========================================================
   DESTACADO
   ======================================================== */
.mmc-tie-destacado { padding: 0; }

/* Sin tope de ancho: la foto tiene que llegar al borde de la ventana, igual que el fondo
   celeste. Con max-width la caja se paraba antes y quedaba una franja de color a la derecha
   con la imagen cortada a medias.
   El texto se alinea solo con la columna de contenido mediante su relleno: 50vw es el centro
   de la ventana y 640px la mitad del ancho de contenido (1280), así que la diferencia es
   exactamente el margen que hay desde el borde. El max() evita que en pantallas estrechas
   ese cálculo se vuelva negativo y el texto se pegue al filo. */
.mmc-tie-dest-caja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    max-width: none;
}
/* La figura se mueve con order y no reordenando el HTML: el texto va siempre primero en el
   documento, que es lo que leen un lector de pantalla y un buscador. */
.mmc-tie-dest-img-izq .mmc-tie-dest-figura { order: -1; }

.mmc-tie-dest-texto {
    padding: 56px 60px;
    padding-left: max(20px, calc(50vw - 640px));
    min-width: 0;
}
/* Con la imagen a la izquierda el sangrado cambia de lado: el relleno grande pasa a la derecha. */
.mmc-tie-dest-img-izq .mmc-tie-dest-texto {
    padding-left: 60px;
    padding-right: max(20px, calc(50vw - 640px));
}
.mmc-tie .mmc-tie-dest-titulo {
    margin: 0 0 16px;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 600;
    line-height: var(--mmc-lh-titulo);
    color: var(--mmc-texto-fuerte);
    text-wrap: balance;
}
.mmc-tie .mmc-tie-dest-cuerpo p {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--mmc-texto-suave);
}
.mmc-tie .mmc-tie-dest-cuerpo p:last-child { margin-bottom: 0; }

.mmc-tie-ventajas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 26px;
}
.mmc-tie-ventaja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 14px;
    border-radius: var(--mmc-radio);
    background: #fff;
    text-align: center;
}
.mmc-tie-ventaja img { width: 30px; height: 30px; object-fit: contain; }
.mmc-tie-ventaja span { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--mmc-texto-medio); }

.mmc-tie-dest-figura { min-width: 0; align-self: stretch; }
.mmc-tie-dest-figura img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; }

/* ========================================================
   CARRUSEL DE COLECCIONES
   ======================================================== */
.mmc-tie-carrusel { position: relative; }

/* La pista ya es un carrusel sin JavaScript: se arrastra y se desliza con el dedo, y el
   anclaje hace que siempre pare encajada en una tarjeta. Las flechas solo añaden otra forma
   de moverla para quien usa ratón. */
.mmc-tie-pista {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    scrollbar-width: none;
}
.mmc-tie-pista::-webkit-scrollbar { display: none; }

.mmc-tie-coleccion {
    position: relative;
    flex: 0 0 auto;
    width: 300px;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
    border-radius: var(--mmc-radio-grande);
    background-color: var(--mmc-fondo-gris);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* Velo de abajo: el título y el botón son blancos y sobre una foto clara se perderían. */
.mmc-tie-coleccion::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.62));
}
.mmc-tie-coleccion-pie {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 20px;
}
.mmc-tie .mmc-tie-coleccion-titulo {
    margin: 0 0 12px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.mmc-tie-coleccion-btn {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid #fff;
    border-radius: var(--mmc-radio-pildora);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mmc-tie-coleccion-btn:hover { background: #fff; color: var(--mmc-texto-fuerte); }

.mmc-tie-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--mmc-borde);
    border-radius: 50%;
    background: #fff;
    color: var(--mmc-texto-fuerte);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(16,23,28,.12);
    transition: opacity .15s;
}
.mmc-tie-flecha-ant { left: -16px; }
.mmc-tie-flecha-sig { right: -16px; }
/* Lo pone el JS al llegar a un extremo: la flecha sigue ahí pero deja de invitar a pulsarla. */
.mmc-tie-flecha[disabled] { opacity: .3; cursor: default; }

/* Kadence repinta cualquier <button> al enfocarlo; sin esto la flecha recién pulsada se queda
   con fondo de color. Mismo remedio que en .mmc-gt-tab y .mmc-resumen-toggle. */
.mmc-tie-flecha,
.mmc-tie-flecha:hover,
.mmc-tie-flecha:focus,
.mmc-tie-flecha:active {
    background: #fff !important;
    color: var(--mmc-texto-fuerte) !important;
    box-shadow: 0 2px 10px rgba(16,23,28,.12) !important;
    outline: none;
}
.mmc-tie-flecha:focus-visible { outline: 2px solid var(--mmc-enlace) !important; outline-offset: 2px; }

/* --- Banda de beneficios --- */
.mmc-tie-beneficios { padding: 0; max-width: none; }

/* ========================================================
   MÓVIL
   ======================================================== */
@media (max-width: 860px) {
    .mmc-tie-bloque { margin: 40px auto; padding: 0 18px; }

    .mmc-tie-hero { min-height: 320px; margin-bottom: 40px; padding: 48px 18px; }
    .mmc-tie-hero-btn { padding: 12px 26px; font-size: 15px; }

    /* Una columna: primero los datos, después la foto y el mapa. */
    .mmc-tie-ficha { grid-template-columns: 1fr; gap: 30px; }
    .mmc-tie-ficha + .mmc-tie-ficha { margin-top: 56px; }
    .mmc-tie .mmc-tie-ficha-nombre { margin-bottom: 22px; }

    .mmc-tie-dest-caja { grid-template-columns: 1fr; }
    /* La imagen siempre debajo del texto en móvil: el ajuste del panel describe una
       disposición en dos columnas que aquí no existe. */
    .mmc-tie-dest-img-izq .mmc-tie-dest-figura { order: 0; }
    /* El sangrado hacia la columna de contenido tampoco aplica a una sola columna. */
    .mmc-tie-dest-texto,
    .mmc-tie-dest-img-izq .mmc-tie-dest-texto { padding: 36px 22px; }
    .mmc-tie-dest-figura img { min-height: 260px; }
    .mmc-tie-ventajas { gap: 10px; }

    .mmc-tie-coleccion { width: 240px; }
    /* Las flechas se esconden: en táctil se arrastra, y ahí dentro taparían la tarjeta. */
    .mmc-tie-flecha { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mmc-tie-pista { scroll-behavior: auto; }
}