/**
 * MySimTravel - Home v3: "a página é o objeto"
 *
 * O cartão do chip do mysimtravel vira o configurador (abas fixas de destino) e as outras
 * seções são o mesmo material impresso: barras, fileira de momentos, folhas serrilhadas, carta
 * com destacável, cartão-resposta e cupom picotado. Cores e fontes da marca (main.css).
 * Um raio (16px), botões em pílula, sem sombras em repouso, sem gradientes, sem filetes.
 *
 * Markup: template-parts/home/v3.php. JS: assets/js/home-v3.js.
 *
 * @package MySimTravel
 */

.v3 {
    --v3-orange: #FF5000;
    --v3-orange-hover: #FF7A3D;
    --v3-orange-field: #FFE0D1;
    --v3-ink: #1A1A1C;
    --v3-ink-2: #4A4A4D;
    --v3-paper: #FFFFFF;
    --v3-soft: #F4F4F6;
    --v3-soft-2: #E8E8EB;
    --v3-peach: #FFF1EB;
    --v3-mark: #FFC9AE;
    --v3-card: #1A1A1C;
    --v3-card-2: #2D2D2F;
    --v3-card-3: #3D3D3F;
    --v3-card-4: #4D4D4F;
    --v3-on-dark-2: #C9C9CD;
    --v3-off: #8E8E91;
    --v3-radius: 16px;
    --v3-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Cinco tamanhos: título, seção, destaque, texto e nota */
    --v3-display: clamp(2.125rem, 6vw, 5.5rem);
    --v3-head: clamp(1.75rem, 3vw, 2.75rem);
    --v3-lead: clamp(1.125rem, 1.4vw, 1.375rem);
    --v3-body: 1.0625rem;
    --v3-small: 0.9375rem;

    color: var(--v3-ink);
    font-size: var(--v3-body);
}

.v3 section { scroll-margin-top: 72px; }

.v3-sr {
    position: absolute !important;
    width: 1px;
    height: 1px; /* taste-skill-ignore: texto só para leitor de tela, não é um filete */
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.v3-h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--v3-head);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: inherit;
    text-wrap: balance;
}

.v3-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    transition: text-decoration-color 0.2s;
}
.v3-link:hover { text-decoration-color: var(--v3-orange); }
.v3-link:focus-visible,
.v3 a:focus-visible { outline: 3px solid var(--v3-orange); outline-offset: 3px; border-radius: 4px; }
.v3-link--light { color: #fff; }

/* ══ O CARTÃO DO CHIP ════════════════════════════════════════ */
.v3-hero {
    padding-top: clamp(1.25rem, 3vw, 2.5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    overflow: hidden;
    background: var(--v3-orange);
}

.v3-hero__title {
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: var(--v3-display);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-align: center;
    color: var(--v3-ink);
    text-wrap: balance;
}

.v3-hero__lead {
    max-width: 46ch;
    margin: 1rem auto 0;
    font-size: var(--v3-lead);
    line-height: 1.45;
    text-align: center;
    color: var(--v3-ink);
    text-wrap: balance;
}

.v3-stack { margin-top: clamp(1.5rem, 2.5vw, 2rem); }

/* Abas dos destinos: fileira fixa (nada muda de lugar ao clicar). As outras ficam claras, com o
   preço inicial; a escolhida fica escura, mais alta, e encosta no cartão. */
.v3-tabs { display: none; }
.v3-js .v3-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
}
.v3-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-height: 72px;
    margin: 0;
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: var(--v3-radius) var(--v3-radius) 0 0;
    background: var(--v3-paper);
    color: var(--v3-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s var(--v3-ease);
}
.v3-tab__name { font-family: var(--font-display); font-size: var(--v3-lead); font-weight: 800; line-height: 1.15; }
.v3-tab__from { font-size: var(--v3-small); line-height: 1.3; color: var(--v3-ink-2); font-variant-numeric: tabular-nums; }
.v3-tab:not([aria-selected="true"]):hover { background: var(--v3-peach); transform: translateY(-3px); }
.v3-tab[aria-selected="true"] { min-height: 84px; background: var(--v3-card); color: #fff; cursor: default; }
.v3-tab[aria-selected="true"] .v3-tab__from { color: var(--v3-on-dark-2); }
.v3-tab:focus-visible { outline: 3px solid var(--v3-ink); outline-offset: -6px; }
.v3-tab[aria-selected="true"]:focus-visible { outline-color: var(--v3-orange); }

.v3-folder {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "body photo";
    overflow: hidden;
    border-radius: var(--v3-radius);
    background: var(--v3-card);
    color: #fff;
}
.v3-folder + .v3-folder { margin-top: 1.5rem; }
.v3-js .v3-folder { border-radius: 0 0 var(--v3-radius) var(--v3-radius); }
.v3-js .v3-folder + .v3-folder { margin-top: 0; }
.v3-js .v3-folder:not(.is-front) { display: none; }

.v3-folder__photo {
    grid-area: photo;
    position: relative;
    min-height: 100%;
    margin: 0 -1px 0 0; /* cobre o arredondamento de subpixel na borda direita do cartão */
    overflow: hidden;
    background: var(--v3-orange);
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
.v3-folder__photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 4.5rem);
    object-fit: cover;
}
.v3-folder__name {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 4.5rem;
    margin: 0;
    padding: 0 2rem;
    background: var(--v3-orange);
    font-family: var(--font-display);
    font-size: var(--v3-head);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.v3-folder__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 3vw, 2.75rem);
}
.v3-folder__top { display: flex; align-items: center; gap: 1.25rem; }
.v3-chip { flex: none; line-height: 0; }
.v3-chip svg { width: 56px; height: 44px; }
.v3-folder__coverage { margin: 0.5rem 0 0; font-size: var(--v3-body); line-height: 1.4; color: var(--v3-on-dark-2); }

