:root { --paper: #f7f5f0; --paper-2: #efece4; --ink: #141210; --ink-soft: #4b463f; --mustard: #f5d949; --mint: #cfe9d4; --lemon: #f4eab0; --white: #fffdf8; --radius: 9px; --shadow: 3px 3px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink); --rainbow: linear-gradient(90deg, #f7b8d2 0%, #c9b6ee 25%, #a9d8f0 50%, #b9e8c2 72%, #f4e6a0 100%); --grad: linear-gradient(90deg, #ffb4c6 0%, #ffd7a8 22%, #fff3a0 42%, #c9f0c4 62%, #b8dcff 80%, #d7bdff 100%); }

    * { box-sizing: border-box; margin: 0; padding: 0 }

    html { background: var(--paper); scroll-behavior: smooth }

    body { font-family: 'Inter', system-ui, sans-serif; background: var(--paper); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

    h1,
    h2,
    h3,
    h4 { font-family: 'Fraunces', Georgia, serif; line-height: 1.1; letter-spacing: -0.01em }

    a { color: inherit; text-decoration: none }

    img { max-width: 100%; display: block }

    .wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px }

    .rule { border: none; border-top: 1.5px solid var(--ink); width: 100% }

    /* hand underline */
    .squiggle { position: relative; white-space: nowrap }

    .squiggle svg { position: absolute; left: 0; bottom: -10px; width: 100%; height: 12px }

    /* rainbow bar */
    .rainbow-bar { height: 6px; width: 100%; background: var(--rainbow); border-radius: 99px }

    /* buttons */
    .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; padding: 14px 26px; border-radius: var(--radius); border: 1.5px solid var(--ink); cursor: pointer; background: var(--white); color: var(--ink); box-shadow: var(--shadow); transition: background .1s ease, color .1s ease, transform .08s ease, box-shadow .08s ease; }

    .btn:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

    .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) }

    .btn-primary { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; padding-bottom: 20px }

    .btn-primary::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--grad) }

    .btn-mustard { background: var(--mustard); color: var(--ink) }

    .btn-ghost { background: transparent; box-shadow: none }

    .btn-ghost:hover { background: var(--paper-2); transform: none; box-shadow: none }

    .tag { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: var(--radius); border: 1.5px solid var(--ink); background: var(--lemon); }

    .tag-mint { background: var(--mint) }

    .tag-mustard { background: var(--mustard) }

    /* NAV */
    header.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1.5px solid var(--ink) }

    .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px }

    .logo { display: flex; align-items: center; gap: 10px }

    .logo img { height: 42px; width: auto }

    .nav-links { display: flex; align-items: center; gap: 28px; font-weight: 500; font-size: .95rem }

    .nav-links a:hover { text-decoration: underline; text-underline-offset: 4px }

    .nav-cta { display: flex; align-items: center; gap: 12px }

    .burger { display: none; background: none; border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 8px 10px; cursor: pointer }

    .burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0 }

    /* HERO */
    .hero { padding: 70px 0 60px; position: relative }

    .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center }

    .hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 600 }

    /* typewriter word swap: "sin" se desplaza junto a la palabra tipeada, sin saltar de línea */
    .typewriter-line { white-space: nowrap; }

    .typewriter-text { color: #e81111; text-shadow: 2px 1px 0 var(--ink); transition: color .15s ease; }

    .typewriter-text.typewriter-alt { color: #6c3ce0; text-shadow: none; }

    .typewriter-caret { display: inline-block; width: 3px; height: 0.85em; margin-left: 2px; background: var(--ink); animation: caretBlink .8s step-end infinite; transform: translateY(0.1em); }

    @keyframes caretBlink { 0%,
      100% { opacity: 1; }

      50% { opacity: 0; } }

    @media (prefers-reduced-motion: reduce) { .typewriter-caret { animation: none; } }

    .hero p.lead { font-size: 1.2rem; color: var(--ink-soft); margin: 22px 0 30px; max-width: 33ch }

    .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center }

    .hero-badges { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; font-size: .9rem; font-weight: 500 }

    .hero-badges div { display: flex; align-items: center; gap: 8px }

    .dot { width: 9px; height: 9px; border-radius: 99px; background: var(--mustard); border: 1.5px solid var(--ink) }

    /* hero card visual */
    .hero-visual { position: relative }

    .paper-card { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); padding: 26px; position: relative; }

    .paper-card.quote-drop { border: 1.5px dashed transparent; cursor: pointer; transition: box-shadow .15s ease, background .15s ease, border-color .15s ease; }

    .paper-card.quote-drop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image:
        linear-gradient(90deg, var(--ink) 50%, transparent 50%),
        linear-gradient(90deg, var(--ink) 50%, transparent 50%),
        linear-gradient(0deg, var(--ink) 50%, transparent 50%),
        linear-gradient(0deg, var(--ink) 50%, transparent 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 16px 1.5px, 16px 1.5px, 1.5px 16px, 1.5px 16px; background-position: 0 0, 0 100%, 0 0, 100% 0; animation: marchingAnts .7s linear infinite; transition: opacity .15s ease; }

    @keyframes marchingAnts { to { background-position: 16px 0, -16px 100%, 0 -16px, 100% 16px; } }

    .paper-card.quote-drop:hover,
    .paper-card.quote-drop:focus-visible { box-shadow: 8px 8px 0 var(--ink); outline: none; }

    .paper-card.quote-drop.dragover { background: var(--mint); border-color: var(--ink); border-style: solid; box-shadow: 8px 8px 0 var(--ink); }

    .paper-card.quote-drop.dragover::before { opacity: 0; }

    .mini-row { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 12px; }

    .mini-row-text { min-width: 0; }

    .mini-row .price { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 80px; flex: 0 0 auto; text-align: right; }

    .progress { margin-top: 20px }

    .progress .track { height: 12px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--paper-2); overflow: hidden }

    .progress .fill { height: 100%; width: 72%; background: var(--mustard); border-right: 1.5px solid var(--ink) }

    .progress .labels { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 600; margin-top: 8px; color: var(--ink-soft) }

    .float { position: absolute; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 10px 14px; font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 8px }

    .float-1 { top: -30px; right: -10px; background: var(--mint); transform: rotate(4deg) }

    .float-2 { bottom: -34px; left: -14px; background: var(--lemon); transform: rotate(-4deg) }

    /* quoter (hero-visual) */
    .quote-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin-top: 14px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--paper-2); cursor: pointer; outline: none; }

    .quote-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 99px; background: var(--mustard); border: 1.5px solid var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; margin-top: -1px; }

    .quote-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 99px; background: var(--mustard); border: 1.5px solid var(--ink); box-shadow: var(--shadow-sm); cursor: pointer }

    .quote-slider::-moz-range-track { height: 12px; border-radius: 99px; background: var(--paper-2); border: 1.5px solid var(--ink) }

    .quote-eyebrow { padding: 0; }

    .quote-manual { overflow: hidden; max-height: 220px; opacity: 1; transition: max-height .28s ease, opacity .2s ease, margin-top .28s ease; }

    .quote-manual.collapsed { max-height: 0; opacity: 0; margin-top: 0 !important; pointer-events: none; }

    .quote-drop-status { margin-top: 10px; font-size: .82rem; color: var(--ink-soft); text-align: left; min-height: 1.2em; display: flex; align-items: center; justify-content: flex-start; gap: 7px; }

    .quote-drop-icon { flex: 0 0 auto; color: var(--ink-soft); }

    .quote-drop-status.has-files { color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

    .quote-drop-status.has-files .quote-drop-icon { color: var(--ink); }

    .quote-modes { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

    .quote-mode { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 12px 24px; border-radius: var(--radius); border: 1.5px solid var(--ink); background: var(--white); position: relative; overflow: hidden; }

    .quote-mode::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5.5px; }

    .quote-mode-byn::before { background: linear-gradient(to bottom,
          var(--ink) 0%,
          var(--ink) 33%,
          var(--white) 33%,
          var(--white) 67%,
          var(--ink) 67%,
          var(--ink) 100%); }

    .quote-mode-color::before { background: linear-gradient(to bottom,
          #ff5252 0%,
          #ffb020 20%,
          #ffe066 38%,
          #6fcf68 54%,
          #35b0e0 70%,
          #8b6de0 85%,
          #e05ec2 100%); }

    .quote-mode-label { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .95rem; color: var(--ink); }

    .quote-mode-hint { font-weight: 500; color: var(--ink-soft); font-size: .78rem; text-transform: none; letter-spacing: normal; margin-bottom: 1px; white-space: nowrap; }

    .quote-mode-name-short { display: none; }

    @media (max-width: 639px) { .quote-mode-name-full { display: none; }

      .quote-mode-name-short { display: inline; } }

    .quote-mode-label small { font-weight: 500; color: var(--ink-soft); font-size: .78rem; margin-top: 1px; }

    .quote-mode-price { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; min-width: 118px; flex: 0 0 auto; text-align: right; }


    /* doodles */
    .doodle { position: absolute; opacity: .9; pointer-events: none }

    /* MARQUEE */
    .marquee { background: var(--ink); color: var(--paper); overflow: hidden; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink) }

    .marquee-track { display: flex; gap: 40px; white-space: nowrap; padding: 14px 0; animation: scroll 22s linear infinite; font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 500 }

    .marquee-track span { display: inline-flex; align-items: center; gap: 40px }

    @keyframes scroll { from { transform: translateX(0) }

      to { transform: translateX(-50%) } }

    /* SECTION shared */
    section { padding: 80px 0 }

    .sec-head { max-width: 640px; margin-bottom: 48px }

    .sec-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600 }

    .sec-head p { color: var(--ink-soft); font-size: 1.1rem; margin-top: 14px }

    .eyebrow { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; display: inline-block }

    /* STEPS */
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }

    .step { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); position: relative }

    .step .num { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; width: 42px; height: 42px; border-radius: 99px; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; background: var(--mustard); margin-bottom: 18px }

    .step h3 { font-size: 1.35rem; margin-bottom: 8px }

    .step p { color: var(--ink-soft); font-size: .98rem }

    .step .bar { margin-top: 20px }

    /* FEATURES / value */
    .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px }

    .feat { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); display: flex; gap: 18px; align-items: flex-start }

    .feat .ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--radius); border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; background: var(--mint) }

    .feat h3 { font-size: 1.25rem; margin-bottom: 6px }

    .feat p { color: var(--ink-soft); font-size: .96rem }

    .feat:nth-child(2) .ico { background: var(--lemon) }

    .feat:nth-child(3) .ico { background: var(--mustard) }

    .feat:nth-child(4) .ico { background: var(--paper-2) }

    /* PRICING */
    .pricing { background: var(--paper-2) }

    .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch }

    .plan { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); display: flex; flex-direction: column }

    .plan.pop { box-shadow: 6px 6px 0 var(--ink); position: relative }

    .plan.pop .banner { position: absolute; top: -14px; left: 24px; width: fit-content; max-width: calc(100% - 48px); }

    .plan h3 { font-size: 1.3rem; margin-bottom: 4px }

    .plan .p-price { font-family: 'Fraunces', serif; font-size: 2.6rem; font-weight: 700; margin: 10px 0 }

    .plan .p-price small { font-size: 1rem; font-weight: 500; color: var(--ink-soft) }

    .plan ul { list-style: none; margin: 18px 0 26px; display: flex; flex-direction: column; gap: 12px }

    .plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem }

    .plan li svg { flex: 0 0 auto; margin-top: 3px }

    .plan .btn { width: 100%; justify-content: center; margin-top: auto }

    /* TRUST / compare */
    .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow) }

    .compare .col { padding: 34px }

    .compare .col.us { background: var(--white) }

    .compare .col.them { background: var(--paper-2); border-left: 1.5px solid var(--ink) }

    .compare h3 { font-size: 1.4rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px }

    .compare ul { list-style: none; display: flex; flex-direction: column; gap: 14px }

    .compare li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem }

    /* TESTIMONIALS */
    .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }

    .quote { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow) }

    .quote .stars { color: var(--mustard); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 12px }

    .quote p { font-size: 1rem; margin-bottom: 18px }

    .quote .who { display: flex; align-items: center; gap: 12px }

    .quote .av { width: 42px; height: 42px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--mint); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700 }

    .quote .who small { color: var(--ink-soft) }

    /* CTA band */
    .cta-band { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 56px; text-align: center; box-shadow: 6px 6px 0 var(--mustard); position: relative; overflow: hidden }

    .cta-band h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--paper); font-weight: 600 }

    .cta-band p { color: #d8d3c8; font-size: 1.15rem; margin: 16px auto 30px; max-width: 44ch }

    .cta-band .btn-primary { background: var(--mustard); color: var(--ink); border-color: var(--mustard) }

    .cta-band .btn-primary:hover { box-shadow: var(--shadow); }

 
    /* FAQ */
    .faq-item { border-bottom: 1.5px solid var(--ink) }

    .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600; color: var(--ink) }

    .faq-q .plus { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 99px; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform .2s ease; background: var(--white) }

    .faq-item.open .plus { transform: rotate(45deg); background: var(--mustard) }

    .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: var(--ink-soft) }

    .faq-a p { padding: 0 0 24px; max-width: 70ch }

    /* FOOTER */
    footer { background: var(--paper); border-top: 1.5px solid var(--ink); padding: 60px 0 30px }

    .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px }

    .foot-grid h4 { font-family: 'Inter', sans-serif; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; color: var(--ink-soft) }

    .foot-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: .95rem }

    .foot-grid a:hover { text-decoration: underline; text-underline-offset: 3px }

    .foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: .85rem; color: var(--ink-soft); padding-top: 24px; border-top: 1.5px solid var(--ink) }

    /* reveal */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease }

    .reveal.in { opacity: 1; transform: none }

    /* RESPONSIVE */
    @media(max-width:900px) { .hero-grid { grid-template-columns: 1fr; gap: 56px }

      .steps,
      .quotes,
      .price-grid { grid-template-columns: 1fr }

      .feat-grid { grid-template-columns: 1fr }

      .compare { grid-template-columns: 1fr }

      .compare .col.them { border-left: none; border-top: 1.5px solid var(--ink) }

      .foot-grid { grid-template-columns: 1fr 1fr }

      .nav-links { display: none }

      .burger { display: block }

      .nav-links.open { display: flex; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; background: var(--paper); border-bottom: 1.5px solid var(--ink); padding: 20px 24px; gap: 18px }

      .cta-band { padding: 40px 24px } }

    @media(max-width:520px) { .foot-grid { grid-template-columns: 1fr }

      .hero-cta { flex-direction: column; align-items: stretch }

      .hero-cta .btn { justify-content: center }

      .hero-visual .paper-card { padding: 21px } }