/* ========================================================
   SOBRE NOSOTROS — ver inc/sobre-nosotros/render.php.

   Todo el color y la tipografía salen de los tokens de style.css (--mmc-*), igual que el resto
   del tema. Los únicos colores propios son los del banner y los de las bandas, que el usuario
   elige en el panel y llegan como atributo style.

   Medidas: el contenido se topa a 1140px y las bandas van a todo el ancho de la ventana.
   ======================================================== */

.mmc-sn {
    font-family: var(--mmc-fuente);
    color: var(--mmc-texto);
    /* clip y no hidden: hidden convertiría este bloque en contenedor de scroll y rompería
       cualquier position:sticky que hubiera dentro o encima. clip recorta sin ese efecto. */
    overflow-x: clip;
}

/* ========================================================
   EL BANNER PEGADO AL MENÚ

   El hueco blanco entre el menú y el banner no lo pone esta página: lo pone Kadence alrededor
   del área de contenido, y desde dentro del shortcode no se alcanza. De ahí la clase en el
   <body> (ver mmc_sn_body_class en inc/sobre-nosotros/render.php) y esta lista de contenedores:
   son los que Kadence usa según la plantilla de página elegida, y sobra con que uno acierte.
   Si tu página sigue mostrando el título del tema encima, desactívalo en los ajustes de Kadence
   de esa página — aquí también se esconde, porque el banner ya trae su propio título.
   ======================================================== */
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;
}

/* El propio header: el bloque de cabecera de Kadence y el hueco que reserva para la versión
   fija (kb-header-placeholder-wrapper) traen su propio margen inferior. Ese es el que deja la
   franja blanca entre el menú y el banner, y no se alcanza desde el área de contenido. */
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; }

/* ========================================================
   BANNER + PÍLDORAS
   ======================================================== */
/* Sale del contenedor del tema para ocupar la ventana entera.
   El 50% es del contenedor; el 50vw, de la ventana: la diferencia es exactamente el margen que
   hay que comer por cada lado, sea cual sea el ancho del contenedor. */
.mmc-sn .mmc-sn-banner,
.mmc-sn .mmc-sn-banda {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.mmc-sn-banner { padding: 54px 20px 46px; }

/* Caja interior a la misma anchura que el contenido: con el banner a todo el ancho de la
   ventana, sin ella el texto alineado a la izquierda se pegaría al borde del navegador. */
/* El mismo ancho que .mmc-sn-bloque: así el texto del banner alineado a la izquierda arranca
   exactamente en la misma línea vertical que el contenido de abajo. Si cambias uno, cambia el
   otro o los dos bordes dejarán de coincidir. */
.mmc-sn-banner-caja {
    max-width: 1280px;
    margin: 0 auto;
}

.mmc-sn .mmc-sn-banner-titulo {
    margin: 0;
    max-width: 26ch;
    color: #fff;
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 400;
    line-height: var(--mmc-lh-titulo);
    text-wrap: balance;
}

/* El prefijo .mmc-sn es para que el margen le gane a la tipografía de Kadence, que también
   toca los hijos directos del contenido. Sin él las píldoras salían pegadas al título. */
.mmc-sn .mmc-sn-pildoras {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

/* --- Alineación del banner, elegida en el panel --- */
.mmc-sn-align-centro .mmc-sn-banner-caja { text-align: center; }
.mmc-sn-align-centro .mmc-sn-banner-titulo { margin-left: auto; margin-right: auto; }
.mmc-sn-align-centro .mmc-sn-pildoras { justify-content: center; }

.mmc-sn-align-izquierda .mmc-sn-banner-caja { text-align: left; }
.mmc-sn-align-izquierda .mmc-sn-pildoras { justify-content: flex-start; }

/* Píldora: borde blanco sobre el degradado y, al elegirla, se invierte a fondo blanco.
   Los colores van fijos y no por token porque viven sobre un fondo que elige el usuario: lo
   único seguro encima de cualquier color de marca es el blanco. */
.mmc-sn-pildora {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: var(--mmc-radio-pildora);
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background .18s, color .18s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
/* El color y el fondo se fuerzan porque Kadence repinta cualquier <button> al enfocarlo: sin
   esto, la píldora recién pulsada se queda con el texto en blanco sobre fondo blanco. Es el
   mismo problema que ya se corrigió en .mmc-gt-tab y en .mmc-resumen-toggle. */
.mmc-sn-pildora,
.mmc-sn-pildora:hover,
.mmc-sn-pildora:focus,
.mmc-sn-pildora:active {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none;
}
.mmc-sn-pildora:hover { background: rgba(255,255,255,.16) !important; }

/* Elegida: fondo blanco y el texto en el azul de enlace, con el MISMO peso que las demás.
   En negrita y negro la píldora activa pesaba el doble que sus vecinas y rompía la fila; el
   cambio de fondo ya basta para saber cuál está abierta. */
.mmc-sn-pildora.activa,
.mmc-sn-pildora.activa:hover,
.mmc-sn-pildora.activa:focus {
    background: #fff !important;
    color: var(--mmc-enlace) !important;
    border-color: #fff;
    font-weight: 500;
}
/* El foco vuelve solo para el teclado, no para el clic. */
.mmc-sn-pildora:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }

/* ========================================================
   PANELES Y BLOQUES
   ======================================================== */
.mmc-sn-panel[hidden] { display: none; }

/* 1280px (antes 1140): a 1140 cada columna se quedaba en unos 545px y, con el texto centrado,
   las líneas cortaban pronto dejando aire a los lados. Con 1280 la columna pasa de 600px y el
   párrafo respira sin llegar a líneas incómodas de leer. */
.mmc-sn-bloque {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 20px;
}

/* --- Texto + imagen --- */
.mmc-sn-ti {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
/* El orden visual lo decide el panel. Se mueve la figura con order y no reordenando el HTML
   para que el texto vaya siempre primero en el documento: es lo que leen un lector de pantalla
   y un buscador, y ahí el orden correcto es el del contenido, no el del diseño. */
.mmc-sn-img-izq .mmc-sn-ti-figura { order: -1; }
.mmc-sn-sin-imagen { grid-template-columns: 1fr; }
.mmc-sn-sin-imagen .mmc-sn-ti-texto { max-width: 70ch; margin: 0 auto; }

.mmc-sn-ti-texto { min-width: 0; }
.mmc-sn-txt-centro .mmc-sn-ti-texto { text-align: center; }

/* Los márgenes y el peso van prefijados con .mmc-sn para ganarle a la tipografía de Kadence,
   que aplica sus propios márgenes a los <p> y <h2> del contenido con dos clases de
   especificidad. Sin el prefijo, el antetítulo quedaba a 60px del título en vez de a 6. */
.mmc-sn .mmc-sn-antetitulo {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mmc-texto-tenue);
}
.mmc-sn .mmc-sn-titulo {
    margin: 0 0 16px;
    font-size: clamp(21px, 2.4vw, 26px);
    font-weight: 600;
    line-height: var(--mmc-lh-titulo);
    color: var(--mmc-texto-fuerte);
    text-wrap: balance;
}
.mmc-sn-cuerpo {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--mmc-texto-suave);
}
.mmc-sn .mmc-sn-cuerpo p { margin: 0 0 16px; }
.mmc-sn-cuerpo p:last-child { margin-bottom: 0; }
.mmc-sn-cuerpo a { color: var(--mmc-enlace); }
.mmc-sn-cuerpo strong { color: var(--mmc-texto-fuerte); font-weight: 600; }

.mmc-sn-ubicacion {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--mmc-texto-suave);
}
.mmc-sn-txt-centro .mmc-sn-ubicacion { justify-content: center; }
.mmc-sn-ubicacion svg { flex-shrink: 0; color: var(--mmc-texto-tenue); }

