/* =====================================================================
   "TU ASEGURADORA" DEMO WEBSITE · tokens (a made-up insurer, its own look)
   ===================================================================== */
.ta{
  --ta-font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ta-bg:#F5F1E8; --ta-paper:#FFFFFF; --ta-sand:#ECE5D6; --ta-sand-2:#E2D8C4;
  --ta-ink:#14231E; --ta-ink-2:#3E4D47; --ta-ink-3:#5B6862;
  --ta-forest:#1F4A3C; --ta-forest-2:#173A2F; --ta-forest-soft:#DCE8E1;
  --ta-saffron:#E3A63A; --ta-saffron-soft:#F8E7C5; --ta-saffron-ink:#7A4D0B;
  --ta-line:#DDD4C2; --ta-line-2:#CBBFA8;
  --ta-r:16px; --ta-r-l:28px;
  --ta-shadow:0 1px 2px rgba(20,35,30,.06),0 18px 40px -22px rgba(20,35,30,.28);
}
.ta{position:relative;min-height:100vh;background:var(--ta-bg);color:var(--ta-ink);font-family:var(--ta-font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.ta *,.ta *::before,.ta *::after{box-sizing:border-box}
.ta h1,.ta h2,.ta h3,.ta p,.ta ul,.ta ol,.ta dl,.ta dd,.ta figure{margin:0}
.ta ul,.ta ol{padding:0;list-style:none}
/* zero-specificity base so every button and link class keeps its own color */
:where(.ta) :where(button,input,select){font:inherit;color:inherit}
:where(.ta) :where(button){cursor:pointer}
:where(.ta) :where(a){color:var(--ta-forest)}
/* Vivarango program logo (light and dark backgrounds) */
.ta-viva{display:block;width:150px;height:30px;background:url(/img/vivarango-logo.svg) left center/contain no-repeat;flex:none}
.ta-viva--white{background-image:url(/img/vivarango-logo-white.svg)}
.ta :focus-visible{outline:2.5px solid var(--ta-saffron);outline-offset:2px}
.ta svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ta .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ta-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.ta-num{font-variant-numeric:tabular-nums}
.ta-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ta-forest)}
.ta-h1{font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.ta-h2{font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.ta-h3{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.ta-lead{font-size:18px;line-height:1.55;color:var(--ta-ink-2);text-wrap:pretty}
.ta-body{font-size:15.5px;line-height:1.6;color:var(--ta-ink-2)}
.ta-small{font-size:14px;color:var(--ta-ink-2)}
.ta-xs{font-size:13px;color:var(--ta-ink-3)}
@media (min-width:760px){.ta-h1{font-size:60px}.ta-h2{font-size:40px}.ta-wrap{padding:0 32px}}

/* header */
.ta-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ta-bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.ta-head-in{display:flex;align-items:center;gap:20px;min-height:72px}
.ta-logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ta-ink);text-decoration:none;border:0;background:none;padding:0;min-height:44px}
.ta-logo-mark{position:relative;width:34px;height:26px;flex:none}
.ta-logo-mark i{position:absolute;top:0;width:26px;height:26px;border-radius:50%}
.ta-logo-mark i:first-child{left:0;background:var(--ta-forest)}
.ta-logo-mark i:last-child{right:0;background:var(--ta-saffron);mix-blend-mode:multiply}
.ta-nav{display:flex;align-items:center;gap:4px;margin-left:12px}
.ta-nav button{border:0;background:none;min-height:44px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ta-ink-2)}
.ta-nav button:hover{background:var(--ta-sand);color:var(--ta-ink)}
.ta-nav button[aria-current="page"]{color:var(--ta-ink)}
.ta-head-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.ta-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--ta-sand);gap:2px}
.ta-seg button{border:0;background:transparent;min-height:36px;min-width:42px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ta-ink-3)}
.ta-seg button[aria-pressed="true"]{background:var(--ta-paper);color:var(--ta-ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ta-menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--ta-line);background:var(--ta-paper);place-items:center}

