:root{
    --paper:#F5EFE2;
    --paper-dim:#EBE1CC;
    --panel:#FBF8F0;
    --ink:#26211A;
    --ink-2:#171310;
    --line:#8C6E3E;
    --line-soft:#D9CBA8;
    --accent:#A47C34;
    --accent-dark:#82611F;
    --grey:#5C5344;
    --grey-light:#8C8271;
    --carbon:#2B2621;
    --ok:#3F6E52;
    --radius:1px;
    --serif-display: ui-serif, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  }

  /* Paleta fija a propósito: esta landing corre tráfico pago y necesita
     verse igual para todos los visitantes, sin depender del tema del SO. */

  *{box-sizing:border-box;}
  html{
    scroll-behavior:smooth;
    background:var(--paper-dim);
    scrollbar-color: var(--line) var(--paper-dim);
    scrollbar-width: thin;
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  ::-webkit-scrollbar{width:12px;}
  ::-webkit-scrollbar-track{background:var(--paper-dim);}
  ::-webkit-scrollbar-thumb{
    background:var(--line);
    border:3px solid var(--paper-dim);
    border-radius:8px;
  }
  ::-webkit-scrollbar-thumb:hover{background:var(--accent);}
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--line);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;background:var(--line);display:inline-block;
  }
  h1,h2,h3{
    font-family:var(--serif-display);
    font-weight:700;
    margin:0;
    letter-spacing:-.01em;
    color:var(--ink-2);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:var(--sans);
    font-weight:700;
    font-size:15px;
    letter-spacing:.01em;
    padding:16px 30px;
    border-radius:var(--radius);
    border:2px solid var(--accent);
    background:var(--accent);
    color:#fff;
    cursor:pointer;
    transition:background .15s ease, transform .1s ease, border-color .15s ease;
    text-decoration:none;
  }
  .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
  .btn:active{transform:translateY(1px);}
  .btn:focus-visible{outline:3px solid var(--line);outline-offset:3px;}
  .btn.ghost{
    background:transparent;
    color:var(--ink);
    border:2px solid var(--line-soft);
  }
  .btn.ghost:hover{border-color:var(--line);background:rgba(61,90,115,.06);}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  .btn[disabled]:hover{background:var(--accent);border-color:var(--accent);}

  /* ---------- Nav ---------- */
  header.site{
    position:sticky;top:0;z-index:40;
    background:var(--paper);
    border-bottom:1px solid var(--line-soft);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:16px;padding-bottom:16px;
  }
  .nav-label{
    font-family:var(--serif-display);
    font-weight:700;
    font-size:19px;
    letter-spacing:-.01em;
    color:var(--ink-2);
  }
  .nav .btn{padding:11px 20px;font-size:14px;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:76px 0 64px;
    overflow:hidden;
    background:
      linear-gradient(var(--paper),var(--paper)),
      repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line-soft) 39px, var(--line-soft) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line-soft) 39px, var(--line-soft) 40px);
    opacity:1;
  }
  .hero::before{
    content:"";
    position:absolute;inset:0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line-soft) 39px, var(--line-soft) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line-soft) 39px, var(--line-soft) 40px);
    opacity:.35;
    pointer-events:none;
  }
  .hero .wrap{position:relative;z-index:2;}
  .hero-slideshow{position:absolute;inset:0;z-index:0;overflow:hidden;}
  .hero-slideshow img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;
    opacity:0;
    transition:opacity 1.4s ease;
  }
  .hero-slideshow img.active{opacity:1;}
  .hero-slideshow::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,
      var(--paper) 6%,
      rgba(245,239,226,.94) 26%,
      rgba(245,239,226,.62) 46%,
      rgba(35,27,18,.28) 78%,
      rgba(23,17,12,.42) 100%);
  }
  .corner{
    position:absolute;width:26px;height:26px;
    border:2px solid var(--line);
    opacity:.55;
    z-index:2;
  }
  .corner.tl{top:0;left:0;border-right:none;border-bottom:none;}
  .corner.tr{top:0;right:0;border-left:none;border-bottom:none;}
  .hero-grid{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:56px;
    align-items:start;
  }
  .hero h1{
    font-size:clamp(38px,5vw,58px);
    line-height:1.04;
    max-width:14ch;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--accent);
  }
  .hero p.lede{
    font-size:19px;
    color:var(--carbon);
    max-width:46ch;
    margin:22px 0 30px;
  }
  .hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
  .hero-cta-row .btn.ghost{
    background:transparent;
    border-color:var(--carbon);
    color:var(--carbon);
  }
  .hero-cta-row .btn.ghost:hover{background:rgba(43,38,33,.08);border-color:var(--carbon);}
  .hero-note{
    display:inline-block;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--carbon);
    margin-top:14px;
    letter-spacing:.02em;
  }
  .hero-card{
    background:var(--panel);
    border:1px solid var(--line-soft);
    border-radius:20px;
    padding:22px 24px 20px;
    box-shadow:0 22px 50px -20px rgba(23,19,16,.28);
  }
  .hero-card .tag{
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent);
    text-transform:uppercase;margin-bottom:10px;display:block;
  }
  .hero-card .form-shell{padding:0;background:transparent;box-shadow:none;}

  /* ---------- CTAs de sección ---------- */
  .section-cta{margin-top:40px;display:flex;justify-content:center;}

  /* ---------- Barra CTA fija (mobile) ---------- */
  .sticky-cta{
    display:none;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--panel);
    border-top:1px solid var(--line-soft);
    box-shadow:0 -12px 30px -18px rgba(23,19,16,.4);
  }
  .sticky-cta .btn{width:100%;}

  /* ---------- Trust bar ---------- */
  .trustbar{
    background:var(--ink-2);
    color:var(--paper);
    padding:18px 0;
  }
  .trustbar .wrap{
    display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;
  }
  .trustbar .item{
    font-family:var(--mono);font-size:13px;letter-spacing:.02em;
    display:flex;align-items:center;gap:10px;color:#E9E4D8;
    flex:1;min-width:200px;
  }
  .trustbar .item .n{color:var(--accent);font-weight:700;}

  /* ---------- Sections generic ---------- */
  section{padding:84px 0;}
  .section-head{max-width:640px;margin-bottom:48px;}
  .section-head h2{font-size:clamp(28px,3.4vw,38px);margin-top:14px;}
  .section-head p{color:var(--grey);font-size:17px;margin-top:14px;}

  /* ---------- Project types ---------- */
  .types-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  }
  .type-card{
    display:block;
    text-decoration:none;
    cursor:pointer;
    border:1px solid var(--line-soft);
    background:var(--panel);
    padding:24px 22px;
    border-radius:var(--radius);
    transition:border-color .15s ease, transform .12s ease;
  }
  .type-card:hover{border-color:var(--accent);transform:translateY(-2px);}
  .type-card .glyph{
    width:38px;height:38px;
    border:2px solid var(--line);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--line);
    margin-bottom:16px;
  }
  .type-card .glyph svg{width:19px;height:19px;display:block;}
  .type-card h3{font-size:19px;font-family:var(--sans);font-weight:700;color:var(--ink-2);}
  .type-card p{font-size:14.5px;color:var(--grey);margin:8px 0 0;}

  /* ---------- Process ---------- */
  .process{background:var(--paper-dim);}
  .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
  .process-step{
    padding:0 28px;
    position:relative;
  }
  .process-step:not(:first-child){border-left:1px dashed var(--line-soft);}
  .process-step .num{
    font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em;
  }
  .process-step h3{font-size:21px;margin:12px 0 10px;color:var(--ink-2);}
  .process-step p{color:var(--grey);font-size:15px;margin:0;}

  /* ---------- Why us ---------- */
  .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 40px;}
  .why-item{display:flex;gap:16px;}
  .why-item .mark{
    font-family:var(--mono);color:var(--line);font-size:14px;flex:none;
    width:22px;height:22px;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;margin-top:2px;
  }
  .why-item h3{font-family:var(--sans);font-size:16.5px;font-weight:700;color:var(--ink-2);}
  .why-item p{color:var(--grey);font-size:14.5px;margin:6px 0 0;}

  .review-slot{
    margin-top:44px;
    border:1px dashed var(--line-soft);
    border-radius:var(--radius);
    padding:26px;
    color:var(--grey-light);
    font-family:var(--mono);
    font-size:13px;
    line-height:1.7;
  }

  /* ---------- FORM ---------- */
  .form-section{background:var(--ink-2);color:var(--paper);position:relative;}
  .form-section::before{
    content:"";position:absolute;inset:0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.04) 39px, rgba(255,255,255,.04) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.04) 39px, rgba(255,255,255,.04) 40px);
    pointer-events:none;
  }
  .form-section .wrap{position:relative;}
  .form-section .section-head h2{color:#fff;}
  .form-section .section-head p{color:#C6CCD2;}
  .form-shell{
    max-width:660px;
    margin:0 auto;
    background:var(--panel);
    color:var(--ink);
    border-radius:var(--radius);
    padding:26px 28px 22px;
    box-shadow:0 30px 70px -25px rgba(0,0,0,.5);
  }
  .progress-wrap{margin-bottom:clamp(10px,2.4vh,16px);}
  .progress-label{
    display:flex;justify-content:space-between;
    font-family:var(--mono);font-size:clamp(10.5px,2.2vh,12px);letter-spacing:.06em;color:var(--grey);
    margin-bottom:clamp(5px,1.2vh,8px);text-transform:uppercase;
  }
  .progress-track{height:4px;background:var(--paper-dim);position:relative;}
  .progress-fill{height:100%;background:var(--accent);width:20%;transition:width .3s ease;}
  .progress-ticks{display:flex;justify-content:space-between;margin-top:6px;}
  .progress-ticks span{width:1px;height:6px;background:var(--line-soft);}

  .step{display:none;}
  .step.active{display:block;animation:fadeUp .35s ease;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .step h3.q{
    font-family:var(--serif-display);
    font-size:clamp(18px,4vh,22px);color:var(--ink-2);margin-bottom:clamp(2px,.6vh,4px);
    line-height:1.15;
  }
  .step .hint{color:var(--grey);font-size:clamp(12px,2.2vh,13.5px);margin-bottom:clamp(10px,2.2vh,16px);}

  .option-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,1.2vh,9px);}
  .option{
    border:1.5px solid var(--line-soft);
    border-radius:10px;
    padding:clamp(9px,1.6vh,12px) clamp(10px,1.8vh,14px);
    cursor:pointer;
    font-size:14.5px;
    color:var(--ink);
    background:var(--paper);
    transition:border-color .12s ease, background .12s ease;
    user-select:none;
  }
  .option strong{display:block;font-size:clamp(13.5px,2.4vh,15px);color:var(--ink-2);font-weight:700;line-height:1.2;}
  .option span{color:var(--grey);font-size:clamp(11.5px,2vh,13px);}
  .option:hover{border-color:var(--line);}
  .option.selected{border-color:var(--accent);background:rgba(164,124,52,.09);}
  .option.selected strong{color:var(--accent-dark);}

  /* Estas dos grillas repiten el texto de la pregunta en cada opción con una
     descripción larga; se oculta solo el subtítulo (queda en el HTML) para
     que el paso entre en una tarjeta compacta, sin sacar ninguna opción. */
  .option-grid[data-group="tipo"] .option strong,
  .option-grid[data-group="presupuesto"] .option strong{margin-bottom:0;}
  .option-grid[data-group="tipo"] .option span,
  .option-grid[data-group="presupuesto"] .option span{display:none;}

  .field{margin-bottom:clamp(8px,1.8vh,14px);}
  .field label{
    display:block;font-weight:700;color:var(--ink-2);margin-bottom:clamp(3px,.8vh,6px);
    font-family:var(--mono);letter-spacing:.03em;text-transform:uppercase;font-size:11.5px;
  }
  .field input{
    width:100%;
    border:1.5px solid var(--line-soft);
    border-radius:10px;
    padding:clamp(9px,1.8vh,12px) 14px;
    font-size:15px;
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
  }
  .field input:focus{outline:none;border-color:var(--accent);}
  .field.optional label::after{content:" (opcional)";color:var(--grey-light);font-weight:400;text-transform:none;}

  .step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(10px,2.4vh,18px);gap:12px;}
  .step-nav .btn{padding:clamp(10px,2vh,14px) clamp(18px,4vw,28px);font-size:clamp(13.5px,2.4vh,15px);border-radius:10px;}
  .step-error{color:var(--accent-dark);font-size:13px;margin-top:8px;display:none;font-family:var(--mono);}

  /* ---------- Popup de salida ---------- */
  .exit-modal-overlay{
    position:fixed;inset:0;z-index:100;
    background:rgba(23,19,16,.72);
    display:none;align-items:center;justify-content:center;
    padding:16px;
  }
  .exit-modal-overlay.open{display:flex;}
  .exit-modal{
    position:relative;
    width:100%;max-width:440px;
    max-height:100dvh;
    overflow-y:auto;
    background:var(--panel);
    border-radius:20px;
    padding:clamp(20px,4vh,30px) clamp(18px,4vw,30px) clamp(16px,3vh,24px);
    box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  }
  .exit-modal .tag{
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent);
    text-transform:uppercase;margin-bottom:8px;display:block;
  }
  .exit-modal-title{
    font-family:var(--serif-display);font-size:clamp(19px,4.2vh,24px);color:var(--ink-2);
    margin:0 0 4px;line-height:1.15;
  }
  .exit-modal-sub{color:var(--grey);font-size:13.5px;margin:0 0 clamp(14px,3vh,22px);}
  .exit-modal-close{
    position:absolute;top:12px;right:12px;
    width:30px;height:30px;border-radius:50%;
    border:1px solid var(--line-soft);background:var(--paper);
    color:var(--grey);font-size:18px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .exit-modal-close:hover{border-color:var(--line);color:var(--ink);}
  .exit-modal .form-shell{padding:0;background:transparent;box-shadow:none;}

  /* El popup debe entrar completo en una pantalla vertical 9:16 sin scroll
     interno: mismas preguntas y opciones, tamaños más compactos que el
     formulario del hero (que sí puede convivir con el scroll de la página). */
  .exit-modal{padding:16px 16px 12px;}
  .exit-modal .tag{margin-bottom:4px;}
  .exit-modal-title{font-size:17px;margin-bottom:2px;}
  .exit-modal-sub{font-size:12px;margin-bottom:10px;}
  .exit-modal #popupFormRoot .progress-wrap{margin-bottom:10px;}
  .exit-modal #popupFormRoot .progress-label{font-size:10px;margin-bottom:5px;}
  .exit-modal #popupFormRoot .step h3.q{font-size:16px;margin-bottom:2px;}
  .exit-modal #popupFormRoot .step .hint{font-size:11.5px;margin-bottom:8px;}
  .exit-modal #popupFormRoot .option-grid{gap:6px;}
  .exit-modal #popupFormRoot .option{padding:8px 8px;}
  .exit-modal #popupFormRoot .option strong{font-size:12px;margin-bottom:1px;}
  .exit-modal #popupFormRoot .option span{font-size:10.5px;}
  .exit-modal #popupFormRoot .field{margin-bottom:8px;}
  .exit-modal #popupFormRoot .field label{margin-bottom:3px;}
  .exit-modal #popupFormRoot .field input{padding:8px 10px;font-size:13px;}
  .exit-modal #popupFormRoot .step-nav{margin-top:10px;}
  .exit-modal #popupFormRoot .step-nav .btn{padding:9px 16px;font-size:12.5px;}

  .thankyou{text-align:center;padding:20px 0 6px;}
  .thankyou .check{
    width:54px;height:54px;border-radius:50%;border:2px solid var(--ok);
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--ok);font-size:24px;
  }
  .thankyou h3{font-family:var(--serif-display);font-size:24px;color:var(--ink-2);}
  .thankyou p{color:var(--grey);font-size:15px;max-width:40ch;margin:10px auto 22px;}

  /* ---------- FAQ ---------- */
  .faq-list{border-top:1px solid var(--line-soft);}
  .faq-item{border-bottom:1px solid var(--line-soft);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    padding:22px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:var(--sans);font-size:17px;font-weight:700;color:var(--ink-2);
  }
  .faq-q .plus{font-family:var(--mono);color:var(--accent);font-size:20px;flex:none;transition:transform .2s ease;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .faq-item.open .faq-a{max-height:200px;}
  .faq-a p{color:var(--grey);font-size:15px;padding:0 4px 22px;margin:0;max-width:62ch;}

  /* ---------- Footer ---------- */
  footer.site{
    background:var(--paper-dim);
    border-top:1px solid var(--line-soft);
    padding:44px 0 30px;
  }
  .footer-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;}
  footer.site p{color:var(--grey);font-size:13.5px;margin:4px 0;}
  .footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .step.active{animation:none;}
  }

  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr;gap:36px;}
    .types-grid{grid-template-columns:1fr 1fr;}
    .process-grid{grid-template-columns:1fr;gap:28px;}
    .process-step:not(:first-child){border-left:none;border-top:1px dashed var(--line-soft);padding-top:24px;}
    .why-grid{grid-template-columns:1fr;}
    .form-shell{padding:28px 20px 26px;}
    .hero-card{padding:22px 18px 20px;}
    .option-grid{grid-template-columns:1fr;}
    .trustbar .wrap{gap:14px;}
    .sticky-cta{display:block;}
    body{padding-bottom:70px;}
  }
  @media (max-width:520px){
    .types-grid{grid-template-columns:1fr;}
  }

  /* ---------- Gracias (thank-you) page ---------- */
  .gracias-section{padding:110px 0;}
  .gracias-shell{
    max-width:560px;
    margin:0 auto;
    text-align:center;
  }
  .gracias-shell .check{
    width:64px;height:64px;border-radius:50%;border:2px solid var(--ok);
    display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--ok);font-size:28px;
  }
  .gracias-shell h1{font-size:clamp(30px,4vw,40px);}
  .gracias-shell p.lede{color:var(--grey);font-size:17px;margin:18px auto 34px;max-width:44ch;}
  .gracias-next{
    text-align:left;
    border:1px solid var(--line-soft);
    background:var(--panel);
    border-radius:var(--radius);
    padding:24px 26px;
    margin-bottom:34px;
  }
  .gracias-next .eyebrow{margin-bottom:14px;}
  .gracias-next ol{margin:0;padding-left:20px;color:var(--grey);font-size:15px;line-height:1.8;}
  .gracias-next li::marker{color:var(--accent);font-family:var(--mono);}