.v3-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin: 0;
}
.v3-price__value {
    font-family: var(--font-display);
    font-size: var(--v3-head);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.v3-price__plan { font-size: var(--v3-small); color: var(--v3-on-dark-2); text-wrap: balance; }
.v3-price.is-unavailable .v3-price__value { color: var(--v3-off); text-decoration: line-through; }

.v3-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.v3-field {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.v3-field__label { font-size: var(--v3-small); line-height: 1.3; color: var(--v3-on-dark-2); }

.v3-seg {
    display: flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--v3-card-2);
}
.v3-seg__opt { position: relative; flex: 1 1 0; min-width: 0; }
.v3-seg__opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.v3-seg__opt span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 0.5rem;
    border-radius: 999px;
    font-size: var(--v3-small);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.v3-seg__opt:hover input:not(:checked) + span { background: var(--v3-card-3); }
.v3-seg__opt input:checked + span { background: #fff; color: var(--v3-ink); }
.v3-seg__opt input:focus-visible + span { outline: 3px solid var(--v3-orange); outline-offset: 2px; }
.v3-seg__opt.is-unavailable span { color: var(--v3-off); text-decoration: line-through; }
.v3-seg__opt.is-unavailable input:checked + span { color: var(--v3-ink-2); }

.v3-select {
    width: 100%;
    min-height: 48px;
    padding: 0 2.5rem 0 1.125rem;
    border: 0;
    border-radius: 999px;
    background: var(--v3-card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1.125rem center;
    font-family: var(--font-body);
    font-size: var(--v3-small);
    font-weight: 600;
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.v3-select:hover { background-color: var(--v3-card-3); }
.v3-select:focus-visible { outline: 3px solid var(--v3-orange); outline-offset: 2px; }
.v3-select option { background: #fff; color: var(--v3-ink); }

.v3-folder__alert:empty { display: none; }
.v3-error { margin: 1rem 0 0; font-size: var(--v3-small); font-weight: 600; color: #FFB4A8; }

.v3-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1.5rem;
}
.v3-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 56px;
    padding: 0 2.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--v3-orange);
    font-family: var(--font-display);
    font-size: var(--v3-body);
    font-weight: 800;
    color: var(--v3-ink);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
}
.v3-buy:hover { background: var(--v3-orange-hover); }
.v3-buy:active { transform: scale(0.98); }
.v3-buy:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.v3-buy:disabled { background: var(--v3-card-3); color: var(--v3-on-dark-2); cursor: not-allowed; transform: none; }
.v3-buy[aria-busy="true"] { cursor: progress; }
/* O total do plano vai no próprio botão: o cliente vê o que paga onde clica */
.v3-buy__price { font-variant-numeric: tabular-nums; }
.v3-buy__price::before { content: "·"; margin-right: 0.625rem; }
.v3-buy__price:empty { display: none; }

.v3-field__help { justify-self: start; font-size: var(--v3-small); }

/* ══ MAIS DESTINOS ═══════════════════════════════════════════ */
.v3-more { padding: clamp(6.5rem, 12vw, 10rem) 0 clamp(3rem, 5vw, 4.5rem); background: var(--v3-paper); }
.v3-more__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.v3-more__col { container-type: inline-size; min-width: 0; }
.v3-more__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19cqw;
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.05em;
    color: var(--v3-ink);
}
.v3-more__lead { margin: 1.25rem 0 0; font-size: var(--v3-lead); line-height: 1.45; }

.v3-bars { display: grid; gap: 6px; margin-top: 2rem; }
.v3-bar { border-radius: var(--v3-radius); background: var(--v3-soft); transition: background-color 0.2s, opacity 0.24s; }
.v3-bar__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 58px;
    padding: 0 1.25rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.v3-bar__head::-webkit-details-marker { display: none; }
.v3-bar__head::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%231A1A1C' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center;
    transition: transform 0.24s var(--v3-ease);
}
.v3-bar[open] .v3-bar__head::after { transform: rotate(45deg); }
.v3-bar__head:focus-visible { outline: 3px solid var(--v3-orange); outline-offset: -3px; border-radius: var(--v3-radius); }
.v3-bar__name { font-size: var(--v3-body); }
.v3-bar__count { margin-left: auto; font-size: var(--v3-small); font-weight: 400; color: var(--v3-ink-2); }
.v3-bar:not([open]):hover { background: var(--v3-soft-2); }
@media (hover: hover) {
    .v3-bars:hover .v3-bar:not(:hover):not([open]) { opacity: 0.6; }
}

.v3-bar__panel { padding: 0.25rem 1.25rem 1.5rem; }
.v3-bar__photo { display: none; }
.v3-plans { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.v3-plans__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 1rem; }
.v3-plans__name { font-weight: 700; color: var(--v3-ink); text-decoration: none; }
.v3-plans__name:hover { text-decoration: underline; text-decoration-color: var(--v3-orange); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.v3-plans__price { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.v3-plans__where { grid-column: 1 / -1; font-size: var(--v3-small); color: var(--v3-ink-2); }
.v3-bar__panel > .v3-link { display: inline-block; margin-top: 1.25rem; }

.v3-search { margin-top: 2.5rem; }
.v3-search__text { margin: 0 0 0.75rem; font-weight: 700; }
.v3-search__row { display: flex; gap: 0.5rem; }
.v3-search .plan-finder__control { flex: 1; min-width: 0; }
.v3-search .plan-finder__control-shell {
    min-height: 54px;
    border: 0;
    border-radius: 999px;
    background: var(--v3-soft);
    box-shadow: none; /* taste-skill-ignore: remove a sombra do campo do buscador */
}
.v3-search .plan-finder__control-divider { display: none; }
.v3-search .plan-finder__control-input { font-size: 1rem; color: var(--v3-ink); }
.v3-search .plan-finder__dropdown { z-index: 30; }
.v3-search__btn {
    flex: none;
    min-height: 54px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--v3-ink);
    font-family: var(--font-display);
    font-size: var(--v3-body);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}
.v3-search__btn:hover { background: var(--v3-card-3); }
.v3-search__btn:focus-visible { outline: 3px solid var(--v3-orange); outline-offset: 3px; }
.v3-search > .v3-link { display: inline-block; margin-top: 1rem; }

.v3-preview {
    position: sticky;
    top: 104px;
    aspect-ratio: 4 / 5;
    max-height: calc(100vh - 136px);
    margin: 0;
    overflow: hidden;
    border-radius: var(--v3-radius);
    background: var(--v3-soft);
}
.v3-preview__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.24s linear;
}
.v3-preview__img.is-on { opacity: 1; }
.v3-preview__caption {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--v3-paper);
    font-family: var(--font-display);
    font-size: var(--v3-small);
    font-weight: 700;
    color: var(--v3-ink);
}

