/* AutoCustom GT — hoja compartida de las 8 páginas legales (paso 7)
   ---------------------------------------------------------------------------
   ORDEN DE CARGA (en cada legal):
       1) /assets/home-autocustomgt.css?v=20261004diseno    -> sistema base
       2) /assets/legales-autocustomgt.css?v=20261005diseno4 -> esta hoja
   De home-autocustomgt.css sale TODO lo que esta hoja da por supuesto:
     · los tokens de :root (--red, --red2, --ink, --ink2, --muted, --line,
       --soft, --white, --max, --radius, --wa, --shadow)
     · la familia tipografica Inter,Arial,Helvetica,sans-serif y el color
       de texto del body (#101828) sobre fondo blanco
     · * { box-sizing } y a { text-decoration:none; color:inherit }
   Aqui NO se redeclara ningun token de la base ni aparece ningun hex suelto:
   el unico :root propio es --legal-col (seccion 1), la medida de lectura.
   (home.css define ademas .hero, .hero h1 y .brand con estilos de portada
   oscura; se sobreescriben aqui abajo porque envios.html usa esas mismas
   clases. La carga posterior de esta hoja gana por orden a igual
   especificidad.)

   REGLA DE COLOR APLICADA:
     · relleno, borde y acento grande  -> var(--red)
     · texto rojo pequeno (enlaces,
       kickers, insignias de precio)   -> var(--red2)
   Ningun verde suelto: #7ee787 (politica-cookies) y #58d68d (envios) no
   existian en ningun otro fichero del sitio y quedaban ilegibles sobre
   blanco (contraste 1.6:1), asi que su papel lo cumplen --red2/--muted.
   El unico verde con dueno es --wa y sigue reservado a WhatsApp.
   ========================================================================== */

/* --- 1. Medida: columna de lectura, un unico token y un unico edit --- */
/* 960 px es la columna de la pagina de prosa (.about-wrap), a proposito mas
   estrecha que --max (1240 px) de la cabecera; la canaleta sigue el 36 px
   de .wrap de la base y baja a 24 px a 760 px como en home.css.
   .wrap (solo envios.html, sin cabecera), <main> (las demas) y la caja de
   plazos consumen el mismo token: cambiar el ancho de lectura es editar
   estas dos lineas del :root, no seis selectores. */
:root {
    --legal-col: min(960px, calc(100% - 36px));
}

/* .wrap lleva el mismo ritmo vertical que <main> para que las dos
   estructuras midan igual desde el borde superior. */
.wrap {
    width: var(--legal-col);
    margin: auto;
    padding: 28px 0 48px;
}

main {
    width: var(--legal-col);
    margin: 0 auto;
    padding: 28px 0 48px;
}

/* --- 2. Tipografia: misma escala que la pagina de contenido unificada --- */
body {
    line-height: 1.8;
}

p {
    margin: 0 0 18px;
    overflow-wrap: anywhere;
}

