/*
 * Knowledge base — DESIGN VARIANT 3, "Recorrido".
 *
 * The third bet: neither a card grid nor a document, but an editorial page that
 * follows the customer's timeline — before deciding, contracting, living with
 * the car, giving it back.
 *
 * Large type, full-bleed alternating bands, numbered rows, no sidebar and no
 * boxes. It should feel like the marketing site rather than a support tool,
 * which is the whole argument for it: help as part of the sales journey.
 *
 */

:root {
    --v3-ink: #221f1c;
    --v3-body: #57534e;
    --v3-muted: #8a847d;
    --v3-cream: #f7f3ec;
    --v3-cream-2: #fffdf9;
    --v3-dark: #23272f;
    --v3-line: #e4ded4;

    /* The CTA button keeps the site's own .button.is-warning-gradient. */
    --v3-grad: linear-gradient(137deg, #ffc376 32%, #fa7c91 100%);

    /*
     * ----------------------------------------------------------- accent ----
     *
     * Same arrangement as variant 1: every accent resolves through these
     * tokens, so a scheme is one block. ?acento=mint|calido|rosa switches
     * them. Default is mint — cool glow, mint marks, green→oker highlight.
     */
    --v3-a-text: #277a76;   /* mint is 2.2:1 on white; this is 5.2:1, safe for text */
    --v3-a-mark: #67bdb9;   /* stage-number stroke, rail indicator */
    --v3-a-grad: linear-gradient(50deg, #5fb8b4 25%, #ffc376 100%);
    --v3-a-ring: rgba(103, 189, 185, .22);
    --v3-a-ring-line: rgba(103, 189, 185, .85);
    --v3-a-soft: rgba(103, 189, 185, .14);
    --v3-a-kicker: #67bdb9;
    --v3-a-kicker-rule: rgba(103, 189, 185, .7);
    --v3-hero-glow: rgba(101, 135, 165, .48);

    /* How far the content sits to the right of the rail on wide screens. */
    --v3-shift: 92px;
    --v3-max: 1100px;
}

/* Cálido — mint marks, but the hero glow goes warm. */
.v3[data-acento="calido"] {
    --v3-hero-glow: rgba(255, 195, 118, .42);
}

/* Rosa — the original oker → pink, throughout. */
.v3[data-acento="rosa"] {
    --v3-a-text: #c2455d;   /* #fa7c91 itself is 2.6:1 on white — too low for text */
    --v3-a-mark: #fa7c91;
    --v3-a-grad: linear-gradient(137deg, #ffc376 32%, #fa7c91 100%);
    --v3-a-ring: rgba(255, 195, 118, .2);
    --v3-a-ring-line: rgba(255, 195, 118, .8);
    --v3-a-soft: rgba(250, 124, 145, .1);
    --v3-a-kicker: #ffc376;
    --v3-a-kicker-rule: rgba(255, 195, 118, .6);
    --v3-hero-glow: rgba(250, 124, 145, .4);
}

.v3 { background: var(--v3-cream-2); color: var(--v3-body); }

.v3-wrap {
    max-width: var(--v3-max);
    margin: 0 auto;
    padding: 0 28px;
}

/* ---------------------------------------------------------------- hero ---- */

/*
 * The hub's banner wears the same plate as the topic and question pages.
 *
 * It was the one near-black surface in the section, which made the three
 * levels look like three sites. Same shape as before — full width, same
 * padding, same type — only the ground changed, so the text goes to ink.
 */
.v3-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 28px 84px;
    background: linear-gradient(118deg, #60bab6 0%, #7fc9b0 38%, #ffc376 100%);
}

/* The dot screen the other two levels carry. */
.v3-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(34, 31, 28, .16) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .5;
}

.v3-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--v3-max);
    margin: 0 auto;
}

.v3-hero__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    color: rgba(34, 31, 28, .66);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.v3-hero__kicker::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(34, 31, 28, .32), transparent);
}

.v3-hero__title {
    margin: 0 0 22px;
    max-width: 16ch;
    color: var(--v3-ink);
    font-size: clamp(38px, 6vw, 72px);
    font-weight: 800;
    letter-spacing: -2.5px;
    line-height: 1.02;
}

/*
 * Plain white. It carried the brand gradient through background-clip, and the
 * accent one before that — but the accent gradient is the plate's own colours,
 * so the words vanished into the ground, and the CTA gradient read as a second
 * button rather than as emphasis. White works on every stop of the plate.
 */
.v3-hero__title em { font-style: normal; color: #fff; }

.v3-hero__sub {
    margin: 0 0 46px;
    max-width: 52ch;
    color: rgba(34, 31, 28, .78);
    font-size: 19px;
    line-height: 1.6;
}

/* Hidden by the filter. */
.v3-q[hidden], .v3-band[hidden] { display: none; }

/* --------------------------------------------------------------- band ---- */

/* The band the question list and the hub both sit in. */
.v3-band {
    padding: 86px 0 78px;
    background: var(--v3-cream-2);
    /* Clears the site navbar when something jumps to it. */
    scroll-margin-top: 108px;
}

/* ----------------------------------------------------------- question ---- */

/*
 * A question is a full-width row, not a card: a rule, a number and large type.
 * Opening one pushes the rest down rather than opening a panel over them.
 */
.v3-q {
    border-top: 1px solid var(--v3-line);
    scroll-margin-top: 90px;
}

.v3-q:last-child { border-bottom: 1px solid var(--v3-line); }

.v3-q__q {
    display: flex;
    align-items: baseline;
    gap: 22px;
    padding: 26px 4px;
    cursor: pointer;
    list-style: none;
    transition: padding-left .2s;
}

.v3-q__q::-webkit-details-marker { display: none; }
.v3-q__q:hover { padding-left: 10px; }

.v3-q__i {
    flex: 0 0 auto;
    width: 34px;
    color: var(--v3-muted);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.v3-q__t {
    /* It is an <h3> now — strip the default heading margins so the row keeps
       the spacing the summary layout gives it. */
    margin: 0;
    flex: 1 1 auto;
    color: var(--v3-ink);
    font-size: clamp(19px, 2.2vw, 25px);
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.28;
}

.v3-q[open] .v3-q__t { color: var(--v3-a-text); }

.v3-q__plus {
    flex: 0 0 auto;
    position: relative;
    width: 22px;
    height: 22px;
    align-self: center;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.v3-q__plus::before,
.v3-q__plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--v3-ink);
    transform: translate(-50%, -50%);
}

.v3-q__plus::before { width: 18px; height: 2px; }
.v3-q__plus::after  { width: 2px; height: 18px; transition: opacity .3s; }

.v3-q[open] .v3-q__plus { transform: rotate(180deg); }
.v3-q[open] .v3-q__plus::after { opacity: 0; }

/*
 * The answer body.
 *
 * These are real articles now, not two-line placeholders — the longest runs to
 * 13,500 characters with headings, ordered lists and tables. So it is set as
 * prose: a measure short enough to read, a vertical rhythm where space belongs
 * to the thing below it, and list markers borrowed from the site's own
 * .content ul so an answer looks like it belongs to EV-Renting.
 */
.v3-q__a {
    padding: 0 60px 36px 56px;
    /*
     * Grows with the screen rather than sitting at one fixed measure: ~776px on
     * a 1200px window, ~842px at 1500px, capped at 54rem. The cap is what stops
     * the line getting long enough that the eye loses its place returning to
     * the next one — on answers this long that is a real cost, so the column
     * widens with the window but not without limit.
     */
    max-width: clamp(36rem, 32rem + 22vw, 54rem);
    color: var(--v3-body);
    font-size: 17px;
    line-height: 1.72;
}

.v3-q__a > p { margin: 0 0 1.05em; }
.v3-q__a > p:last-child { margin-bottom: 0; }

/*
 * The short answer leads. Larger and darker than the detail beneath it, so
 * someone who reads one sentence and closes the question still got an answer.
 */
.v3-q__short {
    margin-bottom: 1.15em !important;
    color: var(--v3-ink);
    font-size: 19.5px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.1px;
}

/* Headings own the space above them, not below — that is what groups a heading
   with its own paragraph rather than the one before it. */
.v3-q__a h4 {
    margin: 1.9em 0 .55em;
    color: var(--v3-ink);
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.35;
}

.v3-q__a h4:first-child { margin-top: 0; }

.v3-q__a strong { color: var(--v3-ink); font-weight: 700; }

.v3-q__a em { font-style: italic; }

.v3-q__a a {
    color: var(--v3-a-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.v3-q__a a:hover { text-decoration-thickness: 2px; }

/* ----------------------------------------------------------- lists ---- */

.v3-q__a ul,
.v3-q__a ol {
    margin: 0 0 1.15em;
    padding: 0 0 0 1.6em;
    list-style: none;
}

.v3-q__a li {
    position: relative;
    margin-bottom: .55em;
    line-height: 1.68;
}

.v3-q__a li:last-child { margin-bottom: 0; }

/* The square bullet from the site's own list style, at the size this text
   wants. */
.v3-q__a ul > li::before {
    content: "";
    position: absolute;
    left: -1.15em;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 2px 0 2px 0;
    background: var(--v3-a-mark);
}

.v3-q__a ol { counter-reset: v3-step; }

.v3-q__a ol > li { counter-increment: v3-step; }

.v3-q__a ol > li::before {
    content: counter(v3-step) ".";
    position: absolute;
    left: -1.6em;
    top: 0;
    width: 1.4em;
    color: var(--v3-a-text);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/*
 * Many imported list items open with a bold term and then explain it. Nudging
 * the run-on text away from the term keeps the two from reading as one word.
 */
.v3-q__a li > strong:first-child { margin-right: .15em; }

/* Nested lists sit closer and drop to a hollow marker. */
.v3-q__a li ul { margin: .5em 0 0; }
.v3-q__a li ul > li::before {
    background: transparent;
    border: 1.5px solid var(--v3-a-mark);
}

/* Call-outs. In the source these were paragraphs led by an emoji pointer. */
.v3-q__a .kb-note {
    margin: 1.4em 0;
    padding: 14px 18px;
    border-left: 3px solid var(--v3-a-mark);
    border-radius: 0 10px 10px 0;
    background: var(--v3-a-soft);
    color: var(--v3-ink);
    font-size: 16px;
}

/*
 * Tables inside an answer. The imported ones have no <thead> — the first row is
 * just the first row — so the styling cannot lean on header markup and instead
 * relies on rules and weight.
 */
.v3-table,
.v3-q__a table {
    width: 100%;
    margin: 1.3em 0;
    border-collapse: collapse;
    font-size: 15.5px;
    line-height: 1.55;
}

.v3-table th, .v3-table td,
.v3-q__a th, .v3-q__a td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--v3-line);
    text-align: left;
    vertical-align: top;
}

.v3-table tr:first-child td,
.v3-table thead th,
.v3-q__a tr:first-child td,
.v3-q__a thead th {
    border-bottom: 2px solid var(--v3-ink);
    color: var(--v3-ink);
    font-weight: 800;
}

.v3-table tr:last-child td,
.v3-q__a tr:last-child td { border-bottom: 0; }

.v3-table td:first-child,
.v3-q__a td:first-child { color: var(--v3-ink); font-weight: 600; }

/* Long tables in a narrow answer column scroll rather than squeeze. */
.v3-q__a .v3-table,
.v3-q__a table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v3-q__a td, .v3-q__a th { min-width: 130px; }

/* -------------------------------------------------------------- close ---- */

/*
 * The closing band wears the plate too.
 *
 * With the hero on the gradient this was the only near-black surface left on
 * either page, and one dark block at the foot reads as a section that belongs
 * to a different site. The same plate bookends the page instead.
 *
 * Its geometry is the footer's, not the hero's: the same 50px side inset and
 * the same 50px corner radius (sass/custom/footer.scss), so the two gradient
 * slabs at the foot of the page read as one pair with the review strip
 * between them, rather than as a full-bleed band that happens to sit above a
 * narrower one. Both numbers drop to 20px at the footer's own 768px
 * breakpoint, so they never disagree about how far from the edge they sit.
 */
.v3-close {
    position: relative;
    overflow: hidden;
    display: block;
    /* 34px of plate showing as a frame, then 56px of air inside the card. */
    padding: 90px 90px 86px;
    margin: 0 50px 36px;
    border-radius: 50px;
    background: linear-gradient(118deg, #60bab6 0%, #7fc9b0 38%, #ffc376 100%);
    text-align: left;
}

/* The dot screen the two heroes wear, on the frame that is left showing. */
.v3-close::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(34, 31, 28, .16) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .5;
}

/*
 * The card. The plate stops being the surface and becomes a border around
 * one white panel, which is what lets the sentence below be set this large:
 * at 80px on the gradient the type fought the colour under it, and on white
 * it does not have to.
 */
.v3-close::after {
    content: "";
    position: absolute;
    inset: 34px;
    border-radius: 34px;
    background: #fff;
}

/*
 * The card is a pseudo-element, so everything on it has to be lifted above it
 * by hand. The three content elements are named as well as the children,
 * because display:contents on the wrapper drops it out of the box tree: a
 * position on it is ignored, and the title and the paragraph were rendering
 * underneath the white.
 */
.v3-close > *,
.v3-close__title,
.v3-close__text,
.v3-close__do { position: relative; z-index: 1; }

/*
 * The sentence does the work, set as large as the card will carry it. A
 * hairline closes it off and the paragraph and the two actions share the line
 * underneath, the way a masthead sits above its standfirst.
 */
.v3-close__title {
    max-width: none;
    margin: 0;
    color: var(--v3-ink);
    font-size: clamp(34px, 5.4vw, 78px);
    font-weight: 800;
    letter-spacing: -2.8px;
    line-height: .98;
}

.v3-close__text {
    max-width: 38ch;
    margin: 36px 0 0;
    padding-top: 26px;
    border-top: 1px solid rgba(34, 31, 28, .18);
    color: rgba(34, 31, 28, .72);
    font-size: 17px;
    line-height: 1.6;
}

.v3-close__do {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 0;
}

.v3-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: .85rem 1.6rem .85rem .85rem;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 16.5px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}

/* The icon gets a chip of its own, so the two labels start on the same x. */
.v3-btn i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 14px;
}