.v3-credit { margin-top: clamp(2rem, 4vw, 3rem); font-size: var(--v3-small); color: var(--v3-ink-2); }
.v3-credit a { color: inherit; }

/* ══ COMO FUNCIONA ═══════════════════════════════════════════ */
.v3-how { padding: clamp(4.5rem, 10vw, 9rem) 0; overflow: hidden; background: var(--v3-soft); }
.v3-how__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.v3-how__nav { display: flex; gap: 0.5rem; }
.v3-how__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--v3-ink);
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
}
.v3-how__btn:first-child i { transform: rotate(180deg); }
.v3-how__btn:hover { background: var(--v3-card-3); }
.v3-how__btn:active { transform: scale(0.94); }
.v3-how__btn:disabled { background: var(--v3-soft-2); color: var(--v3-off); cursor: default; }
.v3-how__btn:focus-visible { outline: 3px solid var(--v3-orange); outline-offset: 3px; }

.v3-how__progress { height: 6px; margin-top: 1.25rem; overflow: hidden; border-radius: 999px; background: var(--v3-soft-2); }
.v3-how__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--v3-ink);
    transform: scaleX(var(--p, 0.2));
    transform-origin: left;
    transition: transform 0.2s linear;
}

.v3-how__row {
    --edge: max(24px, calc((100% - var(--container-max)) / 2 + 24px));
    display: flex;
    gap: 32px;
    margin: 2.5rem 0 0;
    padding: 0 var(--edge);
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    scrollbar-width: none;
    cursor: grab;
}
.v3-how__row::-webkit-scrollbar { display: none; }
.v3-how__row::after { content: ""; flex: 0 0 1px; }
.v3-how__row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.v3-how__row:focus-visible { outline: 3px solid var(--v3-orange); outline-offset: 4px; }
.v3-moment { display: flex; flex: 0 0 280px; flex-direction: column; scroll-snap-align: start; }
.v3-moment__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--v3-lead);
    font-weight: 800;
    line-height: 1.2;
    color: var(--v3-ink);
}
.v3-moment p { margin: 0.625rem 0 0; font-size: 1rem; line-height: 1.55; }
.v3-moment img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--drop);
    border-radius: var(--v3-radius);
    -webkit-user-drag: none;
    user-select: none;
}