li {
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

ul {
    padding-left: 22px;
    margin: 0 0 18px;
}

td,
th {
    overflow-wrap: anywhere;
}

h1 {
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.15;
    margin: 0 0 12px;
}

h2 {
    font-size: clamp(22px, 3vw, 27px);
    line-height: 1.3;
    margin: 32px 0 14px;
    border-left: 4px solid var(--red);
    padding-left: 12px;
}

h3 {
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.35;
    margin: 26px 0 8px;
}

/* --- 3. Enlaces de texto --- */
a {
    color: var(--red2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- 4. Cabecera: mismo fondo y misma metrica que .site-header --- */
header {
    background: var(--ink);
    color: var(--white);
}

.header-inner {
    width: min(var(--max), calc(100% - 36px));
    min-height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -1.4px;
    white-space: nowrap;
    color: var(--white);
    text-decoration: none;
}

.home-link {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--white);
    text-decoration: none;
    border: 1px solid var(--muted);
    border-radius: var(--radius);
    padding: 9px 15px;
}

.home-link:hover {
    border-color: var(--red);
    color: var(--red);
}

/* --- 5. Bloques de contenido --- */
.updated {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 18px;
}

.box,
.notice,
.important {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 24px 0;
}

.box {
    padding: 22px;
}

.box h3 {
    margin-top: 0;
}

.notice {
    padding: 16px 18px;
}

.important {
    border-left: 4px solid var(--red);
    padding: 18px 20px;
}

.guarantee-highlight {
    background: var(--soft);
    border: 2px solid var(--red);
    border-radius: var(--radius);
    padding: 28px;
    margin: 30px 0;
    text-align: center;
}

.guarantee-highlight .number {
    display: block;
    color: var(--ink);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    margin: 10px 0;
}

.guarantee-highlight strong {
    color: var(--red2);
    font-size: 20px;
}

/* --- 6. Tablas: mismo patron que .product-card (1 px --line, radio --radius) --- */
.cookie-table,
.table {
    width: 100%;
    border-collapse: collapse;
}

.cookie-table {
    margin-top: 22px;
}

/* Suelo de la columna de etiquetas. Sin el, el auto-layout la exprime hasta
   ~un caracter: overflow-wrap:anywhere baja su min-content y la deja en
   57 px de ancho (30 px utiles) a 390 px, partiendo cada etiqueta en 3-4
   trozos (Cat/ego/ría). 124 px = palabra mas larga (Preferencias, 90 px a
   16 px) + padding 13+13 + bordes 2 + 6 px de holgura de fuente. Sigue sin
   desbordar: min-content 207 px dentro de los 351 px de columna a 390 px. */
.cookie-table th:first-child,
.cookie-table td:first-child {
    min-width: 124px;
}

.table {
    min-width: 760px;
}

.cookie-table th,
.cookie-table td,
.table th,
.table td {
    border: 1px solid var(--line);
    padding: 13px;
    text-align: left;
    vertical-align: top;
}

.cookie-table th,
.table th {
    background: var(--soft);
    font-weight: 800;
}

.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin: 18px 0;
    overflow: auto;
}

.card h2 {
    margin: 0 0 14px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* --- 7. Insignias y estados: sin verde suelto --- */
.muted {
    color: var(--muted);
}

.free,
.required {
    color: var(--red2);
    font-weight: 800;
}

.optional {
    color: var(--muted);
    font-weight: 800;
}

/* --- 8. Estructura propia de envios.html y devoluciones.html --- */
.brand {
    font-weight: 900;
    letter-spacing: -1.4px;
    font-size: 25px;
    white-space: nowrap;
    color: var(--ink);
}

.brand b {
    color: var(--red);
}

.back {
    display: inline-block;
    color: var(--red2);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

/* envios.html: el enlace va en la misma linea que la marca, a la derecha */
div > .back {
    float: right;
    margin-top: 5px;
}

/* devoluciones.html: el enlace es el primer elemento del texto */
main > .back {
    margin-bottom: 20px;
}

.hero {
    position: static;
    min-height: 0;
    padding: 0;
    margin: 0 0 4px;
    background: none;
    color: inherit;
    overflow: visible;
}

.hero h1 {
    max-width: none;
    letter-spacing: normal;
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.15;
    margin: 0 0 14px;
}

.hero p {
    max-width: 640px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 6px;
}

.tag {
    display: inline-block;
    background: none;
    padding: 0;
    margin: 0 0 10px;
    color: var(--red2);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.cta {
    display: inline-block;
    background: var(--red);
    color: var(--white);
    text-decoration: none;
    padding: 12px 17px;
    border-radius: var(--radius);
    font-weight: 900;
    font-size: 13px;
}

.cta:hover {
    background: var(--red2);
}

/* el unico style= inline que quedaba en las legales, ahora en tokens */
#autocustom-plazos-envio {
    width: var(--legal-col);
    margin: 32px auto;
    padding: 24px;
    box-sizing: border-box;
    background: var(--soft);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    line-height: 1.8;
}

#autocustom-plazos-envio h2 {
    margin-top: 0;
}

/* --- 9. Pie: mismo fondo que .site-footer --- */
footer {
    background: var(--ink);
    color: var(--line);
    padding: 48px 18px 20px;
    text-align: center;
}

footer a {
    display: inline-block;
    margin: 0 10px 8px;
    font-size: 13px;
    color: var(--line);
    text-decoration: none;
}

footer a:hover {
    color: var(--white);
    text-decoration: underline;
}

footer p {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--line);
}

/* --- 10. Movil: misma canaleta (24 px) y misma metrica de cabecera
          que home-autocustomgt.css a 760 px --- */
@media (max-width: 760px) {
    :root {
        --legal-col: min(960px, calc(100% - 24px));
    }

    .header-inner {
        width: min(var(--max), calc(100% - 24px));
        min-height: 0;
        padding: 15px 0;
        gap: 14px;
        flex-wrap: wrap;
    }

    .logo,
    .brand {
        font-size: 21px;
    }

    #autocustom-plazos-envio {
        padding: 20px;
    }
}

@media (max-width: 720px) {
    .grid {
        grid-template-columns: 1fr;
    }

    div > .back {
        float: none;
        display: block;
        margin: 8px 0;
    }
}

@media (max-width: 700px) {
    .cookie-table {
        font-size: 14px;
    }

    .guarantee-highlight .number {
        font-size: 36px;
    }
}