/*
 * Ink, not the pink CTA pill this block used to carry: that pill is the
 * plate's own amber-to-pink and blended into the ground. Ink is the one value
 * that reads on the gradient and on the white card alike.
 */
.v3-btn--solid {
    background: var(--v3-ink);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(34, 31, 28, .75);
}

.v3-btn--solid i { background: rgba(255, 255, 255, .17); }

.v3-btn--solid:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 20px 36px -16px rgba(34, 31, 28, .85);
}

.v3-btn--line {
    border-color: rgba(34, 31, 28, .18);
    color: var(--v3-ink);
}

.v3-btn--line i { background: rgba(34, 31, 28, .07); }

.v3-btn--line:hover {
    transform: translateY(-2px);
    background: rgba(34, 31, 28, .04);
    border-color: rgba(34, 31, 28, .32);
    color: var(--v3-ink);
}

/*
 * Wide enough, and the standfirst and the actions share one line under a
 * single rule. display:contents on the wrapper is what makes that possible —
 * the title and the paragraph have to be grid items of the band itself to sit
 * in different rows while the buttons sit beside one of them.
 */
@media (min-width: 1000px) {
    .v3-close {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0 56px;
    }

    .v3-close__say { display: contents; }
    .v3-close__title { grid-column: 1 / -1; }

    .v3-close__text {
        grid-column: 1;
        grid-row: 2;
        margin-top: 44px;
    }

    .v3-close__do {
        grid-column: 2;
        grid-row: 2;
        align-content: start;
        flex-wrap: nowrap;
        margin-top: 44px;
        padding-top: 26px;
        border-top: 1px solid rgba(34, 31, 28, .18);
    }
}

@media (max-width: 768px) {
    .v3-close { margin: 0 20px 24px; border-radius: 20px; }
    .v3-close::after { inset: 16px; border-radius: 18px; }
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 860px) {
    .v3-hero { padding: 52px 20px 46px; }
    .v3-hero__kicker { margin-bottom: 16px; font-size: 12.5px; letter-spacing: 1.6px; }
    .v3-hero__title { letter-spacing: -1.4px; max-width: none; }
    .v3-hero__sub { font-size: 16.5px; margin-bottom: 30px; }
    .v3-wrap { padding: 0 20px; }
    .v3-band { padding: 46px 0 42px; }

    /* Question rows: a 48px tap target, and the answer no longer indented — on
       a 375px screen that indent was costing a word per line. */
    .v3-q__q { gap: 12px; padding: 17px 0; min-height: 48px; }
    .v3-q__i { width: 20px; font-size: 12px; }
    .v3-q__t { font-size: 17.5px; letter-spacing: -.3px; }
    .v3-q__plus { width: 20px; height: 20px; }
    .v3-q__plus::before { width: 16px; }
    .v3-q__plus::after { height: 16px; }
    .v3-q__a { padding: 0 0 24px; font-size: 16.5px; }
    .v3-q__short { font-size: 17px; }
    .v3-q__a h4 { font-size: 16.5px; }
    .v3-close { padding: 58px 42px 56px; }
    .v3-close__text { font-size: 16.5px; }
    .v3-btn { min-height: 52px; }
    .v3-close__title { letter-spacing: -1.4px; }
    .v3-btn { width: 100%; }

    /* Scrollable, but cells still wrap — nowrap made the comparison table one
       very long line. */
    .v3-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .v3-table th, .v3-table td { min-width: 116px; padding: 10px 12px; }
}

@media (max-width: 420px) {
    .v3-hero__title { font-size: 31px; letter-spacing: -1.1px; }
    .v3-q__t { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .v3-q__q,
.v3-q__plus,
.v3-btn { transition: none; }
    .v3-q__q:hover { padding-left: 4px; }
    .v3-btn--solid:hover { transform: none; }
}

/* ======================================================= topic pages ==== */

/*
 * /es/ayuda/{tema} — the second level of the same design. The hero is shorter
 * than the hub's: this page is the answer, not the doorway, so the reader
 * should reach the first question without scrolling.
 */
/* ============================================= the topic page's hero ==== */

/*
 * .v3-hero paints a blue-grey radial glow over itself, which is right on the
 * near-black banner the other pages use and a smudge on anything light.
 */
.v3-hero--topic::before { content: none; }

/*
 * The brand's plate, as a panel rather than a band.
 *
 * Edge to edge it was a slab the width of the window; inset and rounded it is
 * an object on the page, and it lines up with the cards below it instead of
 * cutting across them. The breadcrumb stays outside, on the cream, so the
 * panel holds the topic and nothing else.
 */
.v3-hero--topic { padding: 26px 28px 10px; background: var(--v3-cream-2); }

/*
 * Wider than the column below it. The panel is the page's masthead rather
 * than its first block, so it runs past the measure the questions keep and
 * stops at a margin instead of at the content width.
 */
.v3-hero--topic .v3-hero__inner { max-width: 1440px; }

.v3-hero--topic .v3-crumbs { margin-bottom: 18px; color: var(--v3-muted); }
.v3-hero--topic .v3-crumbs a { color: var(--v3-body); }
.v3-hero--topic .v3-crumbs a:hover,
.v3-hero--topic .v3-crumbs [aria-current] { color: var(--v3-ink); }
.v3-hero--topic .v3-crumbs__sep { background: var(--v3-line); }

.v3-hero--topic .v3-hero__card {
    position: relative;
    overflow: hidden;
    padding: 64px 60px 60px;
    border-radius: 30px;
    background: linear-gradient(118deg, #60bab6 0%, #7fc9b0 42%, #ffc376 100%);
}

/* The dot screen the question pages use, so the two levels are the same
   material at different sizes. */
.v3-hero--topic .v3-hero__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(34, 31, 28, .16) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .5;
    pointer-events: none;
}

.v3-hero--topic .v3-hero__card > * { position: relative; z-index: 1; }

/* ---- the text, rearranged */

/*
 * The old order was a shouty letterspaced "12 PREGUNTAS" over the name, with
 * the description trailing underneath at body size — the loudest thing on the
 * banner was its least useful line. Now the name leads, a rule closes it, the
 * description is set as a lead rather than as a caption, and the count is a
 * quiet chip beside the icon where a fact of that size belongs.
 */
/*
 * The icon hangs in its own margin and everything else shares one left edge.
 *
 * Stacked above the text it cost a whole row and pushed the panel to 463px;
 * beside the title it left the description starting 76px to its left, so the
 * panel had two left margins. Hanging it and indenting the description to
 * match fixes both: one text edge, and the figure outside it.
 */
.v3-hero--topic .v3-hero__head {
    align-items: flex-start;
    gap: 26px;
    margin-bottom: 24px;
}

.v3-hero--topic .v3-hero__head > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/*
 * No icon.
 *
 * It was decoration repeating what the name already says, and on a panel this
 * size it was competing with it. aria-hidden already, so nothing is lost to a
 * screen reader by taking it out of the layout.
 */
.v3-hero--topic .v3-hero__mark { display: none; }

/* The count: a chip, not a headline. */
.v3-hero--topic .v3-hero__count {
    order: 1;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .55);
    color: var(--v3-ink);
    font-size: 11.5px;
    letter-spacing: .12em;
}