/* ══ eSIM OU CHIP FÍSICO ═════════════════════════════════════ */
.v3-formats { padding: clamp(4.5rem, 10vw, 9rem) 0; background: var(--v3-ink); color: #fff; }
.v3-formats__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
.v3-formats__lead { margin: 1.25rem 0 1.5rem; font-size: var(--v3-lead); line-height: 1.5; color: #fff; }
.v3-sheet {
    padding: 2.75rem clamp(1.25rem, 2.5vw, 2.25rem) 3rem;
    background: var(--v3-paper);
    color: var(--v3-ink);
    clip-path: polygon(0% 10px, 5% 0, 10% 10px, 15% 0, 20% 10px, 25% 0, 30% 10px, 35% 0, 40% 10px, 45% 0, 50% 10px, 55% 0, 60% 10px, 65% 0, 70% 10px, 75% 0, 80% 10px, 85% 0, 90% 10px, 95% 0, 100% 10px, 100% calc(100% - 10px), 95% 100%, 90% calc(100% - 10px), 85% 100%, 80% calc(100% - 10px), 75% 100%, 70% calc(100% - 10px), 65% 100%, 60% calc(100% - 10px), 55% 100%, 50% calc(100% - 10px), 45% 100%, 40% calc(100% - 10px), 35% 100%, 30% calc(100% - 10px), 25% 100%, 20% calc(100% - 10px), 15% 100%, 10% calc(100% - 10px), 5% 100%, 0% calc(100% - 10px));
}
.v3-sheet__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--v3-head);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
}
.v3-menu { display: grid; gap: 18px; margin: 2rem 0 0; }
.v3-menu__row { display: flex; align-items: baseline; gap: 0.5rem; }
.v3-menu__row::before {
    content: "";
    order: 1;
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    border-bottom: 4px dotted #B4B4B7;
    transform: translateY(-0.3em);
}
.v3-menu dt { order: 0; font-weight: 700; white-space: nowrap; }
.v3-menu dd { order: 2; margin: 0; text-align: right; }

