/* WarrantyRequestSection.css — Zona del formulario y recuadro "Antes de enviar · Ten esto a la
   mano". Nodos 3944:57336 (PC, 1280), 3944:57483 (tablet, 768) y 3944:57633 (mobile, 375).
   Tipografía base: site.css. El formulario trae su propio estilo (es otro widget).

   SIN DESBORDES: etiqueta (40), título (60) y cada punto (120) bajan de renglón; nada usa nowrap. */

/* --- Sección. --- */
.WarrantyRequestSection {
    width: 100%; /* Ocupa el ancho de la ventana. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: #0f0f12; /* Casi negro del diseño. */
}

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

    .WarrantyRequestSection :where(h3, p, ul) {
        margin: 0; /* El espaciado lo pone el contenedor. */
    }

    .WarrantyRequestSection :where(ul) {
        padding: 0; /* Sin sangría de lista. */
        list-style: none; /* Sin viñetas. */
    }

/* PC: formulario (lo que sobra) y recuadro (340 px). */
.WarrantyRequestSection-inner {
    display: grid; /* Dos columnas. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px); /* Formulario y recuadro del nodo; el recuadro cede si el espacio no alcanza. */
    align-items: start; /* Cada uno con su alto. */
    gap: clamp(16px, 4vw, 48px); /* Separación del nodo, menor si el espacio no alcanza. */
    width: 100%; /* Ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    padding: 56px clamp(16px, 3.75vw, 48px) 64px; /* Relleno del nodo (48 en 1280). */
}

    /* Sin formulario (fuera del editor), el recuadro no queda a la derecha de un hueco. */
    .WarrantyRequestSection-inner:not(:has(.WarrantyRequestSection-form)) {
        grid-template-columns: minmax(0, 340px); /* Solo el recuadro. */
    }

.WarrantyRequestSection-form {
    min-width: 0; /* No ensancha la columna. */
}

/* --- Recuadro "Antes de enviar". --- */
.WarrantyRequestSection-checklist {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* Ídem. */
    gap: 14px; /* Separación del nodo. */
    min-width: 0; /* No desborda. */
    padding: 26px 26px 28px; /* Relleno del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #f8f7f5; /* Fondo del nodo. */
}

.WarrantyRequestSection-label {
    font-size: 10.5px; /* Tamaño del nodo. */
    letter-spacing: 0.12em; /* 1,26px del nodo. */
    text-transform: uppercase; /* "ANTES DE ENVIAR". */
    color: #429cde; /* Celeste del nodo. */
    overflow-wrap: anywhere; /* No desborda. */
}

.WarrantyRequestSection-title {
    font-size: 22px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.2; /* Interlineado. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: anywhere; /* No desborda. */
}

.WarrantyRequestSection-list {
    display: flex; /* Puntos apilados. */
    flex-direction: column; /* Ídem. */
    gap: 14px; /* Separación del nodo. */
}

    .WarrantyRequestSection-list li {
        position: relative; /* Origen del cuadrito. */
        padding-left: 15px; /* 5 del cuadrito + 10 de separación del nodo. */
        font-size: 13px; /* Tamaño del nodo. */
        line-height: 1.25; /* Interlineado. */
        color: rgba(15, 15, 18, 0.65); /* Gris del nodo. */
        overflow-wrap: anywhere; /* No desborda. */
    }

        /* Cuadrito celeste de 5 px del nodo. */
        .WarrantyRequestSection-list li::before {
            content: ""; /* Viñeta. */
            position: absolute; /* A la izquierda. */
            top: 0.5em; /* Centrado con el primer renglón. */
            left: 0; /* Ídem. */
            width: 5px; /* Tamaño del nodo. */
            height: 5px; /* Ídem. */
            background-color: #429cde; /* Celeste. */
            transform: translateY(-50%); /* Centrado. */
        }

/* --- Tablet: hasta 1024px (nodo 3944:57483). El recuadro debajo, a todo el ancho. --- */
@media (max-width: 1024px) {

    .WarrantyRequestSection-inner,
    .WarrantyRequestSection-inner:not(:has(.WarrantyRequestSection-form)) {
        grid-template-columns: minmax(0, 1fr); /* Una columna. */
        gap: 32px; /* Separación del nodo. */
        padding: 56px 48px; /* Relleno del nodo. */
    }
}

/* --- Mobile: hasta 767px (nodo 3944:57633). --- */
@media (max-width: 767px) {

    .WarrantyRequestSection-inner,
    .WarrantyRequestSection-inner:not(:has(.WarrantyRequestSection-form)) {
        padding: 56px 16px; /* Relleno del nodo. */
    }
}