.v3-hero--topic .v3-hero__title {
    order: 2;
    position: relative;
    margin: 0;
    padding-bottom: 20px;
    max-width: 15ch;
    color: var(--v3-ink);
    font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
    letter-spacing: -.04em;
    line-height: .98;
}

/* The rule that closes the name — the same mark the answer pages use under
   their lead. */
.v3-hero--topic .v3-hero__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 2px 0 2px 0;
    background: var(--v3-ink);
    opacity: .85;
}

.v3-hero--topic .v3-hero__sub {
    margin: 0;
    max-width: 56ch;
    color: rgba(34, 31, 28, .82);
    font-size: clamp(17px, 1.2vw, 20px);
    font-weight: 500;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .v3-hero--topic { padding: 20px 20px 8px; }
    .v3-hero--topic .v3-hero__card { padding: 34px 26px 32px; border-radius: 22px; }
    .v3-hero--topic .v3-hero__head { gap: 14px; }
    .v3-hero--topic .v3-hero__title { max-width: none; padding-bottom: 16px; }

}

/* ---- breadcrumb */

/*
 * Visible, and matching the BreadcrumbList in the head: structured data is
 * meant to describe navigation the reader can actually see.
 */
.v3-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, .62);
    font-size: 13.5px;
}

/*
 * 13.5px text gives a 19px target, which is small for a thumb. The hit area
 * is grown to 44px with an overlay rather than with padding, so the row's
 * height and the gap below it do not move: padding here would push the title
 * under it down by 25px on every topic and question page.
 *
 * ±4px horizontally against the row's 10px gap, so neighbouring crumbs come
 * close but never overlap — a tap can only ever land on one of them.
 */
.v3-crumbs a {
    position: relative;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .2s;
}

.v3-crumbs a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    left: -4px;
    height: 44px;
    transform: translateY(-50%);
}

.v3-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.v3-crumbs [aria-current] { color: #fff; font-weight: 600; }

.v3-crumbs__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}

.v3-hero__count {
    margin: 0;
    color: var(--v3-a-kicker);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ---- the link across to My EV Renting */

/*
 * The knowledge base explains; My EV Renting is where the reader acts. A topic
 * that has a counterpart there says so, once, after the questions.
 */
.v3-cross {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 56px 0 0;
    padding: 22px 26px;
    border: 1px solid var(--v3-line);
    border-radius: 20px 6px 20px 6px;
    background: var(--v3-cream-2);
    text-decoration: none;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s, border-color .22s;
}

.v3-cross:hover {
    transform: translateY(-2px);
    border-color: var(--v3-a-ring-line);
    box-shadow: 0 18px 34px -24px rgba(34, 31, 28, .6);
}

.v3-cross__k {
    color: var(--v3-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.v3-cross__v {
    color: var(--v3-ink);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ---- the other topics */

/* The closing band used to start the moment the cards ended. */
.v3-more { padding: 64px 0 88px; }

.v3-more__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.v3-more__nav { display: flex; gap: 8px; }

.v3-more__b {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--v3-line);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background .2s, opacity .2s;
}

.v3-more__b:hover:not(:disabled) { border-color: var(--v3-a-ring-line); background: var(--v3-a-soft); }
.v3-more__b:disabled { opacity: .35; cursor: default; }

.v3-more__b::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--v3-a-text);
    border-right: 2px solid var(--v3-a-text);
}

.v3-more__b--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.v3-more__b--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }

.v3-more__h {
    margin: 0;
    color: var(--v3-ink);
    font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

/*
 * A topic card is a door, and a door needs to say where it goes.
 *
 * These were a name and a count in a thin box: nothing to look at, nothing to
 * judge the topic by, and a ragged bottom edge wherever a name ran to two
 * lines. Every category in config/knowledge_base.php already carries an icon
 * and a one-line description — both were simply going unused. The columns are
 * wider now because there is something in them to read.
 */
/*
 * A scrolling row rather than a grid.
 *
 * Eleven topics wrapped to three rows and a ragged last one, which gave the
 * section more weight than a "see also" deserves. One row that scrolls keeps
 * it to a single band, and scroll-snap means it always comes to rest on a
 * card edge instead of halfway through one.
 *
 * The negative margins let the row run to the edge of the viewport while the
 * cards still line up with the column: without them the first card would be
 * clipped at the wrap's padding and the row would look cut off rather than
 * continued.
 */
.v3-more__g {
    display: flex;
    gap: 14px;
    margin: 0 -28px;
    padding: 4px 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /*
     * Snapping aligns a card to the scrollport edge, which ignores padding —
     * so without this the track came to rest at scrollLeft 28 with the first
     * card against the viewport instead of the column, and "prev" never knew
     * it was at the beginning.
     */
    scroll-padding-left: 28px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.v3-more__g::-webkit-scrollbar { display: none; }

/* Keyboard users can scroll the track, so it has to say where the focus is. */
.v3-more__g:focus-visible { outline: 2px solid var(--v3-a-ring-line); outline-offset: 4px; border-radius: 18px; }

.v3-more__c {
    display: flex;
    flex-direction: column;
    flex: 0 0 232px;
    scroll-snap-align: start;
    min-width: 0;
    padding: 18px 20px 15px;
    border: 1px solid var(--v3-line);
    border-radius: 12px 4px 12px 4px;
    /* Flat on the band rather than a white card: see the note on
       .v3-band--list .v3-q. The fill arrives on hover, which is also what
       tells you the whole card is the link. */
    background: transparent;
    text-decoration: none;
    transition: background .22s, border-color .22s, box-shadow .22s;
}

.v3-more__c:hover {
    border-color: var(--v3-a-ring-line);
    background: #fff;
    box-shadow: 0 14px 28px -24px rgba(34, 31, 28, .55);
}

.v3-more__i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--v3-a-soft);
    color: var(--v3-a-text);
    font-size: 13px;
}

.v3-more__t {
    color: var(--v3-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.v3-more__d {
    margin-top: 5px;
    color: var(--v3-body);
    font-size: 12.5px;
    line-height: 1.45;
    /* Two lines, so one long description cannot set the height of its row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* margin-top: auto is what holds the footers on one line across a row. */
.v3-more__f {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
}

.v3-more__n {
    color: var(--v3-muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.v3-more__go {
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--v3-a-soft);
    transition: background .22s, transform .22s cubic-bezier(.2, .7, .3, 1);
}

.v3-more__go::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 2px solid var(--v3-a-text);
    border-right: 2px solid var(--v3-a-text);
    transform: rotate(45deg);
}

.v3-more__c:hover .v3-more__go { background: var(--v3-a-ring); transform: translateX(3px); }

@media (max-width: 640px) {
    .v3-crumbs { margin-bottom: 18px; font-size: 12.5px; }
    .v3-cross { margin-top: 40px; padding: 18px 20px; }
    .v3-more { padding: 44px 0 56px; }
    .v3-more__head { align-items: flex-start; }
    /* 38px is under the 44px a thumb needs. */
    .v3-more__b { width: 44px; height: 44px; }
    .v3-more__g { margin: 0 -20px; padding: 4px 20px; scroll-padding-left: 20px; }
    /* Nearly a full card, with the next one showing: that edge is the only
       thing telling a phone reader the row scrolls at all. */
    .v3-more__c { flex-basis: 78%; }
}

/*
 * The list starts close under the banner.
 *
 * .v3-band carries 86px of top padding, which is right for a band that has to
 * separate itself from the one above it and far too much under a hero the
 * page already reads as a header. The filter is the first thing a reader
 * wants here, so it sits near the panel rather than a screenful below it.
 *
 * Scoped away from the hub, whose own band sets its own spacing.
 */
.v3-band--list:not(.v3-band--hub) { padding-top: 30px; }

@media (max-width: 640px) {
    .v3-band--list:not(.v3-band--hub) { padding-top: 20px; }
}

/* ---------------------------------- the topic page's question list ---- */

/*
 * On a topic page the questions are the page, not a section of one — twelve
 * of them, stacked. As hairline-ruled rows they read as a table of contents
 * someone forgot to design: nothing to aim at, no sense of where one question
 * ends, and a 25px title repeated twelve times down a flat stripe.
 *
 * Each is a card here, and the open one is lit rather than merely taller.
 * Scoped to --list: the overview renders .v3-q as well and rows are right for
 * it, three or four to a stage band.
 */
.v3-band--list .v3-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*
 * These are the page's content, so they sit on it rather than in it.
 *
 * They used to be white with a 1px hairline and an 18px/6px radius — which is
 * exactly what the "Otros temas" cards below them are, so the foot of the page
 * read as the same component repeated in a smaller size. The question cards
 * carry a shadow and no border; the strip at the foot keeps the border and
 * loses the fill. Content floats, navigation stays flat.
 */
.v3-band--list .v3-q {
    border: 0;
    /* Evenly rounded rather than the brand's asymmetric corner: on a dozen
       stacked cards the sharp corner reads as a mistake repeated twelve
       times, and the soft one is what makes the column approachable. */
    border-radius: 18px;
    background: #fff;
    /* Keeps the answer inside the corners when the card is open. */
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(34, 31, 28, .05), 0 10px 22px -18px rgba(34, 31, 28, .45);
    transition: box-shadow .22s, transform .22s cubic-bezier(.2, .7, .3, 1);
}

.v3-band--list .v3-q:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(34, 31, 28, .06), 0 20px 36px -24px rgba(34, 31, 28, .6);
}

/* An open card is being read, not pointed at — it should not float away from
   the cursor while you are in it. */
.v3-band--list .v3-q[open]:hover { transform: none; }

/* The ring is a shadow too, so opening the card cannot shift its contents by
   the width of a border appearing. */
.v3-band--list .v3-q[open] {
    box-shadow: 0 0 0 1px var(--v3-a-ring-line),
                0 30px 60px -44px rgba(34, 31, 28, .9);
}

.v3-band--list .v3-q__q {
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
}

.v3-band--list .v3-q__q:hover .v3-q__t { color: var(--v3-a-text); }

/*
 * The opening of the answer, under the question on a closed row.
 *
 * Eighteen shut rows carrying nothing but a number and a question is a wall
 * you have to open at random to read. One line of the answer turns it into a
 * list you can scan — and it is the page's own words, so nothing is invented
 * to decorate it.
 */
.v3-band--list .v3-q__b { flex: 1 1 auto; min-width: 0; }

.v3-band--list .v3-q__peek {
    display: block;
    margin-top: 5px;
    color: var(--v3-muted);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    /* One line: the teaser is a hint, and a wrapping one would undo the even
       rhythm the column gets from rows of equal height. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .2s;
}

/* The full answer is directly below it once the card is open. */
.v3-band--list .v3-q[open] .v3-q__peek { display: none; }

@media (max-width: 640px) {
    /* A single line of teaser in a 300px column is four words and a gap. */
    .v3-band--list .v3-q__peek { display: none; }
}

/* The row slid right on hover when it had no edge of its own; now it has one,
   and the card does the responding. */
.v3-band--list .v3-q__q:hover { padding-left: 22px; }

/* The number as a token, not four loose grey digits. */
.v3-band--list .v3-q__i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--v3-a-soft);
    color: var(--v3-a-text);
    font-size: 12.5px;
    transition: background .22s, color .22s, transform .22s cubic-bezier(.2, .7, .3, 1);
}

.v3-band--list .v3-q__q:hover .v3-q__i { transform: scale(1.08); }

.v3-band--list .v3-q[open] .v3-q__i {
    background: var(--v3-a-mark);
    color: var(--v3-ink);
    transform: none;
}

/* 25px is a headline. Twelve of them in a column is a wall. */
.v3-band--list .v3-q__t {
    font-size: clamp(17px, 1.3vw, 20.5px);
    letter-spacing: -.3px;
}

.v3-band--list .v3-q__plus {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--v3-cream);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), background .22s;
}