/* ══ A CARTA ═════════════════════════════════════════════════ */
.v3-letter { padding: clamp(4.5rem, 10vw, 9rem) 0; background: var(--v3-peach); }
.v3-letter__sheet {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(1.75rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 3.75rem) 0;
    background: var(--v3-paper);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 95.833% 100%, 91.667% calc(100% - 8px), 87.5% 100%, 83.333% calc(100% - 8px), 79.167% 100%, 75% calc(100% - 8px), 70.833% 100%, 66.667% calc(100% - 8px), 62.5% 100%, 58.333% calc(100% - 8px), 54.167% 100%, 50% calc(100% - 8px), 45.833% 100%, 41.667% calc(100% - 8px), 37.5% 100%, 33.333% calc(100% - 8px), 29.167% 100%, 25% calc(100% - 8px), 20.833% 100%, 16.667% calc(100% - 8px), 12.5% 100%, 8.333% calc(100% - 8px), 4.167% 100%, 0% calc(100% - 8px));
}
.v3-letter__sheet .v3-h2 { margin-bottom: 1.75rem; }
.v3-letter__sheet p { margin: 0 0 1.1em; font-size: var(--v3-body); line-height: 1.6; }
.v3-letter__sheet mark { padding: 0.05em 0.15em; background: var(--v3-mark); color: inherit; }
.v3-letter__sign {
    margin-top: 1.75rem !important;
    font-family: var(--font-display);
    font-size: var(--v3-lead) !important;
    font-weight: 800;
    line-height: 1.3 !important;
}
.v3-letter__sign span { display: block; font-family: var(--font-body); font-size: var(--v3-small); font-weight: 400; color: var(--v3-ink-2); }
.v3-letter__stub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin: 2rem calc(-1 * clamp(1.5rem, 5vw, 3.75rem)) 0;
    padding: 1.5rem clamp(1.5rem, 5vw, 3.75rem) 2rem;
    border-top: 5px dotted var(--v3-peach);
    background: var(--v3-soft);
    font-size: var(--v3-small);
}
.v3-letter__mail { font-family: var(--font-display); font-size: var(--v3-body); font-weight: 800; color: var(--v3-ink); }

/* ══ TOKIO MARINE ════════════════════════════════════════════ */
.v3-tokio {
    position: relative;
    isolation: isolate;
    padding-top: clamp(4rem, 8vw, 7rem);
    overflow: hidden;
    background: var(--v3-ink);
    color: #fff;
}
.v3-tokio__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.v3-tokio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(26, 26, 28, 0.6); }
.v3-tokio__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    min-height: clamp(30rem, 72svh, 40rem);
}
.v3-tokio__note { max-width: 24ch; margin: 0 0 4rem; font-family: var(--font-display); font-size: var(--v3-lead); font-weight: 700; line-height: 1.4; }
.v3-reply {
    justify-self: end;
    width: min(100%, 34rem);
    margin-bottom: -60px;
    padding: 3rem 3rem calc(3rem + 60px);
    background: var(--v3-paper);
    color: var(--v3-ink);
    text-align: center;
    transform: rotate(2deg);
    transform-origin: 50% 100%;
}
.v3-reply__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--v3-head);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.v3-reply p { margin: 1rem 0 0; font-size: var(--v3-body); line-height: 1.55; }
.v3-reply .v3-coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin-top: 1.75rem;
    font-size: var(--v3-lead);
}
.v3-coupon__code { margin-left: 0.25rem; font-family: var(--font-display); font-size: var(--v3-head); font-weight: 800; letter-spacing: 0.02em; }
.v3-coupon__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--v3-soft);
    font-family: var(--font-body);
    font-size: var(--v3-small);
    font-weight: 700;
    color: var(--v3-ink);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
}
.v3-coupon__copy:hover { background: var(--v3-soft-2); }
.v3-coupon__copy:active { transform: scale(0.96); }
.v3-coupon__copy:focus-visible { outline: 3px solid var(--v3-orange); outline-offset: 3px; }
.v3-coupon__copy.is-copied { background: var(--v3-orange-field); }
.v3-reply__action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-top: 1.75rem;
    border-radius: 999px;
    background: var(--v3-ink);
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s;
}
.v3-reply__action:hover { background: var(--v3-card-3); }

