/* Cover de ancho completo, hasta arriba de la pantalla DETRÁS del navbar
   transparente (mismo criterio que .cover de /camiones, /proveedores). Tiene
   que ser background-image, no un <img> de contenido real: el padding-top
   genérico que despega el contenido del navbar flotante
   (body:not(.tc-rd-standalone) .tc-whatsapp-fab + *:not(:has(.tc-p-hero-band)),
   navbar-footer.css) solo excluye un elemento si tiene un DESCENDIENTE con
   clase tc-p-hero-band — no si la clase está en el propio elemento, que es
   como está aquí y en /camiones. Con un <img> como contenido ese padding lo
   empuja hacia abajo y deja un hueco blanco arriba (el fondo de <body>)
   antes de la foto; con background-image el padding cae dentro de la propia
   caja y el fondo la sigue cubriendo completa, así que no se nota. */
.warranty-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 2056 / 765;
    max-height: 90vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* Celular: portada vertical propia (garantias_hero_mobile.jpg, 9:16 con el
   título ya en la imagen) en vez de la horizontal recortada. !important
   porque la foto de escritorio viene en el style inline del blade. */
@media (max-width: 767.98px) {
    .warranty-cover {
        background-image: url('/img/page/warrantiesAndReturns/garantias_hero_mobile.jpg?v=20260929') !important;
        /* Menos alta que la imagen (1599): se recorta solo el naranja liso
           de arriba — anclada abajo para que las llantas lleguen siempre
           al final — y el título sigue libre bajo el navbar. */
        aspect-ratio: 900 / 1300;
        max-height: none;
        background-position: center bottom;
    }
}

/* Bootstrap .text-muted no se adapta a [data-theme] (color fijo, pensado
   para fondo claro) — mismo fix que ya usan cart.css/productInformation.css:
   dentro de .tc-p-page, que color siga var(--tc-p-text-dim). */
.tc-p-page .text-muted { color: var(--tc-p-text-dim) !important; }
/* Scrim oscuro arriba (mismo criterio que .tc-p-hero-scrim del home): el
   navbar flotante usa texto/logo blancos sobre vidrio translúcido, y el
   naranja/blanco del banner por sí solo no da contraste suficiente para
   leerlos. Solo oscurece la franja donde vive el navbar, no toda la foto. */
.warranty-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 18%);
    pointer-events: none;
}

/* Tarjetas de garantía (30 días / 5 años): icono + texto en fila, en vez de
   columnas sueltas centradas — más fácil de leer y consistente con el resto
   de tarjetas del sitio (shadow + rounded). */
/* Colores por tema — mismas variables que .tc-p-page (navbar-footer.css):
   var(--tc-p-surface)/var(--tc-p-border)/var(--tc-p-text-dim) cambian solas
   con :root[data-theme]. El texto "principal" (títulos, párrafos) no lleva
   color propio a propósito: hereda el color de .tc-p-page (claro en oscuro,
   oscuro en claro) — ponerle un color fijo aquí es justo lo que lo dejaba
   invisible en modo oscuro (texto oscuro fijo sobre fondo ya oscuro). */
.warranty-badge {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    padding: 24px 28px;
    background: var(--tc-p-surface);
    border: 1.5px solid var(--tc-p-border);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(16, 16, 24, .05);
}
.warranty-badge img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.warranty-badge-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}
.warranty-badge-sub {
    font-size: 13px;
    color: var(--tc-p-text-dim);
    margin-bottom: 0;
}

/* Términos y condiciones: tarjeta con checklist en vez de <ul> plana. */
.warranty-terms {
    background: var(--tc-p-surface);
    border: 1.5px solid var(--tc-p-border);
    border-radius: 20px;
    padding: 32px 36px;
}
.warranty-terms-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.warranty-terms-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tc-p-border);
}
.warranty-terms-list li:last-child { border-bottom: none; }
.warranty-terms-list i {
    color: var(--tc-p-orange, #ff5c00);
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}
.warranty-terms-list p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* Inputs de datos de contacto: label fijo arriba + icono a la izquierda,
   mismo tratamiento que /camiones (page/trucks.css) para que el look de los
   formularios del sitio sea consistente. */
.tc-input-group { margin-bottom: 16px; }
.tc-input-group label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
}
.tc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.tc-input-wrap i {
    position: absolute;
    left: 16px;
    top: 16px;
    font-size: 16px;
    color: var(--tc-p-text-dim);
    pointer-events: none;
    transition: color .15s ease;
}
.tc-input-wrap input,
.tc-input-wrap textarea {
    width: 100%;
    padding: 0 16px 0 46px;
    border-radius: 12px;
    border: 1.5px solid var(--tc-p-border);
    background: var(--tc-p-surface);
    font-size: 14px;
    color: inherit;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tc-input-wrap input { height: 50px; }
.tc-input-wrap textarea {
    padding-top: 14px;
    padding-bottom: 14px;
    resize: vertical;
}
.tc-input-wrap input::placeholder,
.tc-input-wrap textarea::placeholder { color: var(--tc-p-text-dim); }
.tc-input-wrap input:hover,
.tc-input-wrap textarea:hover { border-color: var(--tc-p-orange, #ff5c00); }
.tc-input-wrap input:focus,
.tc-input-wrap textarea:focus {
    outline: none;
    border-color: var(--tc-p-orange, #ff5c00);
    box-shadow: 0 0 0 4px rgba(255, 96, 0, .12);
}
.tc-input-wrap:has(input:focus) i,
.tc-input-wrap:has(textarea:focus) i { color: var(--tc-p-orange, #ff5c00); }

@media (max-width: 767.98px) {
    .warranty-badge { padding: 18px 20px; }
    .warranty-terms { padding: 24px 20px; }
}