.v3-band--list .v3-q__plus::before { width: 13px; height: 2px; background: var(--v3-a-text); border-radius: 1px; }
.v3-band--list .v3-q__plus::after  { width: 2px; height: 13px; background: var(--v3-a-text); border-radius: 1px; }
.v3-band--list .v3-q__q:hover .v3-q__plus { background: var(--v3-a-soft); }

/* Solid when it is open: the one control on the card should say which state
   it is in without the reader having to look at the card's height. */
.v3-band--list .v3-q[open] .v3-q__plus { background: var(--v3-a-mark); }
.v3-band--list .v3-q[open] .v3-q__plus::before { background: var(--v3-ink); }

/*
 * The answer sits in a pocket of its own — a cream panel inset inside the
 * white card, aligned under the title rather than under the number. A rule
 * would only have drawn another line across a page that already has twelve.
 */
.v3-band--list .v3-q__a {
    position: relative;
    margin: 0 10px 10px 66px;
    padding: 20px 22px 22px;
    border-radius: 14px;
    background: var(--v3-cream);
}

/* The link out to the full answer, as a target rather than a line of text. */
.v3-band--list .v3-q__more {
    margin-top: 16px;
    padding: 9px 16px 9px 18px;
    border-radius: 100px;
    background: var(--v3-a-soft);
    font-size: 14.5px;
    /* .v3-q__a a underlines every link in an answer and outranks .v3-q__more,
       so the pill inherited a rule written for body copy. */
    text-decoration: none;
    transition: background .22s;
}

.v3-band--list .v3-q__more:hover { background: var(--v3-a-ring); text-decoration: none; }

@media (max-width: 640px) {
    .v3-band--list .v3-q__q { gap: 12px; padding: 16px 16px; align-items: flex-start; }
    .v3-band--list .v3-q__i { width: 28px; height: 28px; font-size: 11.5px; margin-top: 2px; }
    .v3-band--list .v3-q__plus { width: 28px; height: 28px; margin-top: 2px; }
    .v3-band--list .v3-q__t { font-size: 16.5px; }
    .v3-band--list .v3-q__a { margin: 0 8px 8px; padding: 16px 16px 18px; }
    .v3-band--list .v3-filter { margin-bottom: 16px; }
    .v3-band--list .v3-filter__field { padding: 12px 18px; }
}

/* ------------------------------------------------- the topic filter ---- */

/*
 * It filters what is already on the page rather than navigating — on a page
 * of answers, a search that took you elsewhere would be undoing the design.
 *
 * Set as a rule, not as a pill. A bordered capsule is a widget dropped onto a
 * page; these two layouts are built on ink rules and large type, and the
 * filter is the first thing on them, so it uses the same two devices.
 */
.v3-filter {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 36px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--v3-ink);
    transition: border-color .22s;
}

.v3-filter[hidden] { display: none; }

/* The whole rule answers to focus, not a ring around the input. */
.v3-filter:focus-within { border-bottom-color: var(--v3-a-mark); }

.v3-filter__field {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.v3-filter__icon { flex: 0 0 auto; color: var(--v3-ink); font-size: 16px; }
.v3-filter:focus-within .v3-filter__icon { color: var(--v3-a-text); }

.v3-filter__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--v3-ink);
    font: inherit;
    font-size: clamp(18px, 1.5vw, 23px);
    font-weight: 700;
    letter-spacing: -.025em;
}

.v3-filter__input::placeholder { color: var(--v3-muted); font-weight: 600; }
.v3-filter__input:focus { outline: none; }

/* Safari draws its own decorations on type=search. */
.v3-filter__input::-webkit-search-decoration,
.v3-filter__input::-webkit-search-results-button { -webkit-appearance: none; }

