@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* Scoped to the public web. VinLite and Karoo Help retain their own systems. */
.public-web { --ink:#090b12; --surface:#101420; --panel:#151a28; --line:#2a3142; --text:#f1f5ff; --muted:#9aa9c2; --acid:#b6ff3c; --purple:#8a58ff; background:var(--ink); color:var(--text); font-family:'DM Sans',sans-serif; line-height:1.5; min-width:0; }
.public-web *, .public-web *::before, .public-web *::after { box-sizing:border-box; }
.public-web p { font-size:inherit !important; }.public-web :where(a) { color:inherit; }.public-web h1,.public-web h2,.public-web h3,.public-web p { margin:0; }.public-web h1,.public-web h2,.public-web h3 { font-family:'Barlow Condensed',Impact,sans-serif; font-weight:700; letter-spacing:-.035em; line-height:.93; }.public-web img { display:block; height:auto; max-width:100%; }.public-web :focus-visible { outline:3px solid var(--acid); outline-offset:3px; }
.public-site-header { background:rgba(9,11,18,.97); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }.public-site-header__inner,.public-site-nav__inner,.public-footer__inner,.public-main { margin:0 auto; max-width:1240px; width:min(100% - 48px,1240px); }.public-site-header__inner { align-items:center; display:flex; justify-content:space-between; min-height:68px; }.public-brand { align-items:center; display:inline-flex; font-family:'Barlow Condensed',sans-serif; font-size:2rem; font-weight:700; gap:9px; letter-spacing:-.04em; text-decoration:none; }.public-brand img { height:28px; width:28px; }.public-brand__tag { color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.11em; margin-left:8px; text-transform:uppercase; }
.public-site-nav { background:var(--ink); border-bottom:1px solid var(--line); }.public-site-nav__inner { align-items:center; display:flex; gap:20px; justify-content:space-between; min-height:55px; }.public-nav__links,.public-nav__actions,.public-footer__links { align-items:center; display:flex; gap:21px; list-style:none; margin:0; padding:0; }.public-nav__links a,.public-nav__actions a { color:var(--muted); font-size:.82rem; font-weight:700; letter-spacing:.035em; text-decoration:none; }.public-nav__links a:hover,.public-nav__actions a:hover { color:var(--text); }.public-nav__actions { gap:10px; }.public-nav__actions .public-nav__download { background:var(--acid); border-radius:6px; color:#182000; padding:8px 12px; }.public-nav__actions .public-nav__download:hover { background:#d0ff7c; color:#182000; }.public-nav__language { border-left:1px solid var(--line); display:flex; gap:8px; margin-left:3px; padding-left:12px; }.public-nav__language a { font-size:.72rem; }.public-nav__mobile { display:none; }.public-nav__separator { color:var(--muted); user-select:none; }
.public-main { overflow:hidden; }.public-section { border-top:1px solid var(--line); padding:clamp(72px,10vw,132px) 0; }.public-section:first-child { border-top:0; }.public-kicker { color:var(--acid); font-size:.72rem !important; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.public-display { font-size:clamp(3.8rem,8vw,7.6rem); max-width:830px; }.public-title { font-size:clamp(2.6rem,5vw,4.7rem); max-width:700px; }.public-lede { color:var(--muted); font-size:clamp(1.05rem,1.8vw,1.3rem) !important; line-height:1.58; margin-top:25px; max-width:630px; }.public-copy { color:var(--muted); font-size:1rem !important; line-height:1.6; }.public-button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }.public-button { align-items:center; background:var(--acid); border:1px solid var(--acid); border-radius:7px; color:#1b2504; display:inline-flex; font-size:.83rem; font-weight:700; justify-content:center; letter-spacing:.04em; min-height:47px; padding:0 19px; text-decoration:none; }.public-button:hover { background:#d0ff7c; border-color:#d0ff7c; color:#111801; }.public-button--quiet { background:transparent; border-color:var(--line); color:var(--text); }.public-button--quiet:hover { background:var(--panel); border-color:var(--purple); color:var(--text); }
.public-hero { display:grid; gap:48px; grid-template-columns:minmax(0,.95fr) minmax(430px,1.05fr); min-height:min(760px,calc(100vh - 123px)); padding:clamp(62px,9vw,124px) 0 64px; position:relative; }.public-hero::after { background:var(--purple); content:''; height:360px; opacity:.14; position:absolute; right:-180px; top:60px; transform:rotate(31deg); width:350px; z-index:-1; }.public-hero__copy { align-self:center; }.public-hero__visual { align-items:center; display:flex; justify-content:center; min-height:440px; position:relative; }.public-shot { background:var(--panel); border:1px solid var(--line); border-radius:13px; overflow:hidden; }.public-shot img { height:100%; object-fit:cover; width:100%; }.public-shot--phone { box-shadow:24px 30px 0 #0c0f18; width:min(42%,255px); }.public-shot--hero-main { aspect-ratio:11 / 16; position:relative; transform:translateX(-18%); z-index:1; }.public-shot--hero-player { aspect-ratio:16 / 10; bottom:3%; position:absolute; right:0; width:min(70%,490px); }.public-shot--wide,.public-shot--tablet { aspect-ratio:16 / 10; }.public-shot--mobile { aspect-ratio:10 / 16; max-width:260px; }
.public-loop { display:grid; gap:1px; grid-template-columns:repeat(4,1fr); margin-top:53px; }.public-loop__item { background:var(--surface); border:1px solid var(--line); min-height:430px; padding:24px; position:relative; }.public-loop__item:nth-child(2n) { background:var(--panel); transform:translateY(28px); }.public-loop__number { color:var(--purple); font-family:'Barlow Condensed',sans-serif; font-size:1.05rem; font-weight:700; letter-spacing:.08em; }.public-loop h3 { font-size:2.55rem; margin-top:34px; }.public-loop p { color:var(--muted); font-size:.95rem !important; line-height:1.5; margin-top:13px; }.public-loop .public-shot { bottom:-55px; left:22px; position:absolute; width:calc(100% - 44px); }.public-loop .public-shot--mobile { bottom:-54px; left:auto; right:25px; width:58%; }.public-loop .public-shot--wide { aspect-ratio:16 / 11; }.public-loop-spacer { height:65px; }
.public-surfaces { display:grid; gap:16px; grid-template-columns:1.3fr .85fr .85fr; margin-top:48px; }.public-surface { background:var(--surface); border:1px solid var(--line); border-radius:10px; min-height:350px; padding:27px; }.public-surface--app { background:#151d1d; grid-row:span 2; }.public-surface--lite { border-top:3px solid var(--purple); }.public-surface--bike { border-top:3px solid var(--acid); }.public-surface h3 { font-size:2.6rem; margin:14px 0 24px; }.public-surface .public-shot { margin-top:27px; max-width:220px; }.public-surface--lite .public-shot { max-width:none; }
.public-guidance { align-items:center; display:grid; gap:clamp(35px,7vw,92px); grid-template-columns:minmax(250px,.8fr) minmax(0,1fr); }.public-guidance__text { padding-left:clamp(0px,6vw,70px); }.public-integrations { align-items:center; border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:0; margin-top:47px; }.public-integrations span { color:#d5dced; font-family:'Barlow Condensed',sans-serif; font-size:clamp(1.6rem,4vw,2.7rem); font-weight:600; letter-spacing:-.025em; padding:21px 32px 21px 0; }.public-integrations span + span { border-left:1px solid var(--line); padding-left:32px; }.public-community { background:var(--panel); border:1px solid var(--line); border-radius:12px; display:grid; gap:28px; grid-template-columns:1fr auto; margin-top:48px; padding:clamp(28px,5vw,58px); }.public-community h2 { font-size:clamp(2.5rem,5vw,4.4rem); max-width:620px; }.public-community .public-button-row { align-self:end; margin:0; }.public-final { background:var(--acid); color:#171f06; margin:0 calc((100vw - min(100vw - 48px,1240px)) / -2); padding:clamp(72px,12vw,140px) max(24px,calc((100vw - min(100vw - 48px,1240px)) / 2)); text-align:center; }.public-final .public-kicker { color:#40520f; }.public-final .public-title { font-size:clamp(3.2rem,8vw,7rem); margin:13px auto 0; }.public-final .public-button { background:#111709; border-color:#111709; color:var(--acid); }.public-final .public-button:hover { background:var(--purple); border-color:var(--purple); color:#120c1c; }
.public-product-hero { display:grid; gap:50px; grid-template-columns:.9fr 1.1fr; padding:clamp(75px,10vw,130px) 0; }.public-product-hero .public-shot { align-self:center; }.public-product-grid { display:grid; gap:16px; grid-template-columns:repeat(12,1fr); margin-top:48px; }.public-feature { background:var(--surface); border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column; grid-column:span 4; min-height:450px; overflow:hidden; padding:26px; }.public-feature:nth-child(2),.public-feature:nth-child(5) { background:var(--panel); grid-column:span 8; }.public-feature h3 { font-size:2.7rem; margin:12px 0 clamp(22px, 2.4vw, 26px); }.public-feature .public-shot { margin:auto -2px -2px; }.public-feature:nth-child(2) .public-shot,.public-feature:nth-child(5) .public-shot { max-width:76%; }.public-vinlite { background:#171229; border:1px solid #392e5a; border-radius:12px; display:grid; gap:38px; grid-template-columns:.88fr 1.12fr; margin-top:50px; padding:clamp(28px,5vw,56px); }.public-vinlite .public-kicker { color:#bda4ff; }
.public-vinlite__copy { display:flex; flex-direction:column; min-width:0; }
.public-vinlite__copy .public-lede { margin-top:18px; }
.public-vinlite__copy .public-copy--vinlite-second { color:var(--muted); font-size:1rem !important; line-height:1.6; margin:22px 0 0; max-width:630px; }
.public-vinlite__copy .public-button-row { margin-top:28px; }
.public-vinlite__visuals { align-items:center; display:flex; flex-direction:column; gap:clamp(20px, 2.6vw, 32px); min-width:0; width:100%; }
.public-vinlite__visuals .public-shot { margin:0; max-width:520px; width:100%; }
.public-vinlite__visuals .public-shot:first-child { margin-left:auto; margin-right:clamp(8px, 2vw, 22px); }
.public-vinlite__visuals .public-shot:last-child { margin-left:clamp(8px, 2vw, 22px); margin-right:auto; }
@media (max-width:900px) { .public-vinlite__visuals .public-shot, .public-vinlite__visuals .public-shot:first-child, .public-vinlite__visuals .public-shot:last-child { margin:0 auto; max-width:min(100%, 520px); } }
.public-help-hero { padding:clamp(70px,10vw,130px) 0 65px; }.public-help-search { margin-top:35px; max-width:680px; }.public-help-search label { display:block; font-size:.76rem; font-weight:700; letter-spacing:.07em; margin-bottom:9px; text-transform:uppercase; }.public-help-search input { background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--text); font:500 1rem 'DM Sans',sans-serif; min-height:62px; padding:0 18px; width:100%; }.public-help-search input:focus { border-color:var(--acid); box-shadow:5px 5px 0 var(--acid); outline:0; }.public-help-paths { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }.public-help-path { background:var(--surface); border:1px solid var(--line); border-radius:9px; min-height:225px; padding:25px; text-decoration:none; }.public-help-path:hover { border-color:var(--acid); transform:translateY(-3px); }.public-help-path:nth-child(3) { border-top:3px solid var(--purple); }.public-help-path h2 { font-size:2.25rem; margin:19px 0 13px; }.public-help-path p { color:var(--muted); font-size:.95rem !important; }.public-help-catalog { margin-top:78px; }.public-help-catalog .faq-type { border-top:1px solid var(--line); padding:36px 0; }.public-help-catalog .faq-type > h2 { font-size:clamp(2.5rem,5vw,4rem); }.public-help-catalog .faq-category { margin-top:30px; }.public-help-catalog .faq-category h3 { color:#ced7e9; font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:700; letter-spacing:.02em; }.public-help-catalog .faq-list { columns:2; list-style:none; margin:15px 0 0; padding:0; }.public-help-catalog .faq-item { break-inside:avoid; border-bottom:1px solid #202738; margin:0 !important; }.public-help-catalog .faq-item a { color:var(--muted); display:block; font-size:.93rem; padding:13px 0; text-decoration:none; }.public-help-catalog .faq-item a:hover { color:var(--acid); }.public-help-support { background:var(--panel); border-left:3px solid var(--acid); margin-top:48px; max-width:710px; padding:27px; }.public-help-support h2 { font-size:2.3rem; margin:10px 0; }
.public-secondary { min-height:67vh; padding:clamp(75px,11vw,145px) 0; }.public-secondary__content { border-left:1px solid var(--purple); max-width:800px; padding-left:clamp(22px,6vw,66px); }.public-secondary__content .public-title { font-size:clamp(3.2rem,7vw,6rem); }.public-secondary__content .public-copy { margin-top:20px; }.public-secondary__content .public-copy h2 { color:var(--text); font-size:2.15rem; margin:40px 0 15px; }.public-secondary__content .public-copy p { margin:14px 0; }.public-secondary__content .public-copy ul { color:var(--muted); list-style:square; margin:16px 0 0 22px; }.public-secondary__content .public-copy li { margin:10px 0; padding-left:5px; }.public-secondary__content .public-copy a { color:var(--acid); }
.public-footer { background:#07090f; border-top:1px solid var(--line); padding:56px 0 27px; }.public-footer__top { display:grid; gap:45px; grid-template-columns:1.1fr .9fr; }.public-footer h2 { font-size:2.8rem; }.public-footer p { color:var(--muted); font-size:.95rem !important; margin-top:12px; max-width:470px; }.public-footer__links { align-content:start; align-items:start; flex-wrap:wrap; gap:12px 24px; }.public-footer__links a { color:var(--muted); font-size:.83rem; text-decoration:none; }.public-footer__links a:hover { color:var(--acid); }.public-footer__form { display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:28px; max-width:610px; }.public-footer__form label { color:var(--muted); display:block; font-size:.73rem; font-weight:700; margin-bottom:6px; text-transform:uppercase; }.public-footer__form input,.public-footer__form textarea { background:var(--surface); border:1px solid var(--line); border-radius:6px; color:var(--text); font:inherit; padding:11px; width:100%; }.public-footer__form .public-footer__message { grid-column:1 / -1; }.public-footer__form .public-button { border:0; cursor:pointer; }.public-footer__bottom { border-top:1px solid var(--line); color:#66728a; display:flex; font-size:.74rem; justify-content:space-between; margin-top:42px; padding-top:20px; }
@media (max-width:900px) { .public-hero,.public-product-hero,.public-vinlite,.public-guidance { grid-template-columns:1fr; }.public-hero { min-height:auto; }.public-hero__visual { min-height:390px; }.public-loop { grid-template-columns:repeat(2,1fr); }.public-loop__item:nth-child(2n) { transform:translateY(0); }.public-surfaces,.public-help-paths { grid-template-columns:1fr 1fr; }.public-surface--app { grid-row:auto; }.public-feature,.public-feature:nth-child(2),.public-feature:nth-child(5) { grid-column:span 6; }.public-feature:nth-child(2) .public-shot,.public-feature:nth-child(5) .public-shot { max-width:100%; } }
@media (max-width:720px) { .public-site-header__inner,.public-site-nav__inner,.public-footer__inner,.public-main { width:min(100% - 32px,1240px); }.public-brand__tag,.public-site-nav__desktop { display:none; }.public-site-nav__inner { display:block; min-height:0; }.public-nav__mobile { display:block; }.public-nav__mobile summary { align-items:center; color:var(--text); cursor:pointer; display:flex; font-size:.83rem; font-weight:700; justify-content:space-between; letter-spacing:.05em; list-style:none; min-height:55px; }.public-nav__mobile summary::-webkit-details-marker { display:none; }.public-nav__mobile summary::after { color:var(--acid); content:'+'; font-size:1.35rem; }.public-nav__mobile[open] summary::after { content:'–'; }.public-nav__mobile-content { border-top:1px solid var(--line); padding:16px 0 20px; }.public-nav__mobile .public-nav__links,.public-nav__mobile .public-nav__actions { align-items:stretch; display:grid; gap:3px; }.public-nav__mobile .public-nav__links a,.public-nav__mobile .public-nav__actions a { display:flex; align-items:center; min-height:44px; padding:10px 0; }.public-nav__mobile .public-nav__separator { display:none; }.public-nav__mobile .public-nav__actions { margin-top:10px; }.public-nav__mobile .public-nav__download { justify-content:center; padding:11px 12px; text-align:center; }.public-nav__mobile .public-nav__language { border-left:0; margin:0; padding:8px 0; }.public-display { font-size:clamp(3.45rem,16vw,5.6rem); }.public-hero { gap:25px; padding-top:60px; }.public-hero__visual { min-height:330px; }.public-shot--hero-main { width:47%; }.public-shot--hero-player { width:68%; }.public-loop,.public-surfaces,.public-help-paths { grid-template-columns:1fr; }.public-loop__item { min-height:370px; }.public-community,.public-footer__top { grid-template-columns:1fr; }.public-community .public-button-row { margin-top:7px; }.public-feature,.public-feature:nth-child(2),.public-feature:nth-child(5) { grid-column:span 12; min-height:400px; }.public-help-catalog .faq-list { columns:1; }.public-footer__form { grid-template-columns:1fr; }.public-footer__bottom { flex-direction:column; gap:7px; } }
@media (prefers-reduced-motion:reduce) { .public-web *, .public-web *::before, .public-web *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }

/* Phase 1 visual tuning: darker actions and more dimensional, product-led surfaces. */
.public-web {
    --acid: #a8d960;
    --acid-bright: #b6ff3c;
    --acid-ink: #e3ffc1;
    background:
        radial-gradient(900px 540px at 8% -9%, rgba(138, 88, 255, .14), transparent 68%),
        radial-gradient(760px 520px at 92% 18%, rgba(168, 217, 96, .07), transparent 70%),
        linear-gradient(180deg, #0b0e17 0%, var(--ink) 31%, #0b0d15 100%);
}

.public-site-header { background: rgba(9, 11, 18, .985); }
.public-site-header__inner { min-height: 74px; }
.public-brand { gap: 11px; font-size: 2.45rem; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.public-brand__icon { align-items: center; border-right: 1px solid #343d52; display: inline-flex; height: 42px; padding-right: 12px; }
.public-brand img { height: 40px; width: 40px; }
.public-brand__name { transform: translateY(-1px); }
.public-brand__tag { border-left: 1px solid #343d52; font-size: .64rem; letter-spacing: .13em; margin-left: 4px; padding-left: 13px; }

.public-nav__actions .public-nav__download,
.public-button {
    background: #1b2815;
    border-color: #799a47;
    color: var(--acid-ink);
}
.public-nav__actions .public-nav__download:hover,
.public-button:hover {
    background: #283b1d;
    border-color: var(--acid-bright);
    color: #f3ffe4;
}
.public-button--quiet { background: transparent; border-color: #39445a; color: var(--text); }
.public-button--quiet:hover { background: #171d2b; border-color: var(--purple); color: var(--text); }

.public-main { position: relative; }
.public-section { position: relative; }
.public-section::before {
    background: radial-gradient(600px 340px at 94% 10%, rgba(138, 88, 255, .055), transparent 72%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}
.public-section > * { position: relative; }
.public-section:nth-of-type(even)::before { background: radial-gradient(560px 360px at 5% 40%, rgba(168, 217, 96, .045), transparent 73%); }
.public-section { padding: clamp(78px, 9vw, 118px) 0; }
.public-hero { gap: clamp(42px, 6vw, 74px); }
.public-loop { margin-top: 47px; }
.public-loop-spacer { height: 78px; }
.public-guidance { min-height: 530px; }

.public-shot { background: #0b0e16; }
.public-shot img { object-fit: contain; object-position: center; }
.public-shot--phone,
.public-shot--mobile,
.public-shot--hero-main { aspect-ratio: 5 / 8; }
.public-shot--wide,
.public-shot--tablet,
.public-shot--hero-player,
.public-loop .public-shot--wide { aspect-ratio: 16 / 10; }
.public-shot--hero-main img { object-position: center top; }
.public-product-hero .public-shot img,
.public-feature .public-shot img { object-position: center top; }
.public-shot--baldomero { border-color: #594485; box-shadow: 20px 24px 0 #0d111d; max-width: 286px; }
.public-shot--baldomero img { object-fit: contain; object-position: center top; }
.public-feature { min-height: 430px; }
.public-feature .public-shot { align-self: flex-start; }

.public-final {
    background:
        radial-gradient(740px 280px at 50% 0%, rgba(168, 217, 96, .13), transparent 72%),
        linear-gradient(135deg, #111824 0%, #101620 55%, #17152a 100%);
    border-bottom: 1px solid #344455;
    border-top: 1px solid #496436;
    color: var(--text);
    position: relative;
}
.public-final .public-kicker { color: var(--acid); }
.public-final .public-button { background: #24371b; border-color: #89ad51; color: var(--acid-ink); }
.public-final .public-button:hover { background: #304724; border-color: var(--acid-bright); color: #f3ffe4; }

@media (max-width: 720px) {
    .public-site-header__inner { min-height: 66px; }
    .public-brand { font-size: 2.15rem; gap: 9px; }
    .public-brand__icon { height: 36px; padding-right: 10px; }
    .public-brand img { height: 34px; width: 34px; }
    .public-guidance { min-height: 0; }
    .public-shot--baldomero { margin: 0 auto; max-width: 250px; }
}

/* Header refinement: the supplied round mark leads; the name remains plain text, not a fabricated wordmark. */
.public-brand { font-family: 'DM Sans', sans-serif; font-size: 1.72rem; font-weight: 700; gap: 10px; letter-spacing: -.065em; }
.public-brand__icon { border-right: 0; height: 48px; padding-right: 0; }
.public-brand img { height: 48px; width: 48px; }
.public-brand__name { transform: none; }
.public-brand__tag { border-left: 1px solid #343d52; font-size: .61rem; letter-spacing: .12em; margin-left: 5px; padding-left: 14px; }

/* Download is a text action with a quiet indicator, not a separate button. */
.public-nav__actions .public-nav__download--text {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #c8e79d;
    padding: 7px 0 6px;
    position: relative;
}
.public-nav__actions .public-nav__download--text::after {
    background: #8dae5c;
    bottom: 1px;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: background-color .16s ease, width .16s ease;
    width: 18px;
}
.public-nav__actions .public-nav__download--text:hover {
    background: transparent;
    border-color: transparent;
    color: #e7f6ce;
}
.public-nav__actions .public-nav__download--text:hover::after { background: var(--acid-bright); width: 100%; }

@media (max-width: 720px) {
    .public-brand { font-size: 1.58rem; gap: 8px; }
    .public-brand__icon { height: 40px; }
    .public-brand img { height: 40px; width: 40px; }
    .public-nav__mobile .public-nav__download--text { text-align: left; }
}

/* Home hierarchy: show the two real interfaces side by side, never as an accidental collage. */
.public-hero__visual {
    align-items: center;
    display: grid;
    gap: clamp(18px, 3vw, 34px);
    grid-template-columns: minmax(180px, .53fr) minmax(300px, 1fr);
    justify-content: stretch;
}
.public-hero__visual .public-shot--hero-main {
    justify-self: end;
    position: relative;
    transform: none;
    width: min(100%, 238px);
}
.public-hero__visual .public-shot--hero-player {
    align-self: center;
    bottom: auto;
    position: relative;
    right: auto;
    width: 100%;
}

/* Full-width editorial stories, not a row of small feature cards. */
.public-story {
    align-items: center;
    display: grid;
    gap: clamp(36px, 7vw, 100px);
    grid-template-columns: minmax(0, .88fr) minmax(280px, .72fr);
}
.public-story__copy { max-width: 610px; }
.public-story--creator {
    background:
        radial-gradient(520px 420px at 76% 50%, rgba(138, 88, 255, .12), transparent 70%),
        linear-gradient(105deg, #111624 0%, #101521 100%);
    border-bottom: 1px solid #273248;
    border-top: 1px solid #303b53;
    grid-template-columns: minmax(0, .82fr) minmax(340px, 1.05fr);
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
}
.public-story--creator::before { background: none; }
.public-story--creator .public-story__onboarding {
    justify-self: end;
    margin: 0;
    max-width: 620px;
    width: 100%;
}
.public-story--creator .public-story__onboarding img {
    aspect-ratio: 1122 / 1402;
    background: transparent;
    border: 0;
    border-radius: 12px;
    display: block;
    height: auto;
    object-fit: contain;
    object-position: center;
    width: 100%;
}
.public-story--routes { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); }
.public-story__route-visuals {
    align-items: end;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(130px, .34fr);
}
.public-story__route-visuals .public-shot--wide { width: 100%; }
.public-story__route-visuals .public-shot--mobile { justify-self: end; max-width: 190px; width: 100%; }
.public-story--tv {
    background: linear-gradient(120deg, #0e1520 0%, #15142a 100%);
    border-bottom: 1px solid #2d3151;
    border-top: 1px solid #313852;
    grid-template-columns: minmax(250px, .68fr) minmax(0, 1.32fr);
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
}
.public-story--tv::before { background: radial-gradient(560px 300px at 86% 8%, rgba(168, 217, 96, .05), transparent 70%); }
.public-story__tv-screen { justify-self: stretch; width: 100%; }

.public-surfaces { align-items: stretch; }
.public-surface--app .public-shot { max-width: 250px; }
.public-surface--lite .public-shot { min-width: min(100%, 330px); }
.public-integrations-section { padding-bottom: clamp(58px, 7vw, 86px); }
.public-community-section { border-top: 0; padding-top: 0; }
.public-community-section::before { background: radial-gradient(580px 380px at 90% 42%, rgba(138, 88, 255, .08), transparent 73%); }

@media (max-width: 900px) {
    .public-story,
    .public-story--routes,
    .public-story--tv { grid-template-columns: 1fr; }
    .public-story__copy { max-width: 680px; }
    .public-story--creator .public-story__onboarding { justify-self: center; max-width: 540px; }
    .public-story__route-visuals { max-width: 720px; }
    .public-story__tv-screen { max-width: 720px; }
}

@media (max-width: 720px) {
    .public-hero__visual { grid-template-columns: 1fr; min-height: 0; }
    .public-hero__visual .public-shot--hero-player { grid-row: 1; }
    .public-hero__visual .public-shot--hero-main { grid-row: 2; justify-self: start; margin-left: 9%; max-width: 154px; }
    .public-story--creator,
    .public-story--tv { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .public-story--creator .public-story__onboarding { justify-self: stretch; max-width: 100%; }
    .public-story__route-visuals { gap: 13px; grid-template-columns: minmax(0, 1fr) minmax(92px, .33fr); }
    .public-story__route-visuals .public-shot--mobile { max-width: 126px; }
}

/* Shared portrait hardware: every VinApp screen uses one near-edge-to-edge, full-source phone frame. */
.public-shot--phone,
.public-shot--mobile,
.public-shot--hero-main {
    aspect-ratio: 5 / 11;
    background: #05070b;
    border: 1px solid #4c586a;
    border-radius: 16px;
    box-shadow: 0 18px 32px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .16);
    isolation: isolate;
    overflow: hidden;
    padding: 1px;
    position: relative;
}
.public-shot--phone img,
.public-shot--mobile img,
.public-shot--hero-main img {
    background: #05070b;
    border: 0;
    border-radius: 12px;
    object-fit: contain;
    object-position: center;
}
.public-shot--tablet,
.public-shot--wide,
.public-shot--hero-player {
    background: #080b12;
    border: 5px solid #252d3c;
    border-radius: 18px;
    box-shadow: 14px 18px 0 #080b12, 0 13px 28px rgba(0, 0, 0, .26);
    overflow: hidden;
    padding: 5px;
}
.public-shot--tablet img,
.public-shot--wide img,
.public-shot--hero-player img {
    background: #05070b;
    border-radius: 9px;
    object-fit: contain;
    object-position: center;
}

/* Core loop: equal cards use inner copy and media zones; the outer card has no padding. */
.public-loop {
    align-items: stretch;
    gap: 16px;
    grid-auto-rows: 1fr;
}
.public-loop__item,
.public-loop__item:nth-child(2n) {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 598px;
    min-height: 598px;
    overflow: hidden;
    padding: 0;
    transform: none;
}
.public-loop__copy {
    flex: 0 0 auto;
    padding: 8px 24px 0;
}
.public-loop h3 { margin-top: 16px; }
.public-loop p { line-height: 1.32; margin-top: 4px; }
.public-loop__media {
    align-items: flex-end;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 0;
    padding: 12px 24px 48px;
}
.public-loop__media .public-shot,
.public-loop__media .public-shot--mobile {
    bottom: auto;
    left: auto;
    margin: 0;
    position: relative;
    right: auto;
    width: min(72%, 160px);
}

@media (max-width: 720px) {
    .public-loop__item,
    .public-loop__item:nth-child(2n) { height: 588px; min-height: 588px; }
}

/* VIN atmosphere: environmental depth remains behind the product interface. */
.public-web {
    background:
        radial-gradient(760px 460px at 8% 4%, rgba(138, 88, 255, .11), transparent 70%),
        radial-gradient(620px 420px at 92% 26%, rgba(168, 217, 96, .055), transparent 72%),
        linear-gradient(180deg, #0c1019 0%, #090b12 36%, #0b0d15 100%);
}
.public-section { border-top-color: rgba(69, 80, 103, .6); }
.public-section::before {
    background:
        radial-gradient(520px 280px at 94% 12%, rgba(138, 88, 255, .05), transparent 73%),
        radial-gradient(430px 250px at 4% 78%, rgba(168, 217, 96, .035), transparent 74%);
}
.public-section:nth-of-type(even)::before {
    background:
        radial-gradient(500px 260px at 5% 22%, rgba(168, 217, 96, .045), transparent 74%),
        radial-gradient(420px 280px at 95% 80%, rgba(138, 88, 255, .04), transparent 74%);
}
.public-web .public-kicker::after {
    background: linear-gradient(90deg, var(--acid), var(--purple));
    content: '';
    display: inline-block;
    height: 1px;
    margin: 0 0 3px 9px;
    width: 23px;
}

/* Familiar Vin places appear as quiet editorial light, never as page banners. */
.public-story--creator::before {
    background:
        radial-gradient(440px 280px at 84% 24%, rgba(138, 88, 255, .22), transparent 74%),
        linear-gradient(100deg, rgba(11, 15, 24, .8), rgba(11, 15, 24, .2)),
        url('/assets/img/vin-next/home_clean_hero_bg.png') 78% center / cover no-repeat;
    opacity: .11;
}
.public-story--routes::before {
    background: url('/assets/img/vin-next/bg_n630_road.webp') 76% center / cover no-repeat;
    opacity: .09;
}
.public-story--tv::before {
    background: url('/assets/img/vin-next/bg_analisis_la_cueva.webp') 80% center / cover no-repeat;
    opacity: .075;
}
.public-product-hero,
.public-help-hero,
.public-secondary {
    isolation: isolate;
    position: relative;
}
.public-product-hero::before,
.public-help-hero::before,
.public-secondary::before {
    background:
        radial-gradient(440px 260px at 88% 18%, rgba(138, 88, 255, .075), transparent 73%),
        radial-gradient(360px 240px at 8% 82%, rgba(168, 217, 96, .045), transparent 75%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}
.public-product-hero > *,
.public-help-hero > *,
.public-secondary > * { position: relative; z-index: 1; }
.public-product-hero .public-copy--self-coaching {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 14px;
    max-width: 630px;
}
.public-secondary::before {
    background:
        linear-gradient(90deg, rgba(10, 13, 20, .94), rgba(10, 13, 20, .78)),
        url('/assets/img/vin-next/home_bg_night.webp') 76% center / cover no-repeat;
    opacity: .14;
}

/* The close is dark, athletic and unmistakably Vin rather than fluorescent. */
.public-final {
    background:
        linear-gradient(105deg, rgba(13, 21, 18, .97), rgba(16, 20, 30, .88)),
        radial-gradient(600px 260px at 74% 5%, rgba(168, 217, 96, .12), transparent 72%),
        url('/assets/img/vin-next/bg_workout_vamos_vinagre.webp') center / cover no-repeat;
}
.public-final .public-kicker::before {
    background: linear-gradient(90deg, #d96255 0 33%, #a8d960 33% 66%, #e0c35c 66% 100%);
    content: '';
    display: inline-block;
    height: 3px;
    margin: 0 8px 3px 0;
    width: 18px;
}
.public-final .public-title { text-shadow: 0 2px 18px rgba(0, 0, 0, .24); }

/* The official icon is the public lockup; the adjacent text is a quiet descriptor. */
.public-brand { gap: 14px; }
.public-brand__icon { height: 56px; }
.public-brand img { height: 56px; width: 56px; }
.public-brand__tag {
    color: #8793a8;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.3;
    margin-left: 0;
    padding-left: 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .public-brand { gap: 0; }
    .public-brand__icon { height: 44px; }
    .public-brand img { height: 44px; width: 44px; }
    .public-brand__tag { display: none; }
}

/* Home hero: one editorial Vin expression, with the supplied round mark remaining the site lockup. */
.public-home .public-hero {
    isolation: isolate;
    overflow: visible;
}
.public-home .public-hero::before {
    background:
        radial-gradient(520px 300px at 84% 16%, rgba(168, 217, 96, .10), transparent 72%),
        radial-gradient(390px 250px at 98% 46%, rgba(216, 84, 75, .075), transparent 71%),
        radial-gradient(430px 260px at 70% 88%, rgba(224, 195, 92, .055), transparent 72%),
        repeating-linear-gradient(90deg, transparent 0 55px, rgba(155, 173, 205, .035) 56px, transparent 57px),
        repeating-linear-gradient(0deg, transparent 0 45px, rgba(155, 173, 205, .026) 46px, transparent 47px);
    content: '';
    inset: -48px -92px -60px -54px;
    pointer-events: none;
    position: absolute;
    z-index: -2;
}
.public-home .public-hero::after {
    background: linear-gradient(180deg, rgba(138, 88, 255, .10), rgba(168, 217, 96, .018));
    clip-path: polygon(0 78%, 12% 62%, 25% 68%, 40% 39%, 55% 54%, 69% 20%, 82% 38%, 100% 0, 100% 100%, 0 100%);
    height: 188px;
    opacity: .62;
    right: -96px;
    top: 21%;
    transform: none;
    width: min(56vw, 710px);
    z-index: -1;
}
.public-home .public-hero__copy,
.public-home .public-hero__visual { z-index: 1; }
.public-home .public-hero .public-kicker {
    align-items: center;
    display: flex;
    gap: 10px;
}
.public-home .public-hero .public-kicker::after {
    background: linear-gradient(90deg, #d8544b 0 33%, var(--acid) 33% 66%, #e0c35c 66% 100%);
    height: 3px;
    margin: 0;
    width: 34px;
}
.public-home #loop-title { white-space: pre-line; }
.public-home .public-hero .public-button-row { gap: 10px; }
.public-home .public-hero .public-button {
    border-radius: 4px;
    letter-spacing: .065em;
    min-height: 48px;
    padding: 0 21px;
}
.public-home .public-hero .public-button:not(.public-button--quiet) {
    background: linear-gradient(110deg, #1c2c16, #26391e);
    border-color: #8dab58;
    box-shadow: inset 2px 0 0 #d8544b, inset 4px 0 0 var(--acid), inset 6px 0 0 #e0c35c;
}

@media (max-width: 720px) {
    .public-home .public-hero::before { inset: -24px -42px -38px -30px; }
    .public-home .public-hero::after { height: 126px; right: -46px; top: 17%; width: 88vw; }
}

/* Editorial pauses are full-bleed light surfaces; only their inner copy follows the site grid. */
html:has(body.public-home) { overflow-x: clip; }
html:has(body.public-product) { overflow-x: clip; }
.public-home { overflow-x: hidden; }
.public-product { overflow-x: hidden; }
.public-home .public-main { overflow: visible; }
.public-product .public-main { overflow: visible; }
.public-home .public-break, .public-product .public-break {
    background: #f2f4ef;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #10141a;
    margin-left: calc(50% - 50vw);
    min-height: 170px;
    padding: 30px 0;
    width: 100vw;
}
.public-break__inner {
    margin: 0 auto;
    width: min(100% - 48px, 1240px);
}
.public-break__inner::before {
    background: var(--acid);
    content: '';
    display: block;
    height: 2px;
    margin-bottom: 13px;
    width: 20px;
}
.public-web .public-break__statement {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: clamp(1.875rem, 2.5vw, 2.25rem) !important;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.08;
    margin: 0;
    max-width: 920px;
}
.public-web .public-break__signature {
    color: #58615f;
    font-size: .68rem !important;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.35;
    margin: 13px 0 0;
    text-transform: uppercase;
}
.public-web .public-break__attribution {
    color: #58615f;
    font-size: .68rem !important;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.35;
    margin: 13px 0 0;
    text-transform: uppercase;
}
.public-break__attribution:empty { display: none; }

@media (max-width: 720px) {
    .public-break__inner { width: min(100% - 32px, 1240px); }
    .public-home .public-break, .public-product .public-break { min-height: 0; padding: 28px 0 30px; }
}

/* Public header: one text lockup, with a restrained descriptor rather than a second icon identity. */
.public-brand {
    gap: 15px;
    line-height: 1;
}
.public-brand__wordmark {
    color: #f1f5ff;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.075em;
    line-height: 1;
}
.public-brand__tag {
    align-self: center;
    border-left: 1px solid #343d52;
    margin-left: 0;
    padding-left: 15px;
}

/* Header download is a text action; the hero remains the filled conversion action. */
.public-site-nav .public-nav__download--text,
.public-site-nav .public-nav__download--text:hover {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #c8e79d;
}
.public-site-nav .public-nav__download--text:focus-visible::after,
.public-site-nav .public-nav__download--text:hover::after { width: 100%; }
.public-home .public-hero .public-button:not(.public-button--quiet) {
    background: #24371b;
    border-color: #89ad51;
    box-shadow: none;
    color: var(--acid-ink);
}
.public-home .public-hero .public-button:not(.public-button--quiet):hover {
    background: #304724;
    border-color: var(--acid-bright);
    color: #f3ffe4;
}

@media (max-width: 720px) {
    .public-brand { gap: 0; }
    .public-brand__wordmark { font-size: 1.58rem; }
    .public-brand__tag { display: none; }
}

/* /funcionalidades — CONNECT (05) vs USE IT WHERE YOU TRAIN (06): equal visual weight */
.public-product-grid .public-feature:nth-child(5),
.public-product-grid .public-feature:nth-child(6) {
    grid-column: span 6;
    min-height: 520px;
    height: auto;
}
.public-product-grid .public-feature:nth-child(5) .public-shot,
.public-product-grid .public-feature:nth-child(6) .public-shot {
    margin: 24px auto 0;
    max-width: 214px;
    width: min(58%, 214px);
    align-self: center;
    flex: 0 0 auto;
}
@media (max-width: 900px) {
    .public-product-grid .public-feature:nth-child(5),
    .public-product-grid .public-feature:nth-child(6) {
        grid-column: span 6;
    }
}
@media (max-width: 720px) {
    .public-product-grid .public-feature:nth-child(5),
    .public-product-grid .public-feature:nth-child(6) {
        grid-column: span 12;
        min-height: 0;
    }
}

/* /funcionalidades — REVIEW (03) vs ADAPT (04): tablet horizontal sisters */
.public-product-grid .public-feature:nth-child(3) .public-shot,
.public-product-grid .public-feature:nth-child(4) .public-shot,
.public-product-grid .public-feature:nth-child(8) .public-shot {
    aspect-ratio: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 24px 0 0;
    max-width: none;
    padding: 0;
    width: 100%;
    align-self: stretch;
    flex: 0 0 auto;
}

/* /funcionalidades — PLAN (01) through ADAPT (04): one balanced two-by-two composition. */
.public-product-grid .public-feature:nth-child(1),
.public-product-grid .public-feature:nth-child(2),
.public-product-grid .public-feature:nth-child(3),
.public-product-grid .public-feature:nth-child(4) {
    grid-column: span 6;
}
.public-product-grid .public-feature:nth-child(1) .public-shot,
.public-product-grid .public-feature:nth-child(3) .public-shot,
.public-product-grid .public-feature:nth-child(4) .public-shot {
    margin: 24px auto 0;
    max-width: 460px;
    width: min(100%, 460px);
    align-self: center;
}
.public-product-grid .public-feature:nth-child(2) .public-shot {
    margin: 24px auto 0;
    max-width: 430px;
    width: min(100%, 430px);
    align-self: center;
}
@media (max-width: 720px) {
    .public-product-grid .public-feature:nth-child(1),
    .public-product-grid .public-feature:nth-child(2),
    .public-product-grid .public-feature:nth-child(3),
    .public-product-grid .public-feature:nth-child(4) {
        grid-column: span 12;
    }
}

/* /funcionalidades — CHOOSE THE WORK (07) vs CHOOSE THE ROUTE (08): sister cards */
.public-product-grid .public-feature:nth-child(7),
.public-product-grid .public-feature:nth-child(8) {
    grid-column: span 6;
    min-height: 460px;
    height: auto;
}
.public-product-grid .public-feature:nth-child(7) .public-shot,
.public-product-grid .public-feature:nth-child(8) .public-shot {
    margin: 24px auto 0;
    max-width: 460px;
    width: min(92%, 460px);
    align-self: center;
    flex: 0 0 auto;
}
@media (max-width: 900px) {
    .public-product-grid .public-feature:nth-child(7),
    .public-product-grid .public-feature:nth-child(8) {
        grid-column: span 6;
    }
}
@media (max-width: 720px) {
    .public-product-grid .public-feature:nth-child(7),
    .public-product-grid .public-feature:nth-child(8) {
        grid-column: span 12;
        min-height: 0;
    }
}

/* Home hero — single composite device (tablet >> phone >> Karoo) */
.public-hero__visual {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 440px;
}
.public-hero__devices {
    margin: 0;
    background: transparent;
    border: 0;
    padding: 0;
    width: 100%;
    max-width: 640px;
    line-height: 0;
}
.public-hero__devices img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    background: transparent;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.34));
}
@media (max-width: 900px) {
    .public-hero__visual {
        justify-content: center;
        min-height: 380px;
    }
    .public-hero__devices {
        max-width: 560px;
    }
}
@media (max-width: 720px) {
    .public-hero {
        gap: 24px;
    }
    .public-hero__visual {
        justify-content: center;
        min-height: 0;
        padding: 0;
    }
    .public-hero__devices {
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Home surfaces — VinApp tablet now uses the shared .public-shot--tablet frame
   (see the .public-shot--tablet rules above). This figure's grid placement is
   defined under .public-home-surfaces below. */

.public-surface--bike .public-surface__karoo {
    margin: 22px auto 0;
    width: 100%;
    max-width: 210px;
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
}
.public-surface--bike .public-surface__karoo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    background: transparent;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32));
}
@media (max-width: 720px) {
    .public-surface--bike .public-surface__karoo {
        max-width: 180px;
        margin-top: 18px;
    }
}

/* Home surfaces — one featured VinApp surface over a weighted secondary row. */
.public-home-surfaces .public-surfaces {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
}
.public-home-surfaces .public-surface--app {
    align-items: center;
    display: grid;
    gap: clamp(8px, 1vw, 12px) clamp(28px, 5vw, 72px);
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto auto 1fr;
    min-height: 440px;
}
.public-home-surfaces .public-surface--app > .public-kicker,
.public-home-surfaces .public-surface--app > h3,
.public-home-surfaces .public-surface--app > .public-copy { grid-column: 1; }
.public-home-surfaces .public-surface--app > .public-kicker { grid-row: 1; }
.public-home-surfaces .public-surface--app > h3 {
    grid-row: 2;
    margin: 0 0 clamp(24px, 3vw, 32px);
}
.public-home-surfaces .public-surface--app > .public-copy {
    grid-row: 3;
    margin-top: 0;
}
.public-home-surfaces .public-surface--app .public-surface__tablet {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    max-width: none;
    width: 100%;
}
.public-home-surfaces .public-surface--lite .public-shot {
    max-width: none;
    min-width: 0;
    width: 100%;
}
.public-home-surfaces .public-surface__secondary {
    color: #7f8ca4;
    font-size: .84rem !important;
    margin-top: 14px;
}
@media (max-width: 900px) {
    .public-home-surfaces .public-surfaces {
        grid-template-columns: 1fr;
    }
    .public-home-surfaces .public-surface--app { gap: clamp(8px, 1vw, 12px) clamp(24px, 4vw, 42px); }
}
@media (max-width: 720px) {
    .public-home-surfaces .public-surfaces { grid-template-columns: 1fr; }
    .public-home-surfaces .public-surface--app {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }
    .public-home-surfaces .public-surface--app .public-surface__tablet {
        margin: 24px 0 0;
        width: 100%;
    }
}

/* Home VinApp tablet: belongs literally to the shared tablet system
   (.public-shot--tablet) — same border, radius, inset, shadow and 16/10 ratio.
   Only the grid placement above is Home-specific. */

/* /como-se-hizo-vin — narrative editorial, reuses public-web system; alternating rows, maps before/now, generous rhythm */
.public-history { display:block; }
.public-history__intro { margin-bottom: clamp(36px, 6vw, 64px); max-width: 1120px; }
.public-history__row.public-history__intro-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(22px, 4vw, 36px); }
.public-history__body { display:grid; gap: clamp(42px, 7vw, 84px); margin-top: clamp(28px, 5vw, 48px); max-width: 1120px; }
.public-history__row { align-items:center; display:grid; gap: clamp(22px, 4vw, 44px); grid-template-columns: minmax(0, 1.05fr) minmax(280px, .9fr); }
.public-history__row--text { grid-template-columns: 1fr; max-width: 780px; }
.public-history__row--reverse { grid-template-columns: minmax(280px, .9fr) minmax(0, 1.05fr); }
.public-history__row--maps { align-items:start; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.public-history__text .public-history__heading { color: var(--text); font-family:'Barlow Condensed',Impact,sans-serif; font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight:700; letter-spacing:-.03em; line-height:.95; margin:0 0 14px; text-transform:uppercase; }
.public-history__text .public-copy { margin-top: 12px; }
.public-history__text .public-copy:first-of-type { margin-top: 0; }
.public-history__shot { margin:0; width:100%; }
.public-history__shot img { object-fit: contain; }
.public-history__caption { color: #7f8ca4; font-size: .72rem !important; font-weight:600; letter-spacing:.04em; margin-top:10px; text-transform: uppercase; }
.public-history__shot .public-history__caption { margin-top:10px; text-align:left; }
.public-history__maps { display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
.public-history__maps .public-shot { margin:0; }
.public-history__close { border-top:1px solid var(--line); margin-top: 8px; max-width:780px; padding-top: clamp(36px, 6vw, 56px); }
.public-history__close .public-history__heading { color: var(--acid); font-size: clamp(1.9rem, 4vw, 2.9rem); }
.public-history__close .public-copy { margin-top: 14px; }
@media (max-width: 900px) {
    .public-history__row, .public-history__row--reverse, .public-history__row--maps { grid-template-columns: 1fr; }
    .public-history__maps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .public-history__body { gap: 48px; }
    .public-history__row { gap: 18px; }
    .public-history__maps { gap: 12px; grid-template-columns: 1fr; }
}

/* /como-se-hizo-vin — "2026 · VIN HOY" carousel.
   Concept: mazo de fotografías with coverflow perspective. The active slide
   is straight, centered, and slightly forward (translateZ); the immediate
   prev/next rotate around the Y axis (±14°), lean toward the center, sit
   slightly behind, and are scaled down a touch. Native scroll-snap drives
   mobile swipe (3D rotation stripped on small screens — the tilt breaks the
   snap visually and clips peek). Arrows (≥720px) drive the same JS path.
   No third-party libs, no autoplay, no page-level horizontal overflow. */
.public-history__today2026 {
    margin: 0 auto;
    max-width: 1120px;
    width: 100%;
}
.public-history__today2026-heading {
    color: var(--text);
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: .95;
    margin: 0 0 clamp(14px, 2vw, 22px);
    text-transform: uppercase;
}
.public-history__today2026-stage {
    margin: 0 auto;
    max-width: 100%;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    position: relative;
}
.public-history__today2026-track {
    align-items: center;
    display: flex;
    gap: clamp(24px, 4vw, 48px);
    list-style: none;
    margin: 0;
    min-height: clamp(440px, 50vw, 580px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: clamp(20px, 3vw, 36px) clamp(56px, 10vw, 140px);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.public-history__today2026-track::-webkit-scrollbar { display: none; }
.public-history__today2026-track:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.public-history__today2026-slide {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    position: relative;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.7,.2,1);
    transform-origin: center center;
    z-index: 1;
}
/* Non-active slides dim slightly. The 3D rotation + scale + recessed Z do the
   rest of the depth work, so we keep a gentle .78 instead of fading hard. */
.public-history__today2026-slide:not(.is-active) { opacity: .78; }
/* Active slide: face forward, lifted slightly toward the viewer (translateZ).
   This makes the protagonist pop without a planar rotate, and keeps its drop
   shadow larger to reinforce the "on top" reading. */
.public-history__today2026-slide.is-active {
    opacity: 1;
    transform: rotateY(0deg) scale(1) translateZ(28px);
    z-index: 3;
}
/* Adjacent 3D rotation. CSS adjacent-sibling combinators pick the slide
   immediately before / after the active one in DOM order (which matches the
   flex / scroll-snap visual order). The left neighbor (DOM before) rotates
   +14° around Y — its right edge faces the viewer, leaning toward center.
   The right neighbor mirrors that with -14°. Both shrink by 6% and push
   32px back so they read as "behind the hero" without disappearing. */
.public-history__today2026-slide + .is-active {
    transform: rotateY(14deg) scale(0.94) translateZ(-32px);
    z-index: 2;
}
.public-history__today2026-slide.is-active + .public-history__today2026-slide {
    transform: rotateY(-14deg) scale(0.94) translateZ(-32px);
    z-index: 2;
}
.public-history__today2026-figure { margin: 0; position: relative; }
.public-history__today2026-figure img {
    border-radius: clamp(8px, 1vw, 12px);
    box-shadow: 0 22px 52px rgba(0, 0, 0, .55), 0 3px 12px rgba(0, 0, 0, .35);
    display: block;
    height: auto;
    user-select: none;
}
/* Per-aspect sizing — width-driven. Height follows each image's native ratio
   (mobile 9:20, tablet 16:10, tv ~4:3) so no capture gets stretched or
   cropped. TV gets the widest slot so the domestic scene reads panoramic;
   tablet is mid-width; phone stays narrow. */
.public-history__today2026-slide[data-aspect="mobile"] .public-history__today2026-figure img {
    max-width: clamp(180px, 22vw, 240px);
}
.public-history__today2026-slide[data-aspect="tablet"] .public-history__today2026-figure img {
    max-width: clamp(360px, 50vw, 620px);
}
.public-history__today2026-slide[data-aspect="tv"] .public-history__today2026-figure img {
    max-width: clamp(440px, 64vw, 760px);
}
/* Arrows are desktop-only (≥720px). On mobile they are hidden — native swipe
   does the work. They sit absolutely inside the stage, never overflow the
   track horizontally. */
.public-history__today2026-arrow {
    align-items: center;
    background: rgba(15, 22, 36, .7);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: none;
    font: 700 26px/1 'Barlow Condensed', Impact, sans-serif;
    height: 44px;
    justify-content: center;
    transition: background 200ms, transform 200ms, opacity 200ms;
    width: 44px;
    z-index: 4;
}
.public-history__today2026-arrow:hover { background: rgba(15, 22, 36, .92); transform: translateY(-50%) scale(1.04); }
.public-history__today2026-arrow:active { transform: translateY(-50%) scale(.96); }
.public-history__today2026-arrow:disabled { opacity: .3; cursor: not-allowed; }
.public-history__today2026-arrow:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
@media (min-width: 720px) {
    .public-history__today2026-arrow {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .public-history__today2026-arrow--prev { left: clamp(8px, 1.4vw, 16px); }
    .public-history__today2026-arrow--next { right: clamp(8px, 1.4vw, 16px); }
}
.public-history__today2026-caption {
    color: #7f8ca4;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin: clamp(12px, 2vw, 20px) 0 0;
    min-height: 1.4em;
    text-align: center;
    text-transform: uppercase;
    transition: opacity 240ms ease;
}
.public-history__today2026-caption:empty { display: none; }
@media (max-width: 720px) {
    .public-history__today2026-track {
        gap: 14px;
        min-height: 420px;
        padding: 16px 28px;
    }
    /* On mobile the rotation breaks snap and clips the peek. Strip the 3D
       tilt; native scroll-snap does the navigation. Heights are capped so the
       viewport stays sensible on small phones. */
    .public-history__today2026-slide + .is-active,
    .public-history__today2026-slide.is-active + .public-history__today2026-slide {
        transform: none;
    }
    .public-history__today2026-slide:not(.is-active) { opacity: .55; }
    .public-history__today2026-slide[data-aspect="mobile"] .public-history__today2026-figure img {
        max-height: 460px;
        max-width: 220px;
    }
    .public-history__today2026-slide[data-aspect="tablet"] .public-history__today2026-figure img {
        max-height: 240px;
        max-width: 84vw;
    }
    .public-history__today2026-slide[data-aspect="tv"] .public-history__today2026-figure img {
        max-height: 220px;
        max-width: 92vw;
    }
}
@media (prefers-reduced-motion: reduce) {
    .public-history__today2026-slide,
    .public-history__today2026-track,
    .public-history__today2026-arrow,
    .public-history__today2026-caption { transition: none; }
}

/* Wide editorial variant of the secondary page content box. The default 800px
   text column (FAQ-style articles) stays untouched; this variant only widens
   the carrier for pages that pair copy with full-bleed photos. The 1120px
   ceiling mirrors /como-se-hizo-vin so editorial pages feel like one family. */
.public-secondary__content--editorial-wide {
    max-width: 1120px;
}

/* Single editorial row used by /comunidadVin and /equipoVinapp. One pair per
   franja: text 45% + photo 55% (or its reverse). Photos keep natural ratio,
   no forced crop. The H1 cap is lifted so a full breath like "La Comunidad
   Vin." fits in two lines on desktop. */
.public-editorial-row {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    margin-bottom: clamp(34px, 6vw, 56px);
}
.public-editorial-row--reverse {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.public-editorial-row > figure { margin: 0; }
.public-editorial-row .public-shot { width: 100%; }
.public-editorial-row .public-shot img {
    height: auto;
    object-fit: contain;
    object-position: center;
    width: 100%;
}
.public-editorial-row .public-title { max-width: none; }

@media (max-width: 900px) {
    .public-editorial-row,
    .public-editorial-row--reverse {
        align-items: start;
        gap: 22px;
        grid-template-columns: 1fr;
        margin-bottom: clamp(28px, 6vw, 44px);
    }
}

/* Brand lockup — minimal reusable product wordmark. 700/500 weights, same size/baseline/color, DM Sans, no italic/extra space. Scoped to .public-web. */
.public-web .brand-product { color: inherit; display: inline; font-family: 'DM Sans', sans-serif; font-size: inherit; font-style: normal; font-weight: inherit; letter-spacing: -0.02em; line-height: inherit; }
.public-web .brand-product__root { font-weight: 700; }
.public-web .brand-product__suffix { font-weight: 500; }
.public-web .brand-product--tv { color: inherit; display: inline; font-family: 'DM Sans', sans-serif; font-size: inherit; font-style: normal; letter-spacing: -0.02em; line-height: inherit; }
.public-web .brand-product--tv .brand-product__root { font-weight: 700; }
.public-web .brand-product--tv .brand-product__suffix { font-weight: 500; }
.public-web .brand-product--tv .brand-product__descriptor { font-weight: 400; }
/* Baldomero kicker — reuse editorial copy style instead of product kicker. */
.public-web .public-copy--self-coaching { color: var(--muted); font-size: 1rem !important; line-height: 1.6; }

/* funcionalidades — Producto hero night training 1448x1086: keep it wide/protagonist, no stretch */
.public-product-hero .public-shot--wide { aspect-ratio: 1448 / 1086; }

/* como-se-hizo-vin 2026 carousel — marco tablet (solo data-aspect="tablet"): bezel oscuro, padding responsive, borde tenue, radios y sombra suave. Alcance estricto: no afecta a Producto ni a mobile/TV */
.public-history__today2026-slide[data-aspect="tablet"] .public-history__today2026-figure {
  background: #090b10;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: clamp(16px, 1.6vw, 22px);
  padding: clamp(8px, 1vw, 14px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), 0 2px 12px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.public-history__today2026-slide[data-aspect="tablet"] .public-history__today2026-figure img {
  border-radius: clamp(8px, 0.9vw, 12px);
  box-shadow: none;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 720px) {
  .public-history__today2026-slide[data-aspect="tablet"] .public-history__today2026-figure {
    padding: clamp(6px, 1vw, 10px);
    border-radius: clamp(14px, 3vw, 18px);
  }
}

.hp-website{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Help Center: legacy main.css forces section{display:block}, which overrides [hidden]. Scoped restore. */
.public-web [hidden]{display:none!important;}

/* Contact dialog — branded <dialog> replacing native alert() on the public footer form. */
.public-contact-dialog-host { display: none; }
.public-contact-dialog {
    border: 1px solid var(--acid);
    border-radius: 14px;
    background:
        radial-gradient(560px 320px at 8% 0%, rgba(150, 230, 80, .12), transparent 65%),
        radial-gradient(420px 280px at 96% 100%, rgba(138, 88, 255, .10), transparent 70%),
        linear-gradient(160deg, #0d111b 0%, #07090f 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 2px 0 rgba(182, 255, 60, .08) inset;
    color: var(--text);
    padding: 0;
    width: min(100%, 620px);
    max-height: min(640px, calc(100vh - 32px));
    max-width: min(100%, 620px);
    margin: auto;
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
}
.public-contact-dialog::backdrop {
    background:
        radial-gradient(720px 460px at 50% 30%, rgba(138, 88, 255, .12), transparent 70%),
        radial-gradient(520px 320px at 50% 70%, rgba(168, 217, 96, .06), transparent 72%),
        rgba(4, 6, 11, .72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.public-contact-dialog[open] {
    animation: public-contact-dialog-in 220ms cubic-bezier(.2,.7,.2,1);
}
@keyframes public-contact-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.public-contact-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
    z-index: 2;
}
.public-contact-dialog__close:hover,
.public-contact-dialog__close:focus-visible {
    color: var(--text);
    border-color: var(--acid);
    background: rgba(182, 255, 60, .06);
    outline: none;
}
.public-contact-dialog__success,
.public-contact-dialog__error {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: clamp(18px, 3vw, 28px);
    align-items: stretch;
    padding: clamp(22px, 3.4vw, 32px);
    min-height: 100%;
}
.public-contact-dialog__success[hidden],
.public-contact-dialog__error[hidden] {
    display: none;
}
.public-contact-dialog__illustration {
    margin: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(180px 220px at 50% 30%, rgba(182, 255, 60, .14), transparent 70%),
        linear-gradient(170deg, rgba(138, 88, 255, .22) 0%, rgba(11, 16, 26, .92) 60%);
    border: 1px solid rgba(138, 88, 255, .42);
    border-radius: 10px;
    padding: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.public-contact-dialog__illustration img {
    display: block;
    width: 100%;
    max-width: 152px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 18%;
    border-radius: 8px;
    background: transparent;
}
.public-contact-dialog__signal {
    margin: 0;
    align-self: center;
    justify-self: center;
    width: 110px;
    height: 110px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(140px 140px at 50% 50%, rgba(248, 179, 73, .14), transparent 70%),
        linear-gradient(160deg, rgba(40, 26, 12, .55), rgba(11, 16, 26, .82));
    border: 1px solid rgba(248, 179, 73, .55);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    position: relative;
}
.public-contact-dialog__signal::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px dashed rgba(248, 179, 73, .35);
    pointer-events: none;
}
.public-contact-dialog__signal-mark {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: 4.2rem;
    line-height: 1;
    font-weight: 700;
    color: #f8b349;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.public-contact-dialog__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}
.public-contact-dialog__eyebrow {
    color: var(--acid);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    margin: 0;
    text-transform: uppercase;
}
.public-contact-dialog__eyebrow--error {
    color: #f8b349;
}
.public-contact-dialog__eyebrow::after {
    background: linear-gradient(90deg, var(--acid), var(--purple));
    content: '';
    display: inline-block;
    height: 2px;
    margin: 0 0 3px 8px;
    width: 24px;
    vertical-align: middle;
}
.public-contact-dialog__eyebrow--error::after {
    background: linear-gradient(90deg, #f8b349, #d8544b);
}
.public-contact-dialog__title {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: clamp(1.65rem, 1.25rem + 1vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0;
    color: var(--text);
}
.public-contact-dialog__body {
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.5;
    margin: 0;
    max-width: 38ch;
}
.public-contact-dialog__primary {
    align-self: flex-start;
    margin-top: 4px;
    border-radius: 6px;
    cursor: pointer;
}
.public-contact-dialog__primary--quiet {
    background: transparent;
    border-color: var(--line);
    color: var(--text);
}
.public-contact-dialog__primary--quiet:hover,
.public-contact-dialog__primary--quiet:focus-visible {
    background: rgba(248, 179, 73, .08);
    border-color: #f8b349;
    color: var(--text);
}
@media (max-width: 560px) {
    .public-contact-dialog {
        width: min(calc(100% - 24px), 460px);
        margin: 12px auto;
        max-height: calc(100vh - 24px);
    }
    .public-contact-dialog__success,
    .public-contact-dialog__error {
        grid-template-columns: 88px 1fr;
        gap: 16px;
        padding: 22px 20px;
    }
    .public-contact-dialog__illustration {
        padding: 5px;
    }
    .public-contact-dialog__illustration img {
        max-width: 76px;
    }
    .public-contact-dialog__signal {
        width: 72px;
        height: 72px;
    }
    .public-contact-dialog__signal-mark {
        font-size: 2.6rem;
    }
    .public-contact-dialog__title {
        font-size: clamp(1.45rem, 1.2rem + 4vw, 1.85rem);
    }
    .public-contact-dialog__body {
        font-size: .92rem;
    }
}
@media (max-width: 380px) {
    .public-contact-dialog__success,
    .public-contact-dialog__error {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 18px 20px;
    }
    .public-contact-dialog__illustration,
    .public-contact-dialog__signal {
        max-width: 88px;
        margin: 0 auto;
    }
    .public-contact-dialog__copy {
        text-align: center;
        align-items: center;
    }
    .public-contact-dialog__body { max-width: none; }
    .public-contact-dialog__primary { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
    .public-contact-dialog[open] { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Patro page — /patro (sits on top of the existing .public-history / .public-secondary / .public-break system).

   Reuses:
     .public-product-hero          (portal hero: copy left + shot right)
     .public-history__row, .public-history__row--text, .public-history__row--reverse, .public-history__row--maps
     .public-history__text, .public-history__heading, .public-history__caption
     .public-history__body, .public-history__close
     .public-shot, .public-shot--wide, .public-shot--hero variants
     .public-break, .public-break--phrase, .public-break__inner, .public-break__statement
     .public-kicker, .public-display, .public-title, .public-lede, .public-copy

   Adds only page-scoped behaviour that wasn't already covered:
     - Allow .public-break to escape its parent on .public-secondary-page so the
       editorial pauses read full-bleed like they do on .public-home.
     - A reusable acid editorial-link style for inline links inside history rows
       (e.g. "→ Descubre cómo se hizo Vin" in the origin block).
   ──────────────────────────────────────────────────────────────────────────── */
html:has(body.public-secondary-page) { overflow-x: clip; }
.public-secondary-page .public-main { overflow: visible; }
.public-secondary-page .public-break {
    background: #f2f4ef;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #10141a;
    margin-left: calc(50% - 50vw);
    min-height: 0;
    padding: clamp(34px, 5vw, 56px) 0;
    width: 100vw;
}

/* Patro "No pagas" full-bleed text row: breaks out of every container to span
   the full page width (same breakout math as the light bands), with 24px
   gutters so the copy never touches the viewport edge. Scoped to the page
   so Historia is untouched. */
.public-patro-page .public-history__row--full { grid-template-columns: 1fr; max-width: none; margin-top: clamp(40px, 6vw, 56px); margin-bottom: clamp(20px, 2.5vw, 32px); }

/* Patro hero rhythm: clear breathing between lede, epigraph, body and link. */
.public-patro-page .public-product-hero .public-lede { margin-bottom: 22px; }
.public-patro-page .public-product-hero .public-history__heading { margin-bottom: 14px; }
.public-patro-page .public-product-hero .public-copy { line-height: 1.7; margin-top: 10px; }
.public-patro-page .public-product-hero .public-copy:last-child { margin-top: 16px; }

/* Funcionalidades cycle Easter egg: green initials on the four cycle cards
   (Planifica/Entrena/Revisa/Adapta). Same type/size/weight, first letter only. */
.public-product-grid .public-feature:nth-child(-n+4) h3::first-letter { color: var(--acid); }

/* Home loop cycle Easter egg: same green initials as the Product page, applied to
   the four cycle cards (Planifica/Entrena/Revisa/Adapta). Same type/size/weight,
   first letter only, reusing the identical ::first-letter mechanism. */
.public-loop .public-loop__item:nth-child(-n+4) h3::first-letter { color: var(--acid); }


/* Acid editorial link for the Patro page. The inline "→ Descubre cómo se hizo Vin"
   link lives inside .public-product-hero (TRAMO 1) after the 3-arc recomposition.
   Scoped to the page so Historia is untouched. */
.public-patro-page .public-copy a {
    color: var(--acid);
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color .16s ease, border-color .16s ease;
}
.public-patro-page .public-copy a:hover,
.public-patro-page .public-copy a:focus-visible {
    color: var(--acid-bright);
    border-color: var(--acid-bright);
    outline: none;
}

/* Patro closing CTA: the final headline ("Support Vin · Become a Patro" /
   "Apoya Vin · Hazte Patro") becomes a single, accessible link to the Patro
   catalog. Acid colour matches the page's editorial accent (kicker, inline
   "→ Descubre cómo se hizo Vin" link), so the closing reads as the natural
   climax of the page's flow rather than a separate CTA block. text-decoration
   underline (with offset + thickness) is preferred over border-bottom here so
   the large display heading keeps its editorial breathing room. Scoped to
   .public-patro-page so other pages are untouched. */
.public-patro-page .public-title__cta {
    color: var(--acid);
    text-decoration: none;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: .14em;
    transition: color .16s ease, text-decoration-color .16s ease;
}
.public-patro-page .public-title__cta:hover,
.public-patro-page .public-title__cta:focus-visible {
    color: var(--acid-bright);
    text-decoration: underline;
    text-decoration-color: var(--acid-bright);
    outline: none;
}

/* Patro closing CTA screen-reader hint: visually hidden but readable by
   assistive tech, so the "opens in a new tab" context reaches users who
   can't see the hover/focus colour change. Scoped to .public-patro-page so
   other pages don't pick up a generic sr-only utility. */
.public-patro-page .public-patro-sr {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}