/* ══ PERGUNTAS FREQUENTES ════════════════════════════════════ */
.v3-faq { padding: clamp(4.5rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 5rem); background: var(--v3-paper); }
.v3-faq__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem clamp(2rem, 4vw, 4rem); }
.v3-faq__text { columns: 2; column-gap: 56px; }
.v3-faq__text p { margin: 0 0 20px; font-size: var(--v3-body); line-height: 1.55; break-inside: avoid; }
.v3-faq__text strong { font-weight: 700; }
.v3-faq__text a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--v3-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* ══ CONTATO: cupom picotado ═════════════════════════════════ */
.v3-contact { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4.5rem, 10vw, 9rem); background: var(--v3-paper); }
.v3-ticket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    border-radius: var(--v3-radius);
    background: var(--v3-orange);
    color: var(--v3-ink);
}
.v3-ticket__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.75rem, 4vw, 3rem);
}
.v3-ticket__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--v3-head);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.v3-ticket__text p { margin: 0; font-size: var(--v3-body); line-height: 1.55; }
.v3-ticket__form {
    position: relative;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-left: 5px dotted var(--v3-paper);
}
.v3-ticket__form::before,
.v3-ticket__form::after {
    content: "";
    position: absolute;
    left: -2.5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--v3-paper);
    transform: translate(-50%, -50%);
}
.v3-ticket__form::before { top: 0; }
.v3-ticket__form::after { top: 100%; }
.v3-ticket__input {
    width: 100%;
    min-height: 54px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--v3-orange-field);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--v3-ink);
}
.v3-ticket__input::placeholder { color: var(--v3-ink-2); opacity: 1; }
.v3-ticket__input:focus-visible { outline: 3px solid var(--v3-ink); outline-offset: 2px; }
.v3-ticket__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;
    border-radius: 999px;
    background: var(--v3-ink);
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s;
}
.v3-ticket__action:hover { background: var(--v3-card-3); }
.v3-ticket__action:focus-visible { outline: 3px solid var(--v3-ink); outline-offset: 3px; }

/* ══ TELAS MÉDIAS ════════════════════════════════════════════ */
@media (max-width: 1099px) {
    .v3-tab { padding: 0.75rem 1rem; }
    .v3-tab__name { font-size: 1.0625rem; }
    .v3-tab__from { font-size: 0.875rem; }
    .v3-field__help { grid-column: 2; }
    /* O nome na faixa termina antes do botão flutuante do WhatsApp (canto inferior direito) */
    .v3-folder__name { height: 3.5rem; padding: 0 1.5rem; font-size: 1.375rem; }
    .v3-folder__photo img { height: calc(100% - 3.5rem); }
    .v3-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .v3-field { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; }
}

@media (max-width: 1023px) {
    .v3-more__grid { grid-template-columns: minmax(0, 1fr); }
    .v3-more__col { max-width: 640px; }
    .v3-preview { display: none; }
    .v3-bar__photo { display: block; width: 100%; height: auto; margin-bottom: 1.25rem; border-radius: 12px; }
    .v3-formats__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .v3-formats__intro { grid-column: 1 / -1; max-width: 640px; }
    .v3-faq__grid { grid-template-columns: minmax(0, 1fr); }
    .v3-tokio__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .v3-tokio__note { margin: 0; }
    .v3-reply { justify-self: center; }
}

