/* Ficha de producto del diseñador.
   Se monta sobre el héroe de las landing pages (.pl-land-hero y compañía, en
   src/input.css): aquí sólo va lo que la ficha añade —familia, precio, nota y
   la foto de producto—, para no duplicar el héroe entero ni abrir un segundo
   estilo de página. Ver inc-ficha.php. 2026-10-27. */

.pl-ficha-familia {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #01696e;
}

.pl-ficha .pl-land-h1 {
    margin-bottom: 0.65rem;
}

.pl-ficha-precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.1rem;
    color: #04292a;
}
.pl-ficha-precio strong {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.pl-ficha-desde {
    font-size: 1rem;
    color: #4b5563;
}
.pl-ficha-unidad {
    font-size: 0.9rem;
    color: #6b7280;
}

/* El aviso de qué pasa al pulsar: va pegado al botón, no en la lista de
   abajo, porque responde a la duda del momento ("¿esto me cobra ya?"). */
.pl-ficha-nota {
    margin: 0.85rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b7280;
    max-width: 48ch;
}

.pl-ficha-specs {
    margin-top: 1.25rem;
}

/* Foto de producto sobre fondo claro: contain, no cover — son bodegones
   recortados, y al recortarlos otra vez se les corta la sombra. */
.pl-ficha-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #d0d5dd;
    background: #f5f5f7;
}
.pl-ficha-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.25rem;
}

@media (max-width: 899px) {
    /* En el móvil la foto va ANTES del texto: es lo que identifica el
       producto de un vistazo, y si queda debajo del botón no se ve nunca. */
    .pl-ficha { grid-template-areas: "media" "heading"; }
    .pl-ficha-img { aspect-ratio: 3 / 2; }
    .pl-ficha-img img { padding: 0.75rem; }
    .pl-ficha-precio strong { font-size: 1.5rem; }

    /* Y el botón sube justo debajo del precio. En el orden natural queda
       detrás del párrafo de presentación, que en un móvil son ocho o diez
       líneas: el cliente llegaba al precio y lo siguiente que veía no era
       cómo pedirlo. El texto no se pierde, sólo baja un puesto. */
    .pl-ficha .pl-land-hero-heading {
        display: flex;
        flex-direction: column;
    }
    .pl-ficha .pl-ficha-familia { order: 1; }
    .pl-ficha .pl-land-h1       { order: 2; }
    .pl-ficha .pl-ficha-precio  { order: 3; }
    .pl-ficha .pl-land-actions  { order: 4; margin-top: 0.25rem; }
    .pl-ficha .pl-ficha-nota    { order: 5; }
    .pl-ficha .pl-land-intro    { order: 6; margin-top: 1.5rem; }
    .pl-ficha .pl-ficha-specs   { order: 7; }
}

/* Tabla de precios en vivo ([publink_precios]). Se dibuja con los mismos
   grises y radios que las tarjetas de la ficha; en el móvil se desplaza
   lateralmente en vez de apretar las columnas hasta partir las cifras. */
.pl-tabla-precios {
    margin: 0 0 2.5rem;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
/* El desplazamiento lateral va en el envoltorio, no en la <table>: con
   display:block la tabla se encogía a lo que medía su contenido y el borde y
   la nota de abajo seguían ocupando todo el ancho, con medio recuadro vacío. */
.pl-tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pl-tabla-precios table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.pl-tabla-precios th,
.pl-tabla-precios td { white-space: nowrap; }
.pl-tabla-precios th,
.pl-tabla-precios td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid #eef0f3;
}
.pl-tabla-precios thead th {
    background: #f5f5f7;
    font-weight: 600;
    color: #04292a;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}
.pl-tabla-precios tbody th {
    font-weight: 600;
    color: #04292a;
}
.pl-tabla-precios tbody tr:last-child th,
.pl-tabla-precios tbody tr:last-child td { border-bottom: 0; }
.pl-tabla-precios td strong {
    display: block;
    font-weight: 600;
    color: #04292a;
}
.pl-tabla-precios td span {
    display: block;
    font-size: 0.8125rem;
    color: #6b7280;
}
.pl-tabla-na { color: #9ca3af; }
.pl-tabla-nota {
    margin: 0;
    padding: 0.75rem 1rem;
    background: #f5f5f7;
    font-size: 0.8125rem;
    color: #6b7280;
    white-space: normal;
}