/*
  Hoja comun de las fichas de producto maquetadas con la guia de marca.

  Nacio como "zahorra.css" para una sola pagina. Al maquetar la segunda ficha se
  renombro a "ficha-producto.css" y el prefijo "zh-" paso a "mf-ficha-": seguir
  duplicando la hoja habria dejado seis ficheros casi identicos y un cambio de
  marca habria que hacerlo seis veces.

  Todo lo que hay aqui usa las variables de tipografias.css, asi que no repite
  ni un color a pelo.

  El prefijo "mf-ficha-" evita chocar con Bootstrap y con el tema comprado, que
  siguen cargados en la pagina.
*/

.mf-ficha {
    font-family: var(--mf-cuerpo);
    color: #1c2430;
    font-size: 1.02rem;
    line-height: 1.7;
}

.mf-ficha h1,
.mf-ficha h2,
.mf-ficha h3 {
    font-family: var(--mf-titulos);
    font-weight: 800;
    color: var(--mf-profundo);
    letter-spacing: -0.01em;
    line-height: 1.12;
}

.mf-ficha-envoltura {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Franjas: alternan blanco y el azul muy claro de la guia. */
.mf-ficha-franja {
    padding: 62px 0;
}

.mf-ficha-franja--clara {
    background: var(--mf-claro);
}

/* ---------- Cabecera ---------- */

.mf-ficha-portada {
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

.mf-ficha-portada h1 {
    margin: 0 0 18px;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    text-transform: uppercase;
}

.mf-ficha-entradilla {
    font-weight: 700;
    font-size: 1.1rem;
}

.mf-ficha-portada-fotos {
    display: grid;
    gap: 18px;
}

.mf-ficha-portada-fotos img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 64 135 / 14%);
}

/* ---------- Boton ---------- */

.mf-ficha-boton {
    display: inline-block;
    margin-top: 26px;
    padding: 15px 40px;
    border-radius: 999px;
    background: var(--mf-profundo);
    color: #fff;
    font-family: var(--mf-titulos);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mf-ficha-boton:hover,
.mf-ficha-boton:focus-visible {
    background: var(--mf-medio);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- Dos columnas con foto ---------- */

.mf-ficha-dos {
    display: grid;
    gap: 44px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

.mf-ficha-dos img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 64 135 / 14%);
}

.mf-ficha-dos h2 {
    margin: 0 0 20px;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    text-transform: uppercase;
}

/* La foto va a la derecha o a la izquierda segun la seccion. */
.mf-ficha-dos--invertida .mf-ficha-dos-foto {
    order: -1;
}

/* ---------- Listas ---------- */

.mf-ficha-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-ficha-lista li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 26px;
}

.mf-ficha-lista li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--mf-acento);
}

.mf-ficha-lista strong {
    color: var(--mf-profundo);
}

/* Los pasos van numerados: el orden es parte de la informacion. */
.mf-ficha-pasos {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.mf-ficha-pasos li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 44px;
    counter-increment: paso;
}

.mf-ficha-pasos li::before {
    content: counter(paso);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mf-acento);
    color: #fff;
    font-family: var(--mf-titulos);
    font-size: 0.88rem;
    font-weight: 700;
}

.mf-ficha-consejo {
    margin-top: 24px;
    padding: 16px 20px;
    border-left: 4px solid var(--mf-acento);
    background: var(--mf-claro);
    border-radius: 0 8px 8px 0;
}

/* ---------- Secciones centradas ---------- */

.mf-ficha-centrado {
    text-align: center;
}

.mf-ficha-centrado h2 {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    text-transform: uppercase;
}

.mf-ficha-colores {
    margin: 0 0 34px;
    font-family: var(--mf-titulos);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mf-profundo);
}

.mf-ficha-acabados {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 34px;
}

.mf-ficha-acabados figure {
    margin: 0;
}

.mf-ficha-acabados img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 64 135 / 14%);
}

.mf-ficha-acabados figcaption {
    margin-top: 11px;
    font-family: var(--mf-titulos);
    font-weight: 700;
    color: var(--mf-profundo);
}

/* ---------- Preguntas ---------- */

.mf-ficha-preguntas {
    max-width: 780px;
    margin: 0 auto;
}

/*
  Se usa <details> y no un acordeon de JavaScript: la pagina publica no carga JS
  propio y la politica de seguridad no admite codigo en linea. Ademas, asi el
  contenido esta en el HTML y lo lee el buscador aunque este plegado.
*/
.mf-ficha-pregunta {
    margin-bottom: 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(0 64 135 / 8%);
}

.mf-ficha-franja--clara .mf-ficha-pregunta {
    background: #fff;
}

.mf-ficha-pregunta > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    font-family: var(--mf-titulos);
    font-weight: 700;
    color: var(--mf-profundo);
    list-style: none;
}