/* ══ CELULAR ═════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .v3 { --v3-body: 1rem; }
    .v3 .container { padding: 0 16px; }

    .v3-hero__lead { margin-top: 0.75rem; }
    .v3-stack { margin-top: 1.25rem; }
    /* Celular: os quatro destinos em 2 × 2, todos à vista e do tamanho do polegar */
    .v3-js .v3-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-bottom: 6px; }
    .v3-tab { gap: 0; min-height: 52px; padding: 0.375rem 0.875rem; border-radius: 12px; }
    .v3-tab[aria-selected="true"] { min-height: 52px; }
    .v3-tab__name { font-size: 1rem; }
    .v3-tab:not([aria-selected="true"]):hover { transform: none; }
    .v3-js .v3-folder { border-radius: 12px; }
    /* No celular o total já está no botão e o preço inicial nas abas: o bloco de preço sai e o botão sobe */
    .v3-folder__top { display: none; }

    .v3-folder { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "body"; }
    .v3-folder__photo { height: 80px; min-height: 0; clip-path: none; }
    .v3-folder__photo img { height: 100%; }
    /* A aba de cima já diz o destino: o nome na foto fica só para o leitor de tela */
    .v3-folder__name { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; white-space: nowrap; } /* taste-skill-ignore */
    .v3-folder__body { padding: 1rem 1rem 1.5rem; }
    .v3-chip { display: none; }
    .v3-folder__coverage { order: 7; font-size: var(--v3-small); }
    .v3-price { margin-top: 0; }
    .v3-price__value { font-size: 1.75rem; }
    .v3-fields { margin-top: 0.875rem; gap: 8px; }
    .v3-field { grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.5rem; }
    .v3-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* taste-skill-ignore */
    .v3-seg__opt span { min-height: 36px; padding: 0 0.25rem; }
    .v3-select { min-height: 44px; }
    .v3-actions { margin-top: 0.875rem; gap: 0.75rem 1.25rem; }
    .v3-buy { flex: 1 1 100%; min-height: 52px; }

    .v3-more__lead { font-size: var(--v3-body); }
    .v3-bar__head { padding: 0 1rem; }
    .v3-bar__panel { padding: 0.25rem 1rem 1.25rem; }
    .v3-search__row { flex-direction: column; }

    .v3-how__nav { display: none; }
    .v3-how__row { gap: 16px; margin-top: 1.75rem; }
    .v3-moment { flex-basis: 72vw; }
    .v3-moment img { margin-top: calc(var(--drop) / 2); }

    .v3-formats__grid { grid-template-columns: minmax(0, 1fr); }
    .v3-sheet { margin: 0 -4px; }

    .v3-letter__sheet { padding-top: 1.75rem; }

    .v3-tokio__note { max-width: none; font-size: 1.25rem; }
    .v3-reply { width: 90%; padding: 2rem 1.5rem calc(2rem + 60px); transform: rotate(1deg); }

    .v3-faq__text { columns: 1; }
    .v3-faq__text p { margin-bottom: 18px; }

    .v3-ticket { grid-template-columns: minmax(0, 1fr); }
    .v3-ticket__form { border-left: 0; border-top: 5px dotted var(--v3-paper); }
    .v3-ticket__form::before,
    .v3-ticket__form::after { top: -2.5px; }
    .v3-ticket__form::before { left: 0; }
    .v3-ticket__form::after { left: 100%; }
}

/* ══ MOVIMENTO ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .v3-anim [data-v3-reveal] {
        transition: opacity 0.7s var(--v3-ease), transform 0.7s var(--v3-ease);
        transition-delay: calc(var(--i, 0) * 80ms);
    }
    .v3-anim [data-v3-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }

    /* Foto do cartão da frente: um zoom lento, como a câmera de quem chega */
    .v3-folder.is-front .v3-folder__photo img { animation: v3-drift 20s ease-in-out infinite alternate; }
    @keyframes v3-drift {
        from { transform: scale(1); }
        to { transform: scale(1.08) translateX(-2%); }
    }

    /* Troca de destino: o cartão novo sobe para a frente */
    .v3-folder.is-entering { animation: v3-rise 0.45s var(--v3-ease) both; }
    @keyframes v3-rise {
        from { transform: translateY(36px); }
        to { transform: none; }
    }

    .v3-moment img { transition: transform 0.4s var(--v3-ease); }
    .v3-moment:hover img { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .v3 *,
    .v3 *::before,
    .v3 *::after { transition-duration: 0.01ms !important; animation: none !important; }
}