.mmc-sn-enlace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--mmc-texto-fuerte);
    text-decoration: none;
}
.mmc-sn-enlace:hover { color: var(--mmc-enlace); }
.mmc-sn-enlace svg { flex-shrink: 0; }

.mmc-sn-ti-figura { min-width: 0; }
.mmc-sn-ti-figura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mmc-radio-grande);
}

/* --- Banda de color --- */
/* Va DESPUÉS de .mmc-sn-bloque a propósito. Esa regla fija max-width:1140px y margin:0 auto,
   y con la misma especificidad gana la última: por eso antes la banda salía recortada en el
   centro en vez de llegar a los bordes. Aquí se le devuelve el ancho completo. */
.mmc-sn .mmc-sn-banda {
    max-width: 100vw;
    padding: 56px 20px;
    text-align: center;
}
.mmc-sn .mmc-sn-banda-texto {
    max-width: 46ch;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(19px, 2.4vw, 25px);
    font-weight: 400;
    line-height: 1.35;
    text-wrap: balance;
}

/* --- Banda de beneficios --- */
/* Reutiliza el bloque de garantía de la home y la ficha; aquí solo se le da el aire propio de
   esta página, sin tocar su estilo (vive en css/single-producto.css). */
.mmc-sn-beneficios { padding: 0; max-width: none; }

/* ========================================================
   MÓVIL
   ======================================================== */
@media (max-width: 860px) {
    .mmc-sn-banner { padding: 38px 18px 32px; }

    /* Se repite el prefijo de alineación para igualar la especificidad de las reglas de
       .mmc-sn-align-*: en móvil la fila arranca siempre por la izquierda, da igual lo que
       diga el panel, porque con scroll lateral centrar deja la primera píldora medio cortada. */
    .mmc-sn-align-centro .mmc-sn-pildoras,
    .mmc-sn-align-izquierda .mmc-sn-pildoras,
    .mmc-sn-pildoras {
        /* En fila con scroll lateral, no apiladas: cinco píldoras en columna empujan el
           contenido media pantalla hacia abajo y esconden de qué va la página. */
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        margin: 22px -18px 0;
        padding: 2px 18px 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mmc-sn-pildoras::-webkit-scrollbar { display: none; }
    .mmc-sn-pildora { flex: 0 0 auto; scroll-snap-align: start; font-size: 14px; padding: 9px 17px; }

    .mmc-sn-bloque { padding: 42px 18px; }
    .mmc-sn-ti { grid-template-columns: 1fr; gap: 26px; }
    /* La imagen siempre debajo del texto en móvil, da igual lo que diga el panel: ese ajuste
       describe una disposición en dos columnas que aquí no existe. */
    .mmc-sn-img-izq .mmc-sn-ti-figura { order: 0; }
    .mmc-sn-banda { padding: 40px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .mmc-sn-pildora { transition: none; }
}