/* Componentes de las guías largas: pasos, plazos, requisitos, Niza, etc. */

/* ── PÁGINAS DE TRÁMITE ── */
.prose {
    max-width: 68ch;
}

.prose p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink-2);
    margin-bottom: 1rem;
}

.prose strong {
    color: var(--ink-strong);
    font-weight: 500;
}

.prose a,
.card a,
.link-sec {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-sec {
    display: inline-block;
    margin-top: 1.2rem;
    font-size: 0.92rem;
}

/* subtítulo dentro de una sección, entre bloques de tarjetas y texto */
.sub-tit {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--ink-strong);
    font-variant-numeric: lining-nums;
    margin: 3rem 0 0.8rem;
}

/* listas que forman parte de la lectura: mismo cuerpo que el texto */
.fondo .lista {
    margin: 0 0 1.2rem 1.1rem;
}

.fondo .lista li {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.6rem;
}

.etapas {
    list-style: none;
    counter-reset: etapa;
    max-width: 72ch;
    margin-top: 1.5rem;
}

.etapas > li {
    counter-increment: etapa;
    position: relative;
    padding: 0 0 2.2rem 3.4rem;
    border-left: 1px solid var(--line);
    margin-left: 1.1rem;
}

.etapas > li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.etapas > li::before {
    content: counter(etapa);
    position: absolute;
    left: -1.1rem;
    top: -0.2rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--accent);
    color: var(--accent-ink);
    /* Cinzel dibuja el 1 como una I romana; Cormorant con cifras de caja alta se lee como número */
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etapas h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink-strong);
    margin-bottom: 0.5rem;
}

.etapas p,
.etapas li li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink-2);
}

.etapas p + p {
    margin-top: 0.6rem;
}

.etapas ul {
    margin: 0.5rem 0 0.6rem 1.2rem;
}

.etapas strong {
    color: var(--ink-strong);
    font-weight: 500;
}

.plazo {
    display: inline-block;
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--accent-ink);
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 0.25rem 0.6rem;
}

.art {
    color: var(--ink-3);
    font-size: 0.95em;
    white-space: nowrap;
}

@media(max-width:700px) {
    .etapas > li {
        padding-left: 2.4rem;
    }
}

.lista {
    margin: 0.7rem 0 0 1.1rem;
}

.lista li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin-bottom: 0.45rem;
}

.lista strong {
    color: var(--ink-strong);
    font-weight: 500;
}

/* deja aire entre "volver al inicio" y el selector de idioma */
@media(min-width:701px) {
    .nav-back {
        margin-right: 6.5rem;
    }
}

.card .opcional {
    margin-top: 0.9rem;
    font-size: 0.875rem;
    color: var(--ink-3);
}

/* ── REGLA DEL TRÁMITE: los tramos miden lo que duran en días hábiles ── */
.regla {
    display: flex;
    margin: 2.4rem 0 1rem;
    padding-top: 1.6rem;
}

.tramo {
    flex: var(--d) 1 0;
    min-width: 0;
    position: relative;
    padding-right: 0.9rem;
}

.tramo.t-sil {
    flex: 0 0 19%;
    padding-right: 0;
}

/* 15 días no alcanzan para el rótulo: el tramo se ensancha lo justo */
.tramo.t-forma {
    min-width: 8.5rem;
}

.tick {
    position: absolute;
    top: -1.6rem;
    left: 0;
    font-size: 0.8rem;
    color: var(--ink-3);
    white-space: nowrap;
}

.barra {
    display: block;
    height: 14px;
    margin-right: -0.9rem;
    border-left: 2px solid var(--bg);
}

.t-sil .barra {
    margin-right: 0;
}

.t-forma .barra {
    background: var(--accent);
}

.t-opos .barra {
    background: var(--accent-ink);
    opacity: 0.55;
}

/* la espera por la oficina es el tramo neutro y más largo */
.t-exam .barra {
    background: var(--surface-3);
}

.t-sil .barra {
    border: 1px dashed var(--accent);
    background: transparent;
}

.t-nom {
    display: block;
    margin-top: 0.8rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink-strong);
    line-height: 1.35;
}

.t-dur {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-3);
}

.regla-nota {
    font-size: 0.875rem;
    color: var(--ink-3);
    max-width: 72ch;
    line-height: 1.6;
}