/* buttons */
.ta-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:1.5px solid transparent;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap}
.ta-btn:active{transform:scale(.98)}
.ta-btn--primary{background:var(--ta-forest);color:#fff}
.ta-btn--primary:hover{background:var(--ta-forest-2)}
.ta-btn--primary:disabled{background:var(--ta-sand-2);color:var(--ta-ink-3);cursor:not-allowed;transform:none}
.ta-btn--accent{background:var(--ta-saffron);color:var(--ta-ink)}
.ta-btn--accent:hover{background:#D7982C}
.ta-btn--line{background:transparent;color:var(--ta-ink);border-color:var(--ta-ink)}
.ta-btn--line:hover{background:var(--ta-ink);color:#fff}
.ta-btn--ghost{background:transparent;color:var(--ta-forest);padding:0 12px}
.ta-btn--sm{min-height:44px;padding:0 18px;font-size:15px}
.ta-btn--block{width:100%}

/* surfaces */
.ta-card{background:var(--ta-paper);border-radius:var(--ta-r-l);padding:24px;box-shadow:var(--ta-shadow)}
.ta-card--flat{background:var(--ta-sand);box-shadow:none}
.ta-tag{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--ta-saffron-soft);color:var(--ta-saffron-ink)}
.ta-tag--forest{background:var(--ta-forest-soft);color:var(--ta-forest)}
.ta-tag--ex{background:transparent;border:1.5px dashed var(--ta-line-2);color:var(--ta-ink-3);font-weight:600}
.ta-section{padding:64px 0}
@media (min-width:760px){.ta-section{padding:96px 0}}
.ta-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ta-split{display:grid;gap:40px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:960px){.ta-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}}
.ta-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--ta-forest-soft);color:var(--ta-forest);flex:none}
.ta-ico--sun{background:var(--ta-saffron-soft);color:var(--ta-saffron-ink)}
.ta-check{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.ta-check svg{color:var(--ta-forest);margin-top:2px}

/* hero */
.ta-hero{padding:32px 0 56px}
@media (min-width:760px){.ta-hero{padding:56px 0 96px}}
.ta-hero-art{width:100%;height:auto;display:block;border-radius:var(--ta-r-l)}
.ta-price{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:20px;background:var(--ta-paper);box-shadow:var(--ta-shadow)}
.ta-price b{font-size:32px;letter-spacing:-.03em;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}

/* product cards */
.ta-prod{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--ta-r-l);background:var(--ta-paper);border:1.5px solid transparent;min-height:220px;text-align:left}
.ta-prod.is-feat{background:var(--ta-forest);color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}
.ta-prod.is-feat:hover{transform:translateY(-3px);box-shadow:var(--ta-shadow)}
.ta-prod.is-feat .ta-body{color:#D7E5DD}
.ta-prod.is-feat .ta-ico{background:rgba(255,255,255,.12);color:#fff}

/* levels table */
.ta-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
.ta-level{padding:16px;border-radius:18px;background:var(--ta-paper);display:flex;flex-direction:column;gap:4px;border:1px solid var(--ta-line)}
.ta-level b{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* faq */
.ta-faq{display:flex;flex-direction:column;border-top:1px solid var(--ta-line)}
.ta-faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:64px;padding:16px 0;border:0;border-bottom:1px solid var(--ta-line);background:none;text-align:left;font-size:17px;font-weight:700}
.ta-faq-a{padding:0 0 20px;border-bottom:1px solid var(--ta-line);margin-top:-1px;padding-top:12px}

/* footer */
.ta-foot{background:var(--ta-ink);color:#C9D3CE;padding:56px 0 32px}
.ta-foot a,.ta-foot button{color:#E8EEEA}
.ta-foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.ta-foot h4{font-size:13px;color:#fff;margin:0 0 12px;font-weight:700}
.ta-foot li{font-size:14px;padding:4px 0}

/* quote (Sherpa+ component inside the insurer page) */
.ta-q{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){.ta-q{grid-template-columns:minmax(0,1fr) 360px}}
.ta-widget{background:var(--ta-paper);border-radius:var(--ta-r-l);box-shadow:var(--ta-shadow);overflow:hidden}
.ta-widget-body{padding:24px}
@media (min-width:760px){.ta-widget-body{padding:32px 36px}}
.ta-widget-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 24px;border-top:1px solid var(--ta-line);font-size:12.5px;color:var(--ta-ink-3);background:#FBF9F4}
.ta-stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:16px 24px 0}
@media (min-width:760px){.ta-stepper{padding:24px 36px 0}}
.ta-step{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:700;color:var(--ta-ink-3)}
.ta-step i{height:4px;border-radius:2px;background:var(--ta-sand-2)}
.ta-step.is-done i,.ta-step.is-now i{background:var(--ta-forest)}
.ta-step.is-now{color:var(--ta-ink)}
.ta-step span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ta-legend{font-size:15px;font-weight:700;margin-bottom:10px;padding:0}
.ta-chips{display:flex;flex-wrap:wrap;gap:8px}
.ta-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:14px;border:1.5px solid var(--ta-line-2);background:var(--ta-paper);font-weight:700;font-size:15px;cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.ta-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ta-chip:has(input:checked){border-color:var(--ta-forest);background:var(--ta-forest-soft);box-shadow:0 0 0 1px var(--ta-forest)}
.ta-chip:has(input:focus-visible){outline:2.5px solid var(--ta-saffron);outline-offset:2px}
.ta-opt{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--ta-line-2);background:var(--ta-paper);cursor:pointer;font-weight:600;font-size:15px}
.ta-opt input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ta-line-2);margin:0;flex:none}
.ta-opt input:checked{border-color:var(--ta-forest);background:radial-gradient(circle,var(--ta-forest) 0 5px,#fff 5.5px)}
.ta-opt:has(input:checked){border-color:var(--ta-forest);background:#F4F8F5;box-shadow:0 0 0 1px var(--ta-forest)}
.ta-opt:has(input:focus-visible){outline:2.5px solid var(--ta-saffron);outline-offset:2px}
.ta-opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.ta-field{display:flex;flex-direction:column;gap:6px}
.ta-label{font-size:14px;font-weight:700}
.ta-input-wrap{position:relative}
.ta-input{width:100%;min-height:52px;border-radius:14px;border:1.5px solid var(--ta-line-2);background:var(--ta-paper);padding:0 44px 0 14px;font-size:16px}
.ta-input:focus{outline:none;border-color:var(--ta-forest);box-shadow:0 0 0 4px rgba(31,74,60,.14)}
.ta-ok{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ta-forest)}
.ta-form-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.ta-tick{display:flex;gap:12px;align-items:flex-start;font-size:15px;cursor:pointer}
.ta-tick input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--ta-ink-3);margin:1px 0 0;flex:none;background:#fff center/14px no-repeat}
.ta-tick input:checked{background-color:var(--ta-forest);border-color:var(--ta-forest);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.ta-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--ta-sand);font-size:14px;color:var(--ta-ink-2)}
.ta-note--sun{background:var(--ta-saffron-soft);color:var(--ta-saffron-ink)}
.ta-note--forest{background:var(--ta-forest-soft);color:var(--ta-forest)}
.ta-sum{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.ta-sum-price{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ta-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;font-size:15px}
.ta-kv dt{color:var(--ta-ink-3)}
.ta-kv dd{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ta-skel{background:linear-gradient(90deg,var(--ta-sand) 0%,var(--ta-sand-2) 50%,var(--ta-sand) 100%);background-size:200% 100%;animation:ta-shimmer 1.2s ease-in-out infinite;border-radius:10px}
.ta-mbar{display:none}
.ta-in{animation:ta-in .4s cubic-bezier(.2,.8,.2,1) both}
.ta-done-mark{width:88px;height:88px;border-radius:50%;background:var(--ta-forest);color:#fff;display:grid;place-items:center;animation:ta-pop .55s cubic-bezier(.2,1.4,.4,1) both}

/* mobile menu */
.ta-drawer{position:fixed;inset:0;z-index:60;background:rgba(20,35,30,.4);display:flex;justify-content:flex-end;animation:ta-fade .15s both}
.ta-drawer-in{width:min(340px,88%);background:var(--ta-bg);padding:16px 20px;display:flex;flex-direction:column;gap:8px;animation:ta-slide .25s cubic-bezier(.2,.8,.2,1) both}
.ta-drawer-in button.ta-dl{border:0;background:none;text-align:left;min-height:52px;font-size:18px;font-weight:700;border-bottom:1px solid var(--ta-line);padding:0}


@media (max-width:959px){
  .ta-nav{display:none}
  .ta-menu-btn{display:grid}
  .ta-head-cta{display:none}
  .ta-mbar{display:flex;position:sticky;bottom:0;z-index:25;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--ta-paper);border-top:1px solid var(--ta-line);box-shadow:0 -8px 24px -16px rgba(0,0,0,.2)}
  .ta-sum{position:static}
}
@keyframes ta-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes ta-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ta-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ta-fade{from{opacity:0}to{opacity:1}}
@keyframes ta-slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ta *,.ta *::before,.ta *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* =====================================================================
   Live site additions (not in the design export)
   ===================================================================== */
body{margin:0;background:var(--ta-bg)}
.ta [hidden]{display:none!important}
/* the tick shows only once a field is valid; a field that is not gets a calm hint, never red */
.ta-ok{display:none}
.ta-field.is-ok .ta-ok{display:block}
.ta-field.is-bad .ta-input{border-color:var(--ta-saffron)}
.ta-hint{font-size:13px;color:var(--ta-ink-3)}
.ta-field.is-bad .ta-hint{color:var(--ta-saffron-ink);font-weight:600}
.ta-input:disabled{background:var(--ta-bg);color:var(--ta-ink-3)}
/* FAQ as native disclosure: one open at a time through the shared name */
.ta-faq summary{list-style:none;cursor:pointer}
.ta-faq summary::-webkit-details-marker{display:none}
.ta-faq summary svg{transition:transform .2s}
.ta-faq details[open] summary svg{transform:rotate(45deg)}
.ta-faq details[open] .ta-faq-q{border-bottom-color:transparent}
.ta-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:70;background:var(--ta-ink);color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:var(--ta-shadow);max-width:calc(100% - 32px)}
.ta-note ul{margin:4px 0 0;padding-left:18px;list-style:disc;display:flex;flex-direction:column;gap:4px}
.ta-person{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;border:1px solid var(--ta-line);background:#FBF9F4}
.ta-person-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;font-size:14px}
.ta-person-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.ta-person-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 120px}}
.ta-sum-sub{display:flex;flex-direction:column;gap:4px}
.ta-mbar-price{display:flex;flex-direction:column}
/* the list reset above (.ta ol) is more specific than .ta-stepper and wiped its padding */
.ta .ta-stepper{padding:16px 24px 0}
@media (min-width:760px){.ta .ta-stepper{padding:24px 36px 0}}
/* "Vida" is a real link in the menus; it looks like the other menu items */
.ta-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ta-ink-2);text-decoration:none}
.ta-nav a:hover{background:var(--ta-sand);color:var(--ta-ink)}
.ta-nav a[aria-current="page"]{color:var(--ta-ink)}
.ta-drawer-in a.ta-dl,.ta-drawer-in button.ta-dl{display:flex;align-items:center;border:0;background:none;text-align:left;min-height:52px;font-size:18px;font-weight:700;border-bottom:1px solid var(--ta-line);padding:0;color:var(--ta-ink);text-decoration:none}
/* Sherpa's checkout (Stripe) framed in step 4: it reports its own height */
.ta-checkout{position:relative;border-radius:var(--ta-r);overflow:hidden}
.ta-checkout iframe{display:block;width:100%;border:0;background:transparent;transition:height .2s ease-out}
.ta-checkout .ta-skel{position:absolute;inset:0;height:auto!important}