/* ProductSpecifications.css — Tabla "Características técnicas" de la ficha de producto. Nodos
   2611:25899 (PC), 2611:26799 (tablet) y 2611:26516 (mobile). Tipografía base: site.css.

   Encabezado (eyebrow con cuadrado + título) y una tarjeta blanca con borde suave: filas etiqueta /
   valor y, debajo, una fila por característica del producto igual a las demás (título como
   etiqueta y texto como valor, recortado a tres líneas con "Ver más"). PC: título
   semibold 24, etiqueta y valor semibold 13, la Referencia bold 14 en mayúsculas. TABLET: eyebrow
   10px espaciado, título black 28, etiqueta regular 13 y valor bold 13. MOBILE: como tablet, con
   esquinas de 6px.

   SIN DESBORDES: todo texto envuelve (overflow-wrap) aunque no tenga espacios; nada usa nowrap. */

/* --- Sección. --- */
/* Su lugar es la zona "Main" del Product Detail Hero, que pone los márgenes: ahí el relleno se anula
   desde ProductDetailHero.css. Suelta en una columna del layout (12px de gutter) lleva el suyo: 48px
   con el gutter a los lados (36 + 12). */
.ProductSpecifications {
    width: 100%; /* Ancho de su columna. */
    padding: 40px 36px;
    box-sizing: border-box; /* El relleno entra en el ancho. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: #0f0f12; /* Casi negro del nodo. */
}

    .ProductSpecifications *,
    .ProductSpecifications *::before,
    .ProductSpecifications *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .ProductSpecifications :where(h2, h3, p, dl, dd) {
        margin: 0; /* El espaciado lo ponen los contenedores. */
    }

/* --- Encabezado: eyebrow y título (9px entre sí y 18px hasta la tarjeta, como el nodo). --- */
.ProductSpecifications-header {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
}

.ProductSpecifications-eyebrow {
    display: flex; /* Cuadradito y texto en línea. */
    align-items: center;
    gap: 10px; /* Separación del nodo. */
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    letter-spacing: 0.5px;
    line-height: 1.35;
    text-transform: uppercase; /* Las mayúsculas las pone el CSS, no el editor. */
    color: var(--color-cool-neutral-02); /* Azul oscuro del nodo (#243746). */
}

.ProductSpecifications-eyebrow-dot {
    flex: none; /* No se comprime. */
    width: 7px; /* Lado del nodo. */
    height: 7px;
    background-color: var(--color-cool-neutral-02); /* Acompaña al texto. */
}

.ProductSpecifications-eyebrow-text {
    min-width: 0; /* Deja que el texto envuelva. */
    overflow-wrap: anywhere;
}

.ProductSpecifications-title {
    font-size: 24px; /* Heading/H3 del nodo. */
    font-weight: 600; /* Semibold. */
    line-height: 1.25;
    color: #0f0f12;
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}

/* --- Tarjeta. --- */
.ProductSpecifications-card {
    overflow: hidden; /* Recorta las filas a las esquinas. */
    border: 1px solid rgba(15, 15, 18, 0.1); /* Borde del nodo. */
    border-radius: 12px; /* Esquinas del nodo. */
    background-color: #ffffff;
}

/* Fila: etiqueta a la izquierda y valor a la derecha, alineados por la línea de base (la Referencia
   es un punto más grande). Un valor largo envuelve hacia la izquierda sin pisar la etiqueta. */
.ProductSpecifications-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 22px; /* Relleno del nodo. */
    font-size: 13px; /* Label/L2 del nodo. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3;
}

.ProductSpecifications-label {
    flex: 1 1 auto;
    min-width: 0;
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
    overflow-wrap: anywhere;
}

.ProductSpecifications-value {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 62%; /* Con varios acabados o materiales, el valor envuelve y la etiqueta se ve. */
    color: #0f0f12;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Referencia: Heading/H6 del nodo (bold 14, mayúsculas). */
.ProductSpecifications-value--code {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.35;
    text-transform: uppercase;
}

/* --- Característica: una fila más (título como etiqueta, texto como valor). El texto va con sus
   renglones y, debajo, el "Ver más" alineado a la derecha como el valor. --- */
.ProductSpecifications-value--text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ProductSpecifications-value-text {
    display: block; /* Para poder recortarlo por alto. */
    max-width: 100%;
    line-height: 1.3; /* Fijo en todos los tamaños: el recorte se mide con él. */
    white-space: pre-line; /* Respeta los renglones del editor. */
    overflow-wrap: anywhere;
}

/* Texto largo (el script pone la clase solo si no cabe): se ven tres líneas y la última se
   desvanece; "Ver más" lo despliega con una transición de alto (como la descripción del hero). */
.ProductSpecifications-value-text.is-clamped {
    max-height: calc(1.3em * 3); /* Alto de línea por líneas visibles. */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); /* Desvanecido. */
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    transition: max-height 0.45s ease;
}

    .ProductSpecifications-value-text.is-clamped.is-expanded {
        -webkit-mask-image: none;
        mask-image: none;
    }

/* Botón "Ver más / Ver menos": enlace celeste con chevrón que gira al desplegar. */
.ProductSpecifications-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #429cde; /* Celeste de enlaces del sitio. */
    cursor: pointer;
}

    .ProductSpecifications-toggle[hidden] {
        display: none;
    }

    .ProductSpecifications-toggle:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .ProductSpecifications-toggle:focus-visible {
        outline: 2px solid #429cde;
        outline-offset: 2px;
    }

.ProductSpecifications-toggle-icon {
    flex: none;
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.ProductSpecifications-toggle[aria-expanded="true"] .ProductSpecifications-toggle-icon {
    transform: rotate(180deg); /* Apunta hacia arriba: "Ver menos". */
}

/* --- TABLET: hasta 1024px (nodo 2611:26799). --- */
@media (max-width: 1024px) {
    .ProductSpecifications {
        padding: 34px 20px 26px; /* 32px a los lados con el gutter de la columna, como el nodo. */
    }

    /* Eyebrow chico y espaciado del nodo de tablet. */
    .ProductSpecifications-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
        line-height: 1.3;
    }

    .ProductSpecifications-title {
        font-size: 28px;
        font-weight: 900; /* Black del nodo de tablet. */
        line-height: 1.2;
        letter-spacing: -0.42px;
    }

    .ProductSpecifications-row {
        line-height: normal;
    }

    .ProductSpecifications-label {
        font-weight: 400; /* Regular del nodo de tablet. */
    }

    .ProductSpecifications-value {
        font-weight: 700; /* Bold del nodo de tablet. */
    }

    /* En tablet la Referencia va como los demás valores. */
    .ProductSpecifications-value--code {
        font-size: 13px;
        letter-spacing: 0;
        line-height: normal;
        text-transform: none;
    }
}

/* --- MOBILE: hasta 500px (nodo 2611:26516). Como tablet, con las esquinas de 6px. --- */
@media (max-width: 500px) {
    .ProductSpecifications {
        padding: 28px 8px 20px; /* 20px a los lados con el gutter de la columna, como el nodo. */
    }

    .ProductSpecifications-card {
        border-radius: 6px; /* Esquinas del nodo de mobile. */
    }

    .ProductSpecifications-row {
        gap: 12px; /* Un poco menos entre etiqueta y valor: el valor gana ancho. */
    }
}

@media (prefers-reduced-motion: reduce) {
    .ProductSpecifications-value-text.is-clamped,
    .ProductSpecifications-toggle-icon {
        transition: none;
    }
}