@media(max-width:700px) {
    .regla {
        flex-direction: column;
        padding-top: 0;
    }

    .tramo,
    .tramo.t-sil {
        display: grid;
        grid-template-columns: 14px 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 1rem;
        padding: 0;
    }

    .tramo.t-sil {
        --d: 30;
    }

    .tramo.t-forma {
        min-width: 0;
    }

    .barra {
        grid-column: 1;
        grid-row: 1 / 4;
        height: auto;
        min-height: calc(var(--d) * 1.1px + 48px);
        margin: 0;
        border-left: 0;
        border-top: 2px solid var(--bg);
    }

    .t-sil .barra {
        border-top: 1px dashed var(--accent);
    }

    .tick {
        position: static;
        grid-column: 2;
        padding-top: 0.2rem;
    }

    .t-nom {
        grid-column: 2;
        margin-top: 0.15rem;
    }

    .t-dur {
        grid-column: 2;
        padding-bottom: 1rem;
    }
}

/* ── LO QUE SE CREE / LO QUE PASA ── */
.mitos {
    max-width: 980px;
    margin-top: 1.4rem;
    border-top: 1px solid var(--accent);
}

.mito {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--line);
}

.mito dt {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--ink-strong);
}

.mito dd {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink-2);
}

.mito dd strong {
    color: var(--ink-strong);
    font-weight: 500;
}

.mito dd a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media(max-width:700px) {
    .mito {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    /* en celular las citas largas ("arts. 95 y 111 del D. Leg. N.° 1075") empujaban la pagina hacia el costado */
    .art {
        white-space: normal;
    }
}

/* ── CASOS REALES DE INDECOPI ── */
.casos {
    list-style: none;
    max-width: 980px;
    margin-top: 1.4rem;
    border-top: 1px solid var(--accent);
}

.caso {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 0.4rem 2rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--line);
}

.signo {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--ink-strong);
    line-height: 1.3;
    overflow-wrap: anywhere;
    font-variant-numeric: lining-nums;
}

.signo small {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-3);
}

/* la imagen del signo, tal como la reproduce el Manual andino; las imágenes
   son pequeñas, así que nunca se amplían más allá de su tamaño original */
.signo-img,
.signo-par figure {
    margin: 0;
}

.signo-img {
    margin-bottom: 0.8rem;
}

.signo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 110px;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--line);
}

.signo-par {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}

.signo-par figure {
    flex: 1 1 0;
    min-width: 0;
}

.signo-par img {
    max-height: 90px;
}

.signo-par figcaption {
    margin-top: 0.35rem;
    font-family: var(--font-text);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink-3);
}

.caso p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink-2);
}

.caso .causal {
    display: block;
    font-size: 0.85rem;
    color: var(--accent-ink);
    margin-bottom: 0.25rem;
}

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

/* ── LISTA DE PROHIBICIONES ── */
.literales {
    list-style: none;
    max-width: 76ch;
    margin-top: 1.2rem;
}

.literales li {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ink-2);
}

.literales .lit {
    font-family: var(--font-brand);
    color: var(--accent-ink);
}

.literales strong {
    color: var(--ink-strong);
    font-weight: 500;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ── CLASES DE NIZA: dos desplegables, bienes y servicios ── */
.niza-grupos {
    max-width: 1040px;
    margin-top: 2.2rem;
    border-bottom: 1px solid var(--accent);
}

.niza-grupo {
    border-top: 1px solid var(--accent);
}

.niza-grupo summary {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1.5rem;
    align-items: center;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
}

.niza-grupo summary::-webkit-details-marker {
    display: none;
}

.niza-tit {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink-strong);
    font-variant-numeric: lining-nums;
    transition: color 0.2s ease;
}

.niza-rango {
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-3);
}

.niza-ej {
    grid-column: 1;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-3);
}

.niza-chev {
    grid-column: 2;
    grid-row: 1 / 3;
    color: var(--accent);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.niza-grupo[open] .niza-chev {
    transform: rotate(180deg);
}

@media(hover:hover) {
    .niza-grupo summary:hover .niza-tit {
        color: var(--accent-ink);
    }
}

.niza {
    list-style: none;
    columns: 2;
    column-gap: 2.6rem;
    margin-bottom: 1.4rem;
    border-top: 1px solid var(--line);
}

.niza li {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    break-inside: avoid;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.niza .nc {
    font-family: var(--font-brand);
    font-weight: 600;
    color: var(--accent-ink);
}

@media(max-width:700px) {
    .niza {
        columns: 1;
    }
}

/* ── TABLA DE VÍAS: en móvil, cada vía es una ficha ── */
@media(max-width:700px) {
    table.vias thead {
        display: none;
    }

    table.vias tbody tr {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid var(--line);
    }

    table.vias tbody td {
        display: block;
        padding: 0.15rem 0;
        border-bottom: 0;
        font-size: 0.9rem;
    }

    table.vias tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-top: 0.6rem;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
        color: var(--accent-ink);
    }
}