.v3-filter__count {
    flex: 0 0 auto;
    margin: 0;
    color: var(--v3-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.v3-filter__count b { color: var(--v3-a-text); }

.v3-filter__empty {
    margin: 0 0 28px;
    padding: 26px 28px;
    border-left: 3px solid var(--v3-a-mark);
    background: var(--v3-a-soft);
    color: var(--v3-ink);
    font-size: 16px;
    font-weight: 600;
}

.v3-filter__empty[hidden] { display: none; }
.v3-filter__empty a { color: var(--v3-a-text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
    .v3-filter { margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
    .v3-filter__count { flex-basis: 100%; }
}

/*
 * On the card layout the same bar is a field, not a rule.
 *
 * The ink rule belongs to 4 and 6, which are built on rules and large type.
 * The accordion is built on soft white cards, so the filter borrows their
 * surface instead — same shadow, same corner language — and sits among them
 * rather than over them.
 */
.v3-band--list .v3-filter {
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 0;
    border-bottom: 0;
}

.v3-band--list .v3-filter__field {
    align-items: center;
    padding: 14px 22px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(34, 31, 28, .05), 0 10px 22px -18px rgba(34, 31, 28, .45);
    transition: box-shadow .22s;
}

.v3-band--list .v3-filter:focus-within .v3-filter__field {
    box-shadow: 0 0 0 2px var(--v3-a-ring-line),
                0 14px 28px -20px rgba(34, 31, 28, .55);
}

.v3-band--list .v3-filter__icon { color: var(--v3-a-text); }
.v3-band--list .v3-filter__input { font-size: 16px; font-weight: 600; letter-spacing: 0; }

.v3-band--list .v3-filter__empty {
    border-left: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(34, 31, 28, .05), 0 10px 22px -18px rgba(34, 31, 28, .45);
}

/* ---- the search, inside the dark banner */

/*
 * On the plate it is a white pill, not an ink rule: a hairline on a gradient
 * reads as a crack, and this is the one control the banner carries.
 */
.v3-hero .v3-filter {
    align-items: center;
    gap: 16px;
    margin: 34px 0 0;
    padding: 0;
    border-bottom: 0;
}

.v3-hero .v3-filter__field {
    align-items: center;
    flex: 1 1 360px;
    max-width: 540px;
    padding: 16px 24px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 18px 40px -24px rgba(34, 31, 28, .75);
}

.v3-hero .v3-filter:focus-within .v3-filter__field {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .75), 0 18px 40px -24px rgba(34, 31, 28, .75);
}

.v3-hero .v3-filter__icon { color: var(--v3-a-text); }
.v3-hero .v3-filter__input { font-size: 16.5px; font-weight: 600; letter-spacing: 0; }
.v3-hero .v3-filter__count { color: rgba(34, 31, 28, .66); }
.v3-hero .v3-filter__count b { color: var(--v3-ink); }

/* ---- the sector menu */

/*
 * The topics down the side instead of across the top. Sixteen chips above the
 * list was a filter the size of the thing it filtered; as a column it is
 * navigation, it costs no vertical space, and it can show where in the list
 * the reader currently is.
 */
.v3-hubgrid { display: block; }

@media (min-width: 1100px) {
    .v3-hubgrid {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }

    .v3-hubnav {
        position: sticky;
        /* Site navbar plus air. */
        top: 104px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* Below that there is no margin to put it in, and the topics are stacked in
   order anyway. */
@media (max-width: 1099px) {
    .v3-hubnav { display: none; }
}

.v3-hubnav__k {
    margin: 0 0 14px;
    padding-left: 12px;
    color: var(--v3-muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.v3-hubnav__l { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

.v3-hubnav__l a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 100px;
    color: var(--v3-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background .2s, color .2s;
}

/*
 * Text only, set as a numbered index.
 *
 * Icons were tried and were the wrong answer: sixteen small pictograms is
 * sixteen more things to look at in a column whose whole job is to be
 * scanned. The figures do what the icons were meant to — give every row its
 * own mark — and they are the same figures the topic carries out in the list,
 * so the margin and the page read as one sequence rather than two.
 */
/*
 * The two numbers have to look like different things.
 *
 * Set alike they were a row reading "01 … 4" with nothing to say that one is
 * a place in a list and the other a quantity. The position stays bare type in
 * a gutter — a marker, like a line number; the count becomes a chip, because
 * a number in a box reads as an amount.
 */
.v3-hubnav__num {
    /* A fixed gutter, so every name starts on one edge. */
    flex: 0 0 20px;
    color: #cbc5bc;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;
    transition: color .2s;
}

.v3-hubnav__t {
    flex: 1 1 auto;
    min-width: 0;
    /* Two lines at most: a long topic should not make its row twice the
       height of the fifteen around it. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.v3-hubnav__n {
    flex: 0 0 auto;
    align-self: center;
    min-width: 24px;
    padding: 3px 7px;
    /*
     * Outlined at rest, not just tinted.
     *
     * A cream fill on a cream column is a chip you can only see once the row
     * is hovered, so fifteen of the sixteen counts read as loose digits and
     * only the one under the cursor looked like a count. The border is what
     * makes it the same object in every row.
     */
    border: 1px solid var(--v3-line);
    border-radius: 100px;
    background: #fff;
    color: var(--v3-muted);
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-align: center;
    transition: background .2s, border-color .2s, color .2s;
}

.v3-hubnav__l a:hover { background: var(--v3-cream); color: var(--v3-ink); }
.v3-hubnav__l a:hover .v3-hubnav__num { color: var(--v3-a-text); }
.v3-hubnav__l a:hover .v3-hubnav__n { border-color: var(--v3-a-ring-line); color: var(--v3-a-text); }

/*
 * The current topic: a tint and a weight, not the solid ink bar the icon
 * version used. With no pictogram to carry it, a black pill in a column of
 * grey text is a blot rather than an indicator.
 */
.v3-hubnav__l a.is-on {
    background: var(--v3-a-soft);
    color: var(--v3-ink);
    font-weight: 700;
}

.v3-hubnav__l a.is-on .v3-hubnav__num { color: var(--v3-a-text); }

.v3-hubnav__l a.is-on .v3-hubnav__n {
    border-color: transparent;
    background: var(--v3-a-mark);
    color: var(--v3-ink);
}

/* ==================================== the hub, set like a topic page ==== */

/*
 * ?diseno=2 on /es/ayuda. One block per topic — its name, three of its
 * questions, and a way into the rest — on the same white-on-cream surface the
 * questions use and under the same gradient panel.
 *
 * The three questions are the point. A name and a count tell a reader which
 * topic sounds closest; three real questions tell them whether it is the one,
 * and let the ones they recognise be reached in a single click instead of two.
 */

.v3-band--hub { padding-top: 40px; }

/*
 * A wider band than the rest of the page.
 *
 * At the shared 1100 the menu and the list were squeezed into one measure, so
 * the menu sat close to the topics and the topics had 772px to work with.
 * Widening the band pushes the menu out towards the margin and gives the
 * extra width to the list rather than to the gap.
 */
.v3-band--hub .v3-wrap { max-width: 1400px; }
.v3-band--hub .v3-filter { margin-bottom: 26px; }

.v3-hub { display: flex; flex-direction: column; gap: 14px; }

.v3-hub__c {
    padding: 22px 24px 20px;
    /* Clears the navbar when the side menu jumps to one. */
    scroll-margin-top: 100px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(34, 31, 28, .05), 0 10px 22px -18px rgba(34, 31, 28, .45);
    transition: box-shadow .22s;
}

.v3-hub__c:hover {
    box-shadow: 0 1px 2px rgba(34, 31, 28, .06), 0 20px 36px -24px rgba(34, 31, 28, .6);
}

/* ---- the topic's own line */

.v3-hub__h { display: flex; align-items: center; gap: 18px; }

/*
 * The outlined numeral, the one the pliego layout uses.
 *
 * A filled 12px chip is a label; outlined at 46px it is a piece of the page's
 * typography, and it can be that large without shouting over the topic's name
 * precisely because it is hollow. Hinted off for the few systems that render
 * a stroke this thin as a solid blur.
 */
.v3-hub__k {
    flex: 0 0 auto;
    min-width: 62px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--v3-a-mark);
    font-size: 46px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    line-height: 1;
    transition: -webkit-text-stroke-color .22s;
}

.v3-hub__c:hover .v3-hub__k { -webkit-text-stroke-color: var(--v3-a-text); }

.v3-hub__b { flex: 1 1 auto; min-width: 0; }

.v3-hub__t {
    margin: 0;
    color: var(--v3-ink);
    font-size: 19.5px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.25;
}

.v3-hub__d {
    display: block;
    margin-top: 3px;
    color: var(--v3-body);
    font-size: 15px;
    line-height: 1.45;
    /* A hint, not a paragraph: the questions below say the rest. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v3-hub__n {
    flex: 0 0 auto;
    color: var(--v3-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---- the three questions */

.v3-hub__q {
    margin: 16px 0 0;
    /* Lined up under the topic's name, not under its numeral. */
    padding: 0 0 0 80px;
    list-style: none;
}

/*
 * Every question is in the markup so the filter can reach it; .is-preview is
 * what keeps the hub from being a copy of every topic page. /js/ayuda.js takes
 * the class off while a search is running and puts it back when the field is
 * cleared.
 */
.v3-hub__q.is-preview > li:nth-child(n + 4) { display: none; }

/* app.css's old reset puts display: block back on these. */
.v3-hub__q > li[hidden] { display: none; }

.v3-hub__q a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px 11px 0;
    border-top: 1px solid var(--v3-line);
    color: var(--v3-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s, padding .2s cubic-bezier(.2, .7, .3, 1);
}

.v3-hub__q a:hover { padding-left: 8px; color: var(--v3-a-text); }

.v3-hub__qa {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0;
    transform: rotate(45deg) translate(-3px, 3px);
    transition: opacity .2s, transform .2s cubic-bezier(.2, .7, .3, 1);
}

.v3-hub__q a:hover .v3-hub__qa { opacity: 1; transform: rotate(45deg) translate(0, 0); }

/* ---- the way into the rest */

.v3-hub__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0 80px;
    padding: 10px 11px 10px 20px;
    border-radius: 100px;
    background: var(--v3-a-soft);
    color: var(--v3-a-text);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .22s;
}

.v3-hub__all:hover { background: var(--v3-a-ring); color: var(--v3-a-text); }

.v3-hub__go {
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.v3-hub__go::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 2px solid var(--v3-a-text);
    border-right: 2px solid var(--v3-a-text);
    transform: rotate(45deg);
}

.v3-hub__all:hover .v3-hub__go { transform: translateX(3px); }

/* app.css's old reset puts display: block back on these. */
.v3-hub__c[hidden] { display: none; }

@media (max-width: 640px) {
    .v3-band--hub { padding-top: 26px; }
    .v3-hub { gap: 10px; }
    .v3-hub__c { padding: 18px 18px 16px; }
    .v3-hub__h { gap: 12px; }
    .v3-hub__k { min-width: 46px; font-size: 34px; }
    .v3-hub__t { font-size: 17.5px; }
    .v3-hub__d { font-size: 14px; }
    .v3-hub__n { display: none; }
    /* No room for the hanging indent in a 375px card. */
    .v3-hub__q { padding-left: 0; }
    .v3-hub__all { margin-left: 0; }
}

/* ---- topic hero: the mark, and the count above the name */

.v3-hero__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

/*
 * The topic's own mark, in the glass circle the rest of the site uses. It is
 * what stops this hero being a line of text on a dark rectangle.
 */
.v3-hero__mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--v3-a-kicker);
    font-size: 25px;
}

.v3-hero--topic .v3-hero__title { margin: 0; }

/* ---- "read the full answer" */

.v3-q__more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    color: var(--v3-a-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.v3-q__more:hover { text-decoration: underline; text-underline-offset: 3px; }

.v3-q__more-arrow {
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.v3-q__more:hover .v3-q__more-arrow { transform: rotate(45deg) translate(2px, -2px); }

/* ===================================================== one question ==== */

/*
 * The answer page is set as an article, not as a band of the hub: one column,
 * a short measure and no dark hero. The reader arrived with a question and
 * should meet the answer, not another doorway.
 */
.v3-answer { padding: 48px 0 80px; background: var(--v3-cream); }

.v3-answer__wrap { max-width: 760px; }

.v3-crumbs--light { color: var(--v3-muted); margin-bottom: 30px; }
.v3-crumbs--light a { color: var(--v3-body); }
.v3-crumbs--light a:hover { color: var(--v3-ink); }
.v3-crumbs--light .v3-crumbs__sep { background: var(--v3-line); }

.v3-answer__head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 26px;
}

.v3-answer__mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--v3-a-soft);
    color: var(--v3-a-text);
    font-size: 20px;
}

.v3-answer__title {
    margin: 0;
    color: var(--v3-ink);
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

/* The short answer leads, larger and darker than the detail beneath it. */
.v3-answer__short {
    margin: 0 0 28px;
    padding-left: 18px;
    border-left: 3px solid var(--v3-a-mark);
    color: var(--v3-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.1px;
}

/* ---- the numbers worth acting on */

/*
 * Two base rules that lived inside layouts which have since been deleted, so
 * they are written out here where the one surviving layout can see them. The
 * phone numbers are the only thing on these pages a reader actually does
 * something with, and without these they rendered as body text.
 */

/* The facts strip: the topic's phone numbers, lifted out of the prose. */
.v3-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 30px;
}

.v3-fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 22px;
    border-radius: 18px 5px 18px 5px;
    background: var(--v3-ink);
    color: #fff;
    text-decoration: none;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s;
}

/* The first is the one to call; the rest are the ones to know. */
.v3-fact:first-child {
    background: linear-gradient(118deg, #60bab6 0%, #7fc9b0 38%, #ffc376 100%);
    color: var(--v3-ink);
}

.v3-fact:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -24px rgba(34, 31, 28, .8);
}

.v3-fact__k {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .72;
}

.v3-fact__v {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

/* A phone number inside a paragraph, made tappable. */
.v3-tel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px 3px 10px;
    border-radius: 100px;
    background: var(--v3-a-soft);
    color: var(--v3-a-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    transition: background .2s;
}

.v3-tel:hover { background: var(--v3-a-ring); color: var(--v3-a-text); }

/* The handset, drawn as a mask so it takes the link's own colour. */
.v3-tel__i {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background: currentColor;
    mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

/* ---- previous / next */

.v3-pager {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 48px;
}

.v3-pager__a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--v3-line);
    border-radius: 16px 6px 16px 6px;
    background: #fff;
    text-decoration: none;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), border-color .22s;
}

.v3-pager__a:hover { transform: translateY(-3px); border-color: var(--v3-a-ring-line); }
.v3-pager__a--next { text-align: right; }

.v3-pager__k {
    color: var(--v3-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.v3-pager__q { color: var(--v3-ink); font-size: 15.5px; font-weight: 700; line-height: 1.35; }

/*
 * The way back out of an answer, and on a phone the main one — so it gets a
 * 44px target rather than the 23px a bare text link was giving it. The box
 * grows, the underline does not: the padding is pulled back by an equal
 * negative margin so the text still starts on the column's left edge.
 */
.v3-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 24px;
    margin-left: -10px;
    padding: 0 10px;
    color: var(--v3-a-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 640px) {
    .v3-hero__head { gap: 14px; }
    .v3-hero__mark { width: 52px; height: 52px; font-size: 20px; }
    .v3-answer { padding: 32px 0 56px; }
    .v3-answer__head { gap: 14px; margin-bottom: 20px; }
    .v3-answer__mark { width: 44px; height: 44px; font-size: 17px; }
    .v3-answer__short { font-size: 18px; padding-left: 14px; }
    .v3-pager { margin-top: 36px; }
    .v3-pager__a--next { text-align: left; }
}

/* ======================================== answer page: wider + bolder ==== */

/*
 * The measure, everywhere. 760px was a book's column on a page that is not a
 * book: these answers carry lists, tables and phone numbers, and the extra
 * width stops a four-item list becoming eight wrapped lines.
 */
.v3-answer__wrap { max-width: 920px; }

/* The block version is hidden unless a layout asks for it. */
.v3-blocks { display: none; }

/* ======================================================= K: portada ==== */

/*
 * The one the others were circling.
 *
 * The earlier layouts all treated the page as a document to be organised —
 * rules, columns, indexes. The reason they read as pale is that they never
 * commit to anything: white ground, thin grey lines, type at one size. This
 * one commits. The question sits on the brand's own gradient at a size you
 * cannot ignore, the answer rides up over it on a card, and each step carries
 * its number as a huge ghosted numeral behind the heading.
 *
 * Same palette, same radius language, same content. Only the confidence is
 * different.
 */
/*
 * Three numbers the whole card is built from.
 *
 * They were literals, tuned against a 1320px column and still in force at
 * 700 — which left a tablet with a 180px gutter and a 132px figure eating a
 * third of its width. Declared here they step down together, and the lead's
 * inset is derived from them rather than restated.
 */
.v3-answer--k {
    --k-pad: 64px;      /* the card's own side padding */
    --k-gutter: 180px;  /* the column kept clear for the numeral */
    --k-num: 132px;
    padding: 0 0 90px;
    background: var(--v3-cream);
}

@media (max-width: 1180px) {
    .v3-answer--k { --k-pad: 44px; --k-gutter: 132px; --k-num: 98px; }
}

@media (max-width: 900px) {
    .v3-answer--k { --k-pad: 30px; --k-gutter: 100px; --k-num: 74px; }
}

.v3-answer--k .v3-answer__wrap { max-width: 1320px; }
.v3-answer--k .v3-answer__col { position: relative; }

/* ---- the gradient plate */

/*
 * The plate is the cover element, not a fixed-height pseudo on the article.
 *
 * It used to be 420px tall whatever the question was, which is fine for a
 * three-word title and wrong for a three-line one: the heading ran to the
 * bottom edge and the card below it started on the cream instead of riding
 * over the colour. As the cover's own background it is exactly as tall as the
 * crumbs and the heading, plus the overlap the card needs — so it adapts to
 * the title rather than the title having to fit it.
 *
 * Full width without any 100vw trick, because the cover is a direct child of
 * the article rather than of the centred column. That is what went wrong the
 * last time this was full-bleed.
 */
.v3-answer--k {
    /* Declared here, not on the cover: the column that has to pull itself up
       by --k-solape is the cover's sibling, not its child, so a property set
       on the cover would never reach it. */
    --k-aire: 54px;
    --k-solape: 86px;

    position: relative;
    overflow-x: clip;
}

/*
 * Two distances, not one.
 *
 * The padding was the overlap exactly, so the card's top edge landed on the
 * heading's last line and the title read as if it were sitting on the card.
 * The padding is now the air under the heading PLUS the overlap: 54px of
 * gradient the reader can see between the two, and 86px more behind the card.
 */
.v3-answer__cover {
    position: relative;
    padding-bottom: calc(var(--k-aire) + var(--k-solape));
    background: linear-gradient(118deg, #60bab6 0%, #7fc9b0 38%, #ffc376 100%);
}

/*
 * A dot screen over the gradient. Flat colour at this size looks like a
 * placeholder; the texture is what makes it read as a printed surface.
 */
.v3-answer__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(34, 31, 28, .16) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .55;
    pointer-events: none;
}

.v3-answer__cover > * { position: relative; z-index: 1; }

/*
 * The column rides back up over the plate by the padding above it.
 *
 * On the card itself this did nothing: .v3-answer--k .v3-answer__short sets
 * margin: 0 further down the file and wins on order. The column is the right
 * place anyway — everything below the cover moves together.
 */
.v3-answer--k .v3-answer__col { margin-top: calc(var(--k-solape) * -1); }

.v3-answer--k .v3-crumbs {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 34px 0 0;
    color: rgba(34, 31, 28, .62);
}

.v3-answer--k .v3-crumbs a { color: rgba(34, 31, 28, .78); }
.v3-answer--k .v3-crumbs a:hover { color: var(--v3-ink); }
.v3-answer--k .v3-crumbs__sep { background: rgba(34, 31, 28, .35); }

.v3-answer--k .v3-answer__head {
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin: 0;
    padding: 30px 0 0;
}

.v3-answer--k .v3-answer__mark {
    width: 74px;
    height: 74px;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .5);
    color: var(--v3-ink);
    font-size: 28px;
    box-shadow: 0 14px 30px -18px rgba(34, 31, 28, .7);
}

/* The question, at the size a cover sets a headline. */
/*
 * The standfirst. Every answer is written with a headline under its question —
 * sometimes a crisp restatement ("El vehículo es de la compañía de renting, no
 * tuyo"), sometimes a summary of what the page covers. It is not the answer, so
 * it sits above it at a smaller weight, the way a deck sits under a headline.
 */
.v3-answer--k .v3-answer__deck {
    /*
     * Matched to the title's measure, not set in ch: the title is 22ch at a
     * clamped font-size, so a ch value here resolves against a different font
     * and the two columns never line up — the deck came out 484px under a
     * 702px heading, which read as a mistake.
     */
    max-width: 44rem;
    margin: 20px 0 0;
    color: rgba(34, 31, 28, .76);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.012em;
    text-wrap: pretty;
}

@media (max-width: 768px) {
    .v3-answer--k .v3-answer__deck {
        max-width: none;
        margin-top: 14px;
        font-size: 18px;
        line-height: 1.5;
    }
}

.v3-answer--k .v3-answer__title {
    max-width: 22ch;
    color: var(--v3-ink);
    font-size: clamp(2.25rem, 1.3rem + 4.6vw, 5rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .98;
}

/* ---- the card the answer rides in on */

.v3-answer--k .v3-answer__short {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 48px var(--k-pad) 38px;
    border: 0;
    border-radius: 32px 8px 0 0;
    background: #fff;
    color: var(--v3-ink);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.015em;
}

/*
 * The lead stops where the body copy stops.
 *
 * It used to run to a 46em measure of its own, which on this column came out
 * 66px longer than every paragraph under it — close enough to look like a
 * mistake rather than a difference. Adding the card's padding to the gutter
 * the steps reserve makes the two right edges agree at every width.
 */
.v3-answer--k .v3-answer__short {
    max-width: none;
    padding-right: calc(var(--k-pad) + var(--k-gutter));
}

/* A rule under the lead, in the accent, the width of a word. */
.v3-answer--k .v3-answer__short::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 26px;
    border-radius: 2px 0 2px 0;
    background: var(--v3-a-mark);
}

.v3-answer--k .v3-facts {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 0;
    padding: 0 var(--k-pad) 40px;
    background: #fff;
}

.v3-answer--k .v3-fact { border-radius: 18px 5px 18px 5px; }

.v3-answer--k .v3-blocks {
    display: block;
    position: relative;
    z-index: 1;
    padding: 8px var(--k-pad) 52px;
    border-radius: 0 0 32px 8px;
    background: #fff;
    box-shadow: 0 40px 80px -60px rgba(34, 31, 28, .9);
}

/*
 * The big editorial numeral, in a gutter reserved for it.
 *
 * What made this chaotic the first time was not the size: it was that nothing
 * made room for it. The numeral is a child of the heading, so a two-line
 * heading put it somewhere a one-line heading did not, and at 132px it came
 * down across the opening lines of the paragraph as well.
 *
 * So the block now keeps a column clear on the right — heading and body both
 * stop short of it — and the numeral is the only thing in it. The heading's
 * measure is held by padding rather than by max-width, because a capped box
 * is exactly what the numeral used to be positioned against.
 */
.v3-answer--k .v3-block {
    position: relative;
    padding: 36px var(--k-gutter) 36px 0;
    border-top: 1px solid var(--v3-line);
}

.v3-answer--k .v3-block:first-child { border-top: 0; padding-top: 0; }

.v3-answer--k .v3-block__n {
    position: absolute;
    /*
     * Inside the card, in the gutter the block reserves.
     *
     * An absolutely positioned box is offset from its containing block's
     * PADDING box, and .v3-block's padding box already includes the 180px
     * gutter — so the negative value this carried while it hung off the
     * heading now threw it clean out of the white. 8px off that edge puts it
     * back where it belongs.
     */
    right: 8px;
    /*
     * Centred on the step, not hung off its top.
     *
     * The numeral is a child of the heading, so the heading used to be what it
     * was positioned against — which is why it could only ever be aligned to
     * the first line. The heading drops out of the positioned flow below and
     * .v3-block becomes the containing block, so top/bottom here span the whole
     * step, short or long.
     */
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    color: var(--v3-a-soft);
    font-size: var(--k-num);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.06em;
    line-height: 1;
    pointer-events: none;
    /*
     * Behind the copy. .v3-blocks is a stacking context of its own, so a
     * negative index here still paints over the card's white background — it
     * only drops the figure below the text, which is the whole point.
     */
    z-index: -1;
}

.v3-answer--k .v3-block__h {
    display: block;
    margin: 0 0 16px;
    max-width: none;
    padding-right: 24%;
    color: var(--v3-ink);
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.v3-answer--k .v3-block__b {
    position: relative;
    z-index: 1;
    color: var(--v3-body);
    font-size: 18px;
    line-height: 1.78;
}

/*
 * The long answer's own furniture. The block body had no child styles at all,
 * so lists, links and sub-headings inside an answer fell back to the browser's
 * defaults while the accordion versions of the same markup were styled. These
 * mirror the .v3-q__a rules above so a question reads the same at both levels.
 */
.v3-answer--k .v3-block__b > :first-child { margin-top: 0; }
.v3-answer--k .v3-block__b > :last-child { margin-bottom: 0; }

.v3-answer--k .v3-block__b p { margin: 0 0 1.15em; }

.v3-answer--k .v3-block__b a {
    color: var(--v3-a-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.v3-answer--k .v3-block__b a:hover { text-decoration-thickness: 2px; }

/*
 * A section inside a numbered block. Pages that open their sections at ##
 * and subdivide at ### land here, so this is the second level of an answer —
 * it has to read as subordinate to the numbered heading above it.
 */
.v3-answer--k .v3-block__b h5 {
    margin: 1.6em 0 .7em;
    color: var(--v3-ink);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.3;
}

.v3-answer--k .v3-block__b ul,
.v3-answer--k .v3-block__b ol {
    margin: 0 0 1.15em;
    padding: 0 0 0 1.6em;
    list-style: none;
}

.v3-answer--k .v3-block__b li {
    position: relative;
    margin-bottom: .55em;
    line-height: 1.68;
}

.v3-answer--k .v3-block__b li:last-child { margin-bottom: 0; }

.v3-answer--k .v3-block__b ul > li::before {
    content: "";
    position: absolute;
    left: -1.15em;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 2px 0 2px 0;
    background: var(--v3-a-mark);
}

.v3-answer--k .v3-block__b ol { counter-reset: v3-astep; }
.v3-answer--k .v3-block__b ol > li { counter-increment: v3-astep; }

.v3-answer--k .v3-block__b ol > li::before {
    content: counter(v3-astep) ".";
    position: absolute;
    left: -1.6em;
    top: 0;
    width: 1.4em;
    color: var(--v3-a-text);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* A bold term that opens an item needs air before the explanation runs on. */
.v3-answer--k .v3-block__b li > strong:first-child { margin-right: .15em; }

/* ---- the three ways on from an answer */

/*
 * The cross-link to My EV Renting. It was a dark bar with two lines of text
 * crammed against its left edge and nothing to say it was a link at all; this
 * gives it a target to aim at and room to breathe.
 */
.v3-answer--k .v3-cross {
    position: relative;
    margin-top: 48px;
    padding: 30px 108px 30px 36px;
    border: 0;
    border-radius: 24px 6px 24px 6px;
    background: var(--v3-ink);
}

.v3-answer--k .v3-cross__k {
    color: var(--v3-a-mark);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.v3-answer--k .v3-cross__v { color: #fff; font-size: 22px; font-weight: 700; }

/* The disc and its chevron, drawn rather than shipped as an icon. */
.v3-answer--k .v3-cross::before {
    content: "";
    position: absolute;
    right: 32px;
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border-radius: 50%;
    background: var(--v3-a-mark);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.v3-answer--k .v3-cross::after {
    content: "";
    position: absolute;
    right: 50px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-top: 2.5px solid var(--v3-ink);
    border-right: 2.5px solid var(--v3-ink);
    transform: rotate(45deg);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.v3-answer--k .v3-cross:hover { transform: none; box-shadow: none; }
.v3-answer--k .v3-cross:hover::before { transform: scale(1.12); }
.v3-answer--k .v3-cross:hover::after { transform: rotate(45deg) translate(3px, -3px); }

/*
 * Previous / next.
 *
 * The grid underneath is auto-fit, so with only one of the two — which is
 * every first and last question — the single card stretched the full width and
 * its right-aligned text sat alone at the far end of an empty box. Halves that
 * stay halves, with the lone "next" pinned to its own side.
 */
.v3-answer--k .v3-pager {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.v3-answer--k .v3-pager__a {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    gap: 8px;
    padding: 24px 28px;
    border: 1px solid var(--v3-line);
    border-radius: 20px 6px 20px 6px;
    background: #fff;
}

.v3-answer--k .v3-pager__a--next { margin-left: auto; }
.v3-answer--k .v3-pager__a:hover { border-color: var(--v3-a-ring-line); }
.v3-answer--k .v3-pager__k { color: var(--v3-a-text); }
.v3-answer--k .v3-pager__q { font-size: 18px; line-height: 1.3; }

.v3-answer--k .v3-back { margin-top: 20px; }

@media (max-width: 760px) {
    .v3-answer--k { --k-aire: 34px; --k-solape: 64px; }
    .v3-answer--k .v3-answer__mark { width: 58px; height: 58px; font-size: 22px; }
    .v3-answer--k { --k-pad: 22px; --k-gutter: 0px; }
    .v3-answer--k .v3-answer__short { padding: 28px var(--k-pad) 24px; font-size: 19px; max-width: none; }
    .v3-answer--k .v3-facts { padding: 0 var(--k-pad) 26px; }
    .v3-answer--k .v3-blocks { padding: 4px var(--k-pad) 32px; }
    .v3-answer--k .v3-cross { padding: 24px 24px 76px; }
    .v3-answer--k .v3-cross::before { right: auto; left: 24px; top: auto; bottom: 24px; margin-top: 0; width: 40px; height: 40px; }
    .v3-answer--k .v3-cross::after { right: auto; left: 40px; top: auto; bottom: 42px; margin-top: 0; }
    .v3-answer--k .v3-cross__v { font-size: 19px; }
    .v3-answer--k .v3-pager { flex-direction: column; }
    .v3-answer--k .v3-pager__a { max-width: none; }
    .v3-answer--k .v3-pager__a--next { margin-left: 0; }
    /*
     * On a phone the numeral goes above the heading instead of beside it.
     *
     * A gutter wide enough for a figure costs a quarter of a 375px column, and
     * the lead had to be inset to match or the two measures disagreed — which
     * left every paragraph on the page wrapping after four words. In the flow
     * it costs one line and the text gets the full width back.
     */
    .v3-answer--k .v3-block { padding-right: 0; }
    .v3-answer--k .v3-block__h { padding-right: 0; }
    .v3-answer--k .v3-block__n {
        position: static;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        color: var(--v3-a-text);
        font-size: 14px;
        letter-spacing: .16em;
        line-height: 1;
        z-index: auto;
    }

    /* A rule off the number, so it reads as a step marker and not as a stray
       figure sitting on top of the question. */
    .v3-answer--k .v3-block__n::after {
        content: "";
        flex: 0 0 28px;
        height: 2px;
        border-radius: 1px;
        background: var(--v3-a-mark);
    }
}

/* ==========================================================================
   Closing band — three alternatives, switched with ?cierre=
   Each is CSS only: they share the markup the default already uses, so
   whichever wins, the losers delete without touching a template.
   ========================================================================== */

/* -- A. tarjeta ------------------------------------------------------------
 * The plate becomes a frame rather than the surface. Everything sits on one
 * white card inset inside it, and the mark the rest of the page uses for its
 * outlined numerals turns up here as an oversized question mark — the band
 * is, after all, the only place on the page that asks one.
 */
.v3-close--tarjeta {
    display: block;
    padding: 34px;
    text-align: left;
}

.v3-close--tarjeta::after {
    content: "";
    position: absolute;
    inset: 34px;
    border-radius: 34px;
    background: #fff;
    transform: none;
    width: auto;
    aspect-ratio: auto;
}

.v3-close--tarjeta .v3-close__say,
.v3-close--tarjeta .v3-close__do { position: relative; z-index: 2; }

.v3-close--tarjeta .v3-close__say {
    position: relative;
    padding: 58px 64px 0;
}

/* The question mark, cut from the plate itself rather than painted on it. */
.v3-close--tarjeta .v3-close__say::before {
    content: "?";
    position: absolute;
    top: -34px;
    right: 18px;
    z-index: -1;
    background: linear-gradient(118deg, #60bab6 0%, #7fc9b0 38%, #ffc376 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 260px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.v3-close--tarjeta .v3-close__title {
    max-width: 17ch;
    margin: 0 0 20px;
    font-size: clamp(30px, 3.6vw, 50px);
}

.v3-close--tarjeta .v3-close__text { max-width: 46ch; }

.v3-close--tarjeta .v3-close__do {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: none;
    margin: 26px 0 0;
    padding: 0 64px 58px;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.v3-close--tarjeta .v3-btn { width: auto; }
.v3-close--tarjeta .v3-btn--line { border-color: rgba(34, 31, 28, .2); }

@media (max-width: 860px) {
    .v3-close--tarjeta { padding: 16px; }
    .v3-close--tarjeta::after { inset: 16px; border-radius: 22px; }
    .v3-close--tarjeta .v3-close__say { padding: 40px 26px 0; }
    /* Small enough to clear the title, which at this width runs the full
       column: at 150px the mark sat behind the second line. */
    .v3-close--tarjeta .v3-close__say::before { font-size: 112px; top: -26px; right: 4px; opacity: .55; }
    .v3-close--tarjeta .v3-close__do { padding: 0 26px 40px; }
    .v3-close--tarjeta .v3-btn { width: 100%; }
}

/* -- B. charla -------------------------------------------------------------
 * A help centre's closing question is a question, so it is drawn as one: the
 * heading arrives as a message from the reader, the paragraph answers it from
 * our side, and the actions follow underneath. The tails are built from the
 * bubbles' own corners, so no extra markup is needed.
 */
.v3-close--charla {
    display: block;
    padding: 64px 28px 70px;
    text-align: center;
}

.v3-close--charla::after { display: none; }

.v3-close--charla .v3-close__say {
    display: grid;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.v3-close--charla .v3-close__title {
    justify-self: start;
    max-width: 20ch;
    margin: 0;
    padding: 24px 32px;
    border-radius: 28px 28px 28px 6px;
    background: #fff;
    box-shadow: 0 18px 44px -26px rgba(34, 31, 28, .7);
    font-size: clamp(24px, 2.7vw, 34px);
    letter-spacing: -1px;
    line-height: 1.15;
}

.v3-close--charla .v3-close__text {
    justify-self: end;
    max-width: 42ch;
    margin: 0;
    padding: 22px 30px;
    border-radius: 28px 28px 6px 28px;
    background: var(--v3-ink);
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
    text-align: left;
}

.v3-close--charla .v3-close__do {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 760px;
    margin: 30px auto 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.v3-close--charla .v3-btn { width: auto; }
.v3-close--charla .v3-btn--line {
    border-color: rgba(34, 31, 28, .28);
    background: rgba(255, 255, 255, .5);
}

@media (max-width: 860px) {
    .v3-close--charla { padding: 48px 20px 54px; }
    .v3-close--charla .v3-close__title { padding: 20px 24px; font-size: 23px; }
    .v3-close--charla .v3-close__text { padding: 18px 22px; font-size: 16px; }
    .v3-close--charla .v3-btn { width: 100%; }
}

/* -- C. titular ------------------------------------------------------------
 * No card, no bubble: the sentence itself does the work, set as large as the
 * band will carry it. A hairline closes it off and the paragraph and the two
 * actions share the line underneath, the way a masthead sits above its
 * standfirst.
 */
.v3-close--titular {
    display: block;
    padding: 76px 64px 72px;
    text-align: left;
}

.v3-close--titular::after { display: none; }

.v3-close--titular .v3-close__say { display: block; }

.v3-close--titular .v3-close__title {
    max-width: none;
    margin: 0 0 40px;
    font-size: clamp(38px, 7.2vw, 92px);
    letter-spacing: -3.4px;
    line-height: .96;
}

.v3-close--titular .v3-close__text {
    max-width: 38ch;
    margin: 0;
    padding-top: 28px;
    border-top: 1px solid rgba(34, 31, 28, .2);
    font-size: 17px;
}

.v3-close--titular .v3-close__do {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: none;
    margin: 24px 0 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.v3-close--titular .v3-btn { width: auto; }
.v3-close--titular .v3-btn--line { border-color: rgba(34, 31, 28, .3); }

/*
 * Wide enough, and the standfirst and the actions share one line under a
 * single rule. display:contents on the wrapper is what makes that possible —
 * the title and the paragraph have to be grid items of the band itself to sit
 * in different rows from each other while the buttons sit beside one of them.
 */
@media (min-width: 1000px) {
    .v3-close--titular {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0 56px;
    }

    .v3-close--titular .v3-close__say { display: contents; }

    .v3-close--titular .v3-close__title {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .v3-close--titular .v3-close__text {
        grid-column: 1;
        grid-row: 2;
        margin-top: 44px;
    }

    .v3-close--titular .v3-close__do {
        grid-column: 2;
        grid-row: 2;
        align-content: start;
        margin: 44px 0 0;
        padding-top: 28px;
        border-top: 1px solid rgba(34, 31, 28, .2);
    }
}

@media (max-width: 860px) {
    .v3-close--titular { padding: 52px 24px 56px; }
    .v3-close--titular .v3-close__title { letter-spacing: -1.6px; }
    .v3-close--titular .v3-btn { width: 100%; }
}

/* -- D. lista --------------------------------------------------------------
 * The two actions stop being buttons and become rows, the same hairline rows
 * the topic pages use for their questions. A help centre that lists its
 * questions can list its ways out too, and at this width a row is a far
 * bigger target than a pill.
 */
.v3-close--lista {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
    align-items: center;
    gap: 56px;
    padding: 70px 64px 74px;
    text-align: left;
}

.v3-close--lista::after { display: none; }

.v3-close--lista .v3-close__title { max-width: 14ch; }

.v3-close--lista .v3-close__do {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(34, 31, 28, .22);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.v3-close--lista .v3-btn {
    width: 100%;
    padding: 22px 6px;
    border: 0;
    border-bottom: 1px solid rgba(34, 31, 28, .22);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--v3-ink);
    font-size: 19px;
    letter-spacing: -.3px;
    transition: padding .2s, background .2s;
}

.v3-close--lista .v3-btn i {
    width: 42px;
    height: 42px;
    background: rgba(34, 31, 28, .07);
    font-size: 15px;
}

/* The arrow that tells the row it is a row and not a label. */
.v3-close--lista .v3-btn::after {
    content: "";
    width: 22px;
    height: 8px;
    margin-left: auto;
    background: currentColor;
    opacity: .45;
    transition: transform .2s, opacity .2s;
    clip-path: polygon(0 44%, 70% 44%, 70% 8%, 100% 50%, 70% 92%, 70% 56%, 0 56%);
}

.v3-close--lista .v3-btn:hover {
    transform: none;
    padding-left: 14px;
    background: rgba(255, 255, 255, .34);
    color: var(--v3-ink);
}

.v3-close--lista .v3-btn:hover::after { transform: translateX(5px); opacity: .85; }
.v3-close--lista .v3-btn:hover i { background: rgba(34, 31, 28, .12); }

@media (max-width: 1000px) {
    .v3-close--lista {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 58px 30px 56px;
    }

    .v3-close--lista .v3-close__title,
    .v3-close--lista .v3-close__text { max-width: none; }
}

@media (max-width: 860px) {
    .v3-close--lista { padding: 48px 22px 46px; }
    .v3-close--lista .v3-btn { padding: 18px 2px; font-size: 17px; }
    .v3-close--lista .v3-btn i { width: 36px; height: 36px; }
}

/* -- E. marco --------------------------------------------------------------
 * No card and no bubble: a ruled frame drawn inside the plate, the way a
 * notice is set inside a border rather than on a panel. Nothing is added on
 * top of the gradient, so the band keeps its colour end to end.
 */
.v3-close--marco {
    display: block;
    padding: 34px;
    text-align: center;
}

.v3-close--marco::after {
    content: "";
    position: absolute;
    inset: 34px;
    width: auto;
    aspect-ratio: auto;
    transform: none;
    border: 1px solid rgba(34, 31, 28, .38);
    border-radius: 28px;
    background: none;
    pointer-events: none;
}

.v3-close--marco .v3-close__say {
    position: relative;
    z-index: 2;
    padding: 62px 40px 0;
}

.v3-close--marco .v3-close__title {
    margin: 0 auto 18px;
    max-width: 18ch;
    font-size: clamp(28px, 3.4vw, 46px);
}

.v3-close--marco .v3-close__text { margin: 0 auto; max-width: 46ch; }

.v3-close--marco .v3-close__do {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: none;
    margin: 32px 0 0;
    padding: 0 40px 62px;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.v3-close--marco .v3-btn { width: auto; }

.v3-close--marco .v3-btn--line {
    border-color: rgba(34, 31, 28, .32);
    background: rgba(255, 255, 255, .42);
}

@media (max-width: 860px) {
    .v3-close--marco { padding: 14px; }
    .v3-close--marco::after { inset: 14px; border-radius: 16px; }
    .v3-close--marco .v3-close__say { padding: 42px 22px 0; }
    .v3-close--marco .v3-close__do { padding: 0 22px 42px; }
    .v3-close--marco .v3-btn { width: 100%; }
}

/* -- F. sobresale ----------------------------------------------------------
 * The action card hangs off the bottom edge of the plate and into the white
 * underneath it. The band stops being a sealed box, and the card stops being
 * something inside the band — it is the step from the help centre out to us.
 *
 * overflow has to go for that, so the dot screen is clipped by its own
 * radius instead of by the parent.
 */
.v3-close--sobresale {
    display: block;
    overflow: visible;
    padding: 72px 64px 0;
    text-align: center;
}

.v3-close--sobresale::before { border-radius: inherit; }
.v3-close--sobresale::after { display: none; }

.v3-close--sobresale .v3-close__title { margin: 0 auto 16px; max-width: 17ch; }
.v3-close--sobresale .v3-close__text { margin: 0 auto; max-width: 46ch; }

.v3-close--sobresale .v3-close__do {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: min(100%, 680px);
    margin: 42px auto -36px;
    padding: 26px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 34px 70px -30px rgba(34, 31, 28, .55);
}

.v3-close--sobresale .v3-btn { width: auto; }
.v3-close--sobresale .v3-btn--line { border-color: rgba(34, 31, 28, .18); }

/* The band's own bottom margin has to clear the overhang. */
.v3-close--sobresale { margin-bottom: 72px; }

@media (max-width: 860px) {
    .v3-close--sobresale { padding: 50px 22px 0; margin-bottom: 56px; }

    .v3-close--sobresale .v3-close__do {
        display: grid;
        gap: 10px;
        margin: 32px auto -28px;
        padding: 18px;
        border-radius: 24px;
    }

    .v3-close--sobresale .v3-btn { width: 100%; }
}

/*
 * Visually-hidden text. Bulma supplies .is-sr-only, but only in builds of
 * app.css that have it — the FAQ ships its own so the search box's label is
 * never left rendering as visible text next to the field.
 */
.is-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}