/* Guía de mudanza (27-sep-2026). Usa los tokens de .sv2 (assets/css/sv2.css). Va en un .css aparte: con mucho CSS
   dentro de la página, el Twig del sitio falla («Unexpected character»). */
.gm3 {
    --gm3-kraft: #d9b98b;
    --gm3-kraft-osc: #9c7440;
    --gm3-cinta: #5b72d9;
    --gm3-rojo: #c23b3b;
    --gm3-ambar: #c77a0a;
    --gm3-verde: #2b8a3e;
}
.gm3 section[id] { scroll-margin-top: 96px; }
.gm3 h2 { text-wrap: balance; }
.gm3 .sv2-sub { text-wrap: pretty; }

/* Índice */
.gm3-indice { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .75rem; scrollbar-width: thin; }
.gm3-indice a { flex: 0 0 auto; padding: .45rem .95rem; border-radius: 999px; background: #fff; border: 1px solid var(--sv2-borde);
    color: var(--sv2-indigo); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.gm3-indice a:hover, .gm3-indice a:focus-visible { background: var(--sv2-lavanda); }

/* Arriba: la fecha */
.gm3-fecha { margin-top: 1.4rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px;
    padding: 1rem 1.1rem; max-width: 33rem; }
.gm3-fecha label { display: block; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.gm3-fecha-fila { display: flex; gap: .6rem; flex-wrap: wrap; }
.gm3-fecha input[type=date] { flex: 1 1 11rem; min-height: 54px; border-radius: 14px; border: 0; padding: .6rem .9rem; font: inherit;
    font-weight: 700; color: var(--sv2-indigo); background: #fff; }
.gm3-fecha input[type=date]:focus-visible { outline: 3px solid var(--sv2-lila); outline-offset: 2px; }
.gm3-fecha .sv2-btn { flex: 0 0 auto; }
.gm3-fecha-ayuda { margin: .6rem 0 0; color: #cfcdf5; font-size: 14px; }
.gm3-faltan { margin: .6rem 0 0; color: #fff; font-weight: 800; font-size: 1.05rem; }
.gm3-faltan:empty { display: none; }
.gm3-hero-kike { display: block; width: min(250px, 62%); height: auto; margin: 0 auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }

/* Calendario */
.gm3-progreso { display: flex; align-items: center; gap: .9rem 1.2rem; flex-wrap: wrap; margin: 1.1rem 0 1.5rem; }
.gm3-barra { flex: 1 1 14rem; height: 12px; border-radius: 999px; background: var(--sv2-lavanda); overflow: hidden; }
.gm3-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sv2-violeta), var(--sv2-indigo));
    transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.gm3-contador { font-weight: 800; color: var(--sv2-indigo); font-variant-numeric: tabular-nums; }
.gm3-boton-chico { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border-radius: 12px; border: 2px solid var(--sv2-indigo);
    background: #fff; color: var(--sv2-indigo); font-weight: 800; font-size: 15px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.gm3-boton-chico:hover { background: var(--sv2-indigo); color: #fff; }
.gm3-boton-chico:focus-visible { outline: 3px solid var(--sv2-lila); outline-offset: 2px; }
.gm3-etapas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.gm3-etapa { position: relative; background: #fff; border: 1px solid var(--sv2-borde); border-radius: 20px; padding: 1.25rem 1.25rem 1.1rem; }
.gm3-etapa.es-hoy { border-color: var(--sv2-violeta); box-shadow: 0 0 0 3px rgba(79, 66, 225, .16); }
.gm3-etapa h3 { font-size: 1.12rem; font-weight: 800; color: var(--sv2-indigo); margin: 0 0 .15rem; padding-right: 5.5rem; }
.gm3-cuando { margin: 0 0 .8rem; color: var(--sv2-gris); font-size: 14px; min-height: 1.3em; }
.gm3-sello { position: absolute; top: 1.05rem; right: 1rem; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--sv2-violeta); border-radius: 999px; padding: .22rem .6rem; }
.gm3-sello[hidden] { display: none; }

/* Casillas */
.gm3-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.gm3-lista li { display: flex; gap: .6rem; align-items: flex-start; }
.gm3-lista input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: .12rem 0 0;
    border: 2px solid var(--sv2-indigo); border-radius: 7px; background: #fff; cursor: pointer; display: grid; place-content: center;
    transition: background-color .15s ease, border-color .15s ease; }
.gm3-lista input[type=checkbox]::after { content: ""; width: 11px; height: 6px; border: 3px solid #fff; border-top: 0; border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .15s ease; }
.gm3-lista input[type=checkbox]:checked { background: var(--sv2-violeta); border-color: var(--sv2-violeta); }
.gm3-lista input[type=checkbox]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.gm3-lista input[type=checkbox]:focus-visible { outline: 3px solid var(--sv2-lila); outline-offset: 2px; }
.gm3-lista label { cursor: pointer; color: var(--sv2-tinta); line-height: 1.45; }
.gm3-lista input:checked + label { color: var(--sv2-gris); text-decoration: line-through; text-decoration-color: var(--sv2-lila); }
.gm3-lista a { color: var(--sv2-violeta); font-weight: 700; }
.gm3-vineta { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--sv2-violeta); margin-top: .5rem; }
.gm3-lista-2col { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 1.5rem; }

/* Cajas: la calculadora */
.gm3-calc { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.gm3-calc > input { position: absolute; opacity: 0; pointer-events: none; }
.gm3-calc > label { padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 12px; border: 2px solid var(--sv2-borde);
    background: #fff; font-weight: 700; color: var(--sv2-indigo); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.gm3-calc > input:checked + label { background: var(--sv2-indigo); border-color: var(--sv2-indigo); color: #fff; }
.gm3-calc > input:focus-visible + label { outline: 3px solid var(--sv2-lila); outline-offset: 2px; }
.gm3-resultados { flex: 1 1 100%; margin-top: .6rem; }
.gm3-resultado { display: none; background: #fff; border: 1px solid var(--sv2-borde); border-radius: 20px; padding: 1.25rem 1.4rem; }
#gm3-c1:checked ~ .gm3-resultados .r1, #gm3-c2:checked ~ .gm3-resultados .r2,
#gm3-c3:checked ~ .gm3-resultados .r3, #gm3-c4:checked ~ .gm3-resultados .r4 { display: grid; }
.gm3-resultado { grid-template-columns: auto 1fr; gap: .4rem 1.5rem; align-items: center; }
.gm3-numero { font-size: clamp(2.2rem, 5vw, 3.1rem); font-weight: 900; line-height: 1; color: var(--sv2-indigo); letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; grid-row: span 2; }
.gm3-numero small { display: block; font-size: 1rem; font-weight: 800; letter-spacing: 0; color: var(--sv2-violeta); }
.gm3-resultado p { margin: 0; color: var(--sv2-tinta); }
.gm3-resultado a { color: var(--sv2-violeta); font-weight: 800; }
.gm3-reglas { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; }
.gm3-reglas li { background: #fff; border: 1px solid var(--sv2-borde); border-radius: 16px; padding: .9rem 1rem; color: var(--sv2-tinta); }
.gm3-reglas strong { display: block; color: var(--sv2-indigo); }

/* Cómo embalar */
.gm3-tarjetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gm3-tarjeta { background: #fff; border: 1px solid var(--sv2-borde); border-radius: 18px; padding: 1.1rem 1.15rem; }
.gm3-tarjeta h3 { font-size: 1.05rem; font-weight: 800; color: var(--sv2-indigo); margin: 0 0 .35rem; }
.gm3-tarjeta p { margin: 0; color: var(--sv2-gris); line-height: 1.5; }

/* Rótulos */
.gm3-etiquetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gm3-etiqueta { background: #fff; border: 2px dashed #b9b6d8; border-radius: 14px; overflow: hidden; font-weight: 700; color: var(--sv2-tinta);
    transform: rotate(-1.2deg); box-shadow: 0 12px 24px -18px rgba(30, 22, 136, .6); }
.gm3-etiqueta + .gm3-etiqueta { transform: rotate(1deg); }
.gm3-etiqueta .gm3-destino { display: block; padding: .45rem .9rem; color: #fff; font-weight: 900; font-size: 1.4rem; letter-spacing: .12em; }
.gm3-etiqueta.es-casa .gm3-destino { background: var(--sv2-indigo); }
.gm3-etiqueta.es-baulera .gm3-destino { background: var(--sv2-violeta); }
.gm3-etiqueta dl { margin: 0; padding: .7rem .9rem .9rem; display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; }
.gm3-etiqueta dt { color: var(--sv2-gris); font-weight: 600; font-size: 14px; }
.gm3-etiqueta dd { margin: 0; }
.gm3-etiqueta .gm3-fragil { grid-column: 1 / -1; color: var(--gm3-rojo); font-weight: 900; letter-spacing: .06em; font-size: 14px; }

/* Caja Cero: una caja de cartón con cinta */
.gm3-caja-cero { position: relative; background: var(--gm3-kraft); border-radius: 18px; padding: 2.4rem 1.4rem 1.4rem; color: #3b2a12;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 18px 34px -24px rgba(60, 40, 10, .7); }
.gm3-caja-cero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--gm3-cinta); opacity: .9;
    border-radius: 18px 18px 0 0; }
.gm3-caja-cero .gm3-rotulo { position: absolute; top: 10px; right: 18px; background: #fff; color: var(--sv2-indigo); font-weight: 900; font-size: 13px;
    letter-spacing: .1em; padding: .35rem .7rem; border-radius: 6px; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5); transform: rotate(2deg); }
.gm3-caja-cero .gm3-lista label { color: #3b2a12; }
.gm3-caja-cero .gm3-lista input[type=checkbox] { border-color: #6e4e22; background: #f3e5cf; }
.gm3-caja-cero .gm3-lista input[type=checkbox]:checked { background: var(--sv2-indigo); border-color: var(--sv2-indigo); }
.gm3-caja-cero .gm3-lista input:checked + label { color: #7a6243; }

/* Cómo cargar la baulera */
.gm3-anatomia { position: relative; margin: 0; }
.gm3-anatomia img { display: block; width: 100%; height: auto; }
.gm3-punto { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff;
    background: var(--sv2-violeta); color: #fff; font-weight: 900; font-size: 15px; line-height: 1; display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(18, 12, 90, .8); transition: transform .2s ease, background-color .2s ease; }
.gm3-punto::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(79, 66, 225, .45); animation: gm3-pulso 2.4s ease-out infinite; }
.gm3-punto:hover, .gm3-punto:focus-visible, .gm3-punto.activo { background: var(--sv2-indigo); transform: translate(-50%, -50%) scale(1.12); outline: none; }
@keyframes gm3-pulso { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.5); } }
.gm3-leyenda { list-style: none; counter-reset: gm3; margin: 0; padding: 0; display: grid; gap: .55rem; }
.gm3-leyenda li { counter-increment: gm3; display: grid; grid-template-columns: 30px 1fr; gap: .7rem; align-items: start; padding: .45rem .6rem;
    border-radius: 12px; transition: background-color .2s ease, box-shadow .2s ease; }
.gm3-leyenda li::before { content: counter(gm3); width: 28px; height: 28px; border-radius: 50%; background: var(--sv2-violeta); color: #fff;
    font-weight: 900; font-size: 14px; display: grid; place-items: center; transition: background-color .2s ease; }
/* La sección es lavanda: el renglón marcado pasa a blanco con borde, si no, no se ve. */
.gm3-leyenda li.activo { background: #fff; box-shadow: inset 0 0 0 2px var(--sv2-violeta); }
.gm3-leyenda li.activo::before { background: var(--sv2-indigo); }
.gm3-leyenda strong { color: var(--sv2-indigo); }

/* Tamaños */
.gm3-escala { margin: 0; padding: 0; list-style: none; border: 1px solid var(--sv2-borde); border-radius: 18px; overflow: hidden; background: #fff; }
.gm3-escala li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid var(--sv2-borde); }
.gm3-escala li:first-child { border-top: 0; }
.gm3-escala strong { color: var(--sv2-indigo); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Qué se guarda y qué no */
.gm3-semaforo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gm3-luz { background: #fff; border: 1px solid var(--sv2-borde); border-top: 6px solid; border-radius: 18px; padding: 1.1rem 1.2rem; }
.gm3-luz h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.gm3-luz h3::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.gm3-luz ul { margin: 0; padding-left: 1.1rem; color: var(--sv2-tinta); display: grid; gap: .35rem; }
.gm3-luz.rojo { border-top-color: var(--gm3-rojo); } .gm3-luz.rojo h3 { color: var(--gm3-rojo); }
.gm3-luz.ambar { border-top-color: var(--gm3-ambar); } .gm3-luz.ambar h3 { color: var(--gm3-ambar); }
.gm3-luz.verde { border-top-color: var(--gm3-verde); } .gm3-luz.verde h3 { color: var(--gm3-verde); }
.gm3-seguro { margin: 1rem 0 0; background: #fff; border: 1px solid var(--sv2-borde); border-radius: 14px; padding: .9rem 1.1rem; color: var(--sv2-tinta); }

/* Trámites */
.gm3-tramites { display: grid; gap: .8rem; }
.gm3-tramite { background: #fff; border: 1px solid var(--sv2-borde); border-radius: 16px; padding: 1rem 1.15rem; }
.gm3-tramite h3 { font-size: 1.05rem; font-weight: 800; color: var(--sv2-indigo); margin: 0 0 .3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.gm3-plazo { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--gm3-rojo); border-radius: 999px; padding: .2rem .6rem; }
.gm3-tramite p { margin: 0 0 .35rem; color: var(--sv2-tinta); line-height: 1.5; }
.gm3-tramite p:last-child { margin: 0; }
.gm3-tramite a { color: var(--sv2-violeta); font-weight: 700; }
.gm3-fuente { color: var(--sv2-gris); font-size: 14px; margin: .8rem 0 0; }

/* El día que venís */
/* 27-sep-2026: flex en vez de grilla; si una tarjeta queda sola en su fila, ocupa el ancho entero. */
.gm3-dia { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.gm3-dia > .gm3-dia-card { flex: 1 1 280px; }
.gm3-dia-card { background: #fff; border: 1px solid var(--sv2-borde); border-radius: 20px; padding: 1.2rem 1.3rem; display: flex; gap: 1rem; align-items: center; }
.gm3-dia-card img { flex: 0 0 auto; width: 92px; height: auto; }
.gm3-dia-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--sv2-indigo); margin: 0 0 .3rem; }
.gm3-dia-card p { margin: 0; color: var(--sv2-tinta); line-height: 1.5; }
.gm3-dia-card a { color: var(--sv2-violeta); font-weight: 700; }

/* Kike en los encabezados de sección */
.gm3-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.gm3-cabeza img { flex: 0 0 auto; width: clamp(84px, 12vw, 130px); height: auto; }
@media (max-width: 575px) { .gm3-cabeza img { width: 76px; } }

@media (prefers-reduced-motion: reduce) {
    .gm3-punto::before { animation: none; }
    .gm3-barra span, .gm3-punto, .gm3-lista input[type=checkbox]::after { transition: none; }
}

/* Hojas para imprimir: se arman con guia.js y se imprimen solas */
.gm3-hoja { display: none; }
@media print {
    body.gm3-imp > *:not(.gm3-hoja) { display: none !important; }
    body.gm3-imp .gm3-hoja { display: block !important; color: #000; font-family: Arial, Helvetica, sans-serif; }
    body:not(.gm3-imp) .gm3-indice, body:not(.gm3-imp) .gm3-fecha, body:not(.gm3-imp) .gm3-boton-chico, body:not(.gm3-imp) .sv2-cierre,
    body:not(.gm3-imp) .gm3-punto { display: none !important; }
    .gm3-hoja { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .gm3-hoja h1 { font-size: 20pt; margin: 0 0 4pt; }
    .gm3-hoja h2 { font-size: 13pt; margin: 12pt 0 4pt; border-bottom: 1pt solid #999; padding-bottom: 2pt; }
    .gm3-hoja p { margin: 0 0 6pt; font-size: 10pt; }
    .gm3-hoja ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18pt; }
    .gm3-hoja li { font-size: 10pt; margin: 0 0 3pt; break-inside: avoid; }
    .gm3-hoja .pie { margin-top: 14pt; font-size: 9pt; color: #555; }
    body.gm3-imp .gm3-hoja.gm3-hoja-etiquetas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10pt; }
    .gm3-hoja-etiquetas .et { border: 1.5pt dashed #777; border-radius: 8pt; overflow: hidden; break-inside: avoid; height: 78mm; display: flex; flex-direction: column; }
    .gm3-hoja-etiquetas .et b { display: block; color: #fff; font-size: 26pt; letter-spacing: 4pt; padding: 6pt 10pt; }
    .gm3-hoja-etiquetas .et.casa b { background: #1e1688; }
    .gm3-hoja-etiquetas .et.baulera b { background: #4f42e1; }
    .gm3-hoja-etiquetas .et span { display: block; font-size: 12pt; padding: 7pt 10pt 0; }
    .gm3-hoja-etiquetas .et i { font-style: normal; font-size: 9pt; color: #555; padding: auto 10pt 6pt; margin-top: auto; display: block; padding: 0 10pt 6pt; }
    @page { margin: 14mm; }
}