.mf-ficha-pregunta > summary::-webkit-details-marker {
    display: none;
}

.mf-ficha-pregunta > summary::after {
    content: "+";
    margin-left: auto;
    color: var(--mf-acento);
    font-size: 1.4rem;
    line-height: 1;
}

.mf-ficha-pregunta[open] > summary::after {
    content: "−";
}

.mf-ficha-pregunta-cuerpo {
    padding: 0 20px 18px;
}

/* ---------- Antes y despues ---------- */

.mf-ficha-comparativa {
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    margin-top: 34px;
}

.mf-ficha-comparativa img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 64 135 / 14%);
}

.mf-ficha-comparativa figcaption {
    margin-top: 12px;
    font-family: var(--mf-titulos);
    font-weight: 700;
    color: var(--mf-profundo);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mf-ficha-flecha {
    color: var(--mf-acento);
    font-size: 2.6rem;
    line-height: 1;
}

/* ---------- Cierre ---------- */

.mf-ficha-cierre {
    text-align: center;
}

.mf-ficha-cierre p {
    margin: 0 auto;
    max-width: 640px;
    font-family: var(--mf-titulos);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mf-profundo);
}

/* ---------- Medidas sueltas ---------- */

/*
  Las medidas del catalogo en papel van en recuadros grises sueltos, no en una
  lista. Se reproduce aqui porque asi el cliente reconoce el dato que ya vio en
  el PDF, y porque una medida ("50x50x4 mm") no es una frase: en una lista con
  vinetas se lee como si lo fuera.
*/
.mf-ficha-medidas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.mf-ficha-medidas li {
    padding: 9px 16px;
    border-radius: 6px;
    background: var(--mf-claro);
    font-family: var(--mf-titulos);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mf-profundo);
    white-space: nowrap;
}

.mf-ficha-franja--clara .mf-ficha-medidas li {
    background: #fff;
}

/* ---------- Tabla de datos ---------- */

.mf-ficha-datos {
    width: 100%;
    margin-top: 22px;
    border-collapse: collapse;
    text-align: left;
}

.mf-ficha-datos th,
.mf-ficha-datos td {
    padding: 12px 14px;
    border-bottom: 1px solid rgb(0 64 135 / 12%);
    vertical-align: top;
}

.mf-ficha-datos th {
    width: 38%;
    font-family: var(--mf-titulos);
    font-weight: 700;
    color: var(--mf-profundo);
}

/* La tabla puede no caber en un movil: que se desplace ella, no la pagina. */
.mf-ficha-tabla {
    overflow-x: auto;
}

/* ---------- Galeria de obra ---------- */

.mf-ficha-galeria {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 30px;
}

.mf-ficha-galeria figure {
    margin: 0;
}

.mf-ficha-galeria img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 64 135 / 14%);
}

.mf-ficha-galeria figcaption {
    margin-top: 10px;
    font-size: 0.94rem;
    text-align: left;
}

/* ---------- Tarjetas de modelo o de uso ---------- */

.mf-ficha-tarjetas {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: 30px;
    text-align: left;
}

.mf-ficha-tarjeta {
    padding: 24px 24px 26px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(0 64 135 / 8%);
}

.mf-ficha-tarjeta h3 {
    margin: 0 0 10px;
    font-size: 1.12rem;
}

.mf-ficha-tarjeta p:last-child {
    margin-bottom: 0;
}

/* ---------- Enlaces a fichas hermanas ---------- */

.mf-ficha-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
    padding: 0;
    list-style: none;
}

.mf-ficha-enlaces a {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid var(--mf-medio);
    border-radius: 999px;
    color: var(--mf-profundo);
    font-family: var(--mf-titulos);
    font-weight: 700;
    font-size: 0.93rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.mf-ficha-enlaces a:hover,
.mf-ficha-enlaces a:focus-visible {
    background: var(--mf-medio);
    color: #fff;
}

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 860px) {
    .mf-ficha-portada,
    .mf-ficha-dos {
        grid-template-columns: 1fr;
    }

    /* En un movil la tabla de dos columnas se estrecha demasiado: la etiqueta
       pasa a ir encima del dato. */
    .mf-ficha-datos th {
        width: 42%;
    }

    /* En una sola columna la foto va siempre debajo del texto: invertirla
       dejaria la imagen antes del titulo que la explica. */
    .mf-ficha-dos--invertida .mf-ficha-dos-foto {
        order: 0;
    }

    .mf-ficha-comparativa {
        grid-template-columns: 1fr;
    }

    .mf-ficha-flecha {
        transform: rotate(90deg);
        justify-self: center;
    }

    .mf-ficha-franja {
        padding: 44px 0;
    }
}