/**
 * Qtzalit — Home Rediseño (QtzalIT)
 * Hoja de estilos propia de esta plantilla (no forma parte del pipeline
 * Bootstrap del theme). Se encola solo cuando se usa page-rediseno-home.php.
 *
 * @since v1.0
 */

  :root{
    --ink:#0A1712;          /* base near-black forest */
    --ink-2:#0E2019;        /* panel */
    --ink-3:#12281F;        /* raised panel */
    --jade:#143D2E;
    --emerald:#1AA873;      /* primary jewel green (not acid) */
    --emerald-bright:#27C98C;
    --teal:#10B3AC;         /* iridescent partner */
    --gold:#E6B450;
    --scarlet:#E1503E;      /* quetzal breast accent */
    --parchment:#F5F0E4;    /* light sections / text */
    --parchment-2:#EDE6D6;
    --mist:#A9C2B6;         /* muted text on dark */
    --mist-dim:#7E988C;
    --line:rgba(169,194,182,.16);
    --line-light:rgba(20,40,30,.14);
    --shadow:0 24px 60px -24px rgba(0,0,0,.6);
    --r:18px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);
    color:var(--parchment);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.04;letter-spacing:-.02em}
  .mono{font-family:"JetBrains Mono",ui-monospace,monospace}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--emerald-bright);display:inline-flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--emerald)}
  .eyebrow.dark{color:var(--jade)}
  .eyebrow.dark::before{background:var(--scarlet)}

  /* ---------- focus / motion floor ---------- */
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:2px solid var(--emerald-bright);outline-offset:3px;border-radius:6px;
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

  /* ---------- skip link ---------- */
  .skip-link{
    position:fixed;top:-60px;left:16px;z-index:200;background:var(--emerald-bright);color:#05140D;
    font-weight:700;font-size:14px;padding:12px 18px;border-radius:10px;transition:top .2s ease;
  }
  .skip-link:focus{top:16px}

  /* ---------- scroll progress ---------- */
  .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:transparent}
  .progress span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--emerald-bright),var(--gold));
    transition:width .1s linear}

  /* ---------- reveal ---------- */
  .rev{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .rev.in{opacity:1;transform:none}

  /* ---------- nav ---------- */
  header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
    background:rgba(10,23,18,.72);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{display:flex;align-items:center;gap:11px;font-family:"Fraunces",serif;font-size:23px;font-weight:700;letter-spacing:-.01em}
  .brand .mk{width:30px;height:30px;flex:none}
  .brand b{color:var(--emerald-bright);font-weight:700}
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links a{font-size:14.5px;color:var(--mist);font-weight:500;transition:color .2s;position:relative;padding:4px 0}
  .nav-links a:hover{color:var(--parchment)}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--emerald-bright);
    transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .nav-links a.active{color:var(--parchment)}
  .nav-links a.active::after{transform:scaleX(1)}
  .btn{
    display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;
    padding:11px 20px;border-radius:999px;transition:transform .2s ease,box-shadow .2s ease,background .2s;
    cursor:pointer;border:1px solid transparent;font-family:"Hanken Grotesk",sans-serif;
  }
  .btn-primary{background:var(--emerald);color:#05140D;box-shadow:0 8px 24px -8px rgba(26,168,115,.6)}
  .btn-primary:hover{background:var(--emerald-bright);transform:translateY(-2px)}
  .btn-ghost{border-color:var(--line);color:var(--parchment)}
  .btn-ghost:hover{border-color:var(--emerald);color:var(--emerald-bright)}
  .nav-cta{display:flex;gap:12px;align-items:center}
  .burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px;cursor:pointer}
  .burger span{display:block;width:20px;height:2px;background:var(--parchment);margin:4px 0;border-radius:2px;
    transition:transform .25s ease,opacity .2s ease}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:var(--ink-2);padding:18px 28px;gap:6px;border-bottom:1px solid var(--line);
    animation:menuIn .22s ease}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav-links.open a{padding:10px 0}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:84px 0 96px;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
  .hero h1{font-size:clamp(40px,5.6vw,72px)}
  .hero h1 em{font-style:italic;color:var(--gold);font-weight:500}
  .hero .lede{margin-top:24px;font-size:19px;color:var(--mist);max-width:46ch}
  .hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
  .stats{margin-top:46px;display:flex;gap:34px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
  .stat .n{font-family:"Fraunces",serif;font-size:30px;color:var(--parchment);line-height:1}
  .stat .l{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-dim);margin-top:7px}

  /* plumage signature */
  .plume{position:relative;aspect-ratio:1/1;min-height:340px}
  .plume svg{position:absolute;inset:0;width:100%;height:100%}
  .glow{position:absolute;inset:-12%;background:
      radial-gradient(40% 40% at 62% 36%,rgba(39,201,140,.55),transparent 70%),
      radial-gradient(45% 45% at 36% 64%,rgba(16,179,172,.42),transparent 72%),
      radial-gradient(30% 30% at 70% 72%,rgba(225,80,62,.30),transparent 70%);
    filter:blur(8px);animation:float 9s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.03)}}
  .hero-bg{position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(60% 50% at 78% 18%,rgba(26,168,115,.13),transparent 60%),
      radial-gradient(50% 50% at 10% 80%,rgba(16,179,172,.10),transparent 60%)}
  .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* ---------- trust strip ---------- */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--ink-2)}
  .trust-in{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:space-between}
  .trust .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim)}
  .logos{display:flex;gap:14px;flex-wrap:wrap}
  .logos span{font-family:"Fraunces",serif;font-size:18px;color:var(--mist);opacity:.75;letter-spacing:.01em}
  .logos span::after{content:"·";margin-left:14px;color:var(--line)}
  .logos span:last-child::after{content:""}

  /* ---------- generic section ---------- */
  section{padding:96px 0}
  .sec-head{max-width:680px;margin-bottom:54px}
  .sec-head h2{font-size:clamp(30px,3.8vw,46px);margin-top:18px}
  .sec-head p{margin-top:18px;color:var(--mist);font-size:18px}

  /* services */
  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .svc{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
    padding:34px 32px 30px;transition:transform .3s ease,border-color .3s ease,background .3s}
  .svc:hover{transform:translateY(-5px);border-color:rgba(39,201,140,.4);background:var(--ink-3)}
  .svc .num{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--emerald-bright);letter-spacing:.1em}
  .svc h3{font-size:24px;margin:14px 0 12px;color:var(--parchment)}
  .svc p{color:var(--mist);font-size:15.5px}
  .svc .tags{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
  .svc .tags i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mist-dim);
    border:1px solid var(--line);padding:5px 10px;border-radius:999px}
  .svc .arc{position:absolute;top:30px;right:30px;width:34px;height:34px;opacity:.9}

  /* industries (light) */
  .light{background:var(--parchment);color:var(--ink)}
  .light .sec-head p{color:#3c4a42}
  .ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .ind{background:#fff;border:1px solid var(--line-light);border-radius:var(--r);padding:30px;transition:box-shadow .3s,transform .3s}
  .ind:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
  .ind .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
    background:linear-gradient(135deg,var(--jade),var(--emerald))}
  .ind h3{font-size:22px;color:var(--ink);margin-bottom:8px}
  .ind p{color:#46544b;font-size:15px}
  .ind .who{margin-top:16px;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:var(--jade)}
  .ind .who b{color:var(--scarlet);font-weight:600}

  /* process */
  .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .step{padding:32px 26px;border-right:1px solid var(--line);position:relative;background:var(--ink-2)}
  .step:last-child{border-right:none}
  .step .s-n{font-family:"Fraunces",serif;font-size:42px;color:var(--jade);line-height:1}
  .step:hover .s-n{color:var(--emerald)}
  .step h3{font-size:19px;margin:14px 0 9px;color:var(--parchment)}
  .step p{font-size:14px;color:var(--mist)}

  /* filters */
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
  .chip{
    font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.04em;
    background:transparent;border:1px solid var(--line);color:var(--mist);
    padding:9px 16px;border-radius:999px;cursor:pointer;transition:all .2s ease;
  }
  .chip:hover{border-color:var(--emerald);color:var(--parchment)}
  .chip.active{background:var(--emerald);border-color:var(--emerald);color:#05140D;font-weight:600}
  .case.hide{display:none}
  .empty-state{color:var(--mist);font-size:15px;padding:20px 0}
  .empty-state a{color:var(--emerald-bright);text-decoration:underline}

  /* cases */
  .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .case{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-2);transition:transform .3s,border-color .3s}
  .case:hover{transform:translateY(-5px);border-color:rgba(39,201,140,.4)}
  .case .thumb{height:158px;position:relative;overflow:hidden}
  .case .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,23,18,.5))}
  .c1{background:linear-gradient(135deg,#0F3D2E,#1AA873 80%)}
  .c2{background:linear-gradient(135deg,#10403B,#10B3AC 85%)}
  .c3{background:linear-gradient(135deg,#3a1410,#E1503E 90%)}
  .case .body{padding:24px 24px 26px}
  .case .kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist-dim)}
  .case h3{font-size:21px;margin:10px 0 10px;color:var(--parchment)}
  .case p{font-size:14.5px;color:var(--mist)}
  .case .metric{margin-top:18px;display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--line);padding-top:16px}
  .case .metric b{font-family:"Fraunces",serif;font-size:28px;color:var(--emerald-bright);font-weight:600}
  .case .metric span{font-size:13px;color:var(--mist-dim)}

  /* faq */
  .faq{max-width:820px}
  .faq-item{border-bottom:1px solid var(--line);padding:6px 0}
  .faq-item summary{
    list-style:none;cursor:pointer;padding:18px 40px 18px 4px;font-family:"Fraunces",serif;
    font-size:19px;color:var(--parchment);position:relative;transition:color .2s;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary:hover{color:var(--emerald-bright)}
  .faq-item summary::after{
    content:"+";position:absolute;right:4px;top:16px;font-family:"Hanken Grotesk",sans-serif;
    font-size:22px;color:var(--emerald-bright);transition:transform .25s ease;
  }
  .faq-item[open] summary::after{transform:rotate(135deg)}
  .faq-a{padding:0 40px 20px 4px;color:var(--mist);font-size:15.5px;max-width:64ch}
  .faq-item[open] .faq-a{animation:faqIn .25s ease}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* testimonial */
  .quote{max-width:860px;margin:0 auto;text-align:center}
  .quote h2{font-size:clamp(26px,3.4vw,40px);font-weight:500;line-height:1.22}
  .quote h2 span{color:var(--gold)}
  .quote .who{margin-top:26px;font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.08em;color:var(--mist)}

  /* contact */
  .contact{background:var(--ink-2);border-top:1px solid var(--line)}
  .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
  .field{margin-bottom:18px}
  .field label{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--mist-dim);margin-bottom:8px}
  .field input,.field textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;color:var(--parchment);font-family:"Hanken Grotesk",sans-serif;font-size:16px;transition:border-color .2s}
  .field input::placeholder,.field textarea::placeholder{color:var(--mist-dim)}
  .field input:focus,.field textarea:focus{border-color:var(--emerald)}
  .field textarea{min-height:120px;resize:vertical}
  .field-err{display:none;margin-top:7px;font-size:13px;color:#F0A199}
  .field.invalid input,.field.invalid textarea{border-color:var(--scarlet)}
  .field.invalid .field-err{display:block}
  #formSubmit{position:relative}
  #formSubmit.sending{opacity:.75;cursor:progress}
  #formSubmit.sending #formSubmitLabel::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;
    border-radius:50%;border:2px solid rgba(5,20,13,.35);border-top-color:#05140D;vertical-align:-2px;
    animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .form-status{margin-top:14px;font-size:14.5px;min-height:1.4em}
  .form-status.ok{color:var(--emerald-bright)}
  .form-status.err{color:#F0A199}
  .info-card{background:linear-gradient(160deg,var(--ink-3),var(--jade));border:1px solid var(--line);border-radius:var(--r);padding:30px}
  .info-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
  .info-row:last-child{border-bottom:none}
  .info-row .ic{width:38px;height:38px;border-radius:10px;background:rgba(39,201,140,.14);display:grid;place-items:center;flex:none}
  .info-row .t{font-size:12px;color:var(--mist-dim);font-family:"JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
  .info-row .v{font-size:16px;color:var(--parchment);margin-top:3px}
  .wa{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;width:100%;
    background:#1FBF73;color:#05140D;font-weight:700;padding:14px;border-radius:12px;transition:transform .2s,background .2s}
  .wa:hover{transform:translateY(-2px);background:#27C98C}

  /* footer */
  footer{background:var(--ink);border-top:1px solid var(--line);padding:64px 0 40px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
  .foot-grid h4{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim);margin-bottom:16px}
  .foot-grid a{display:block;color:var(--mist);font-size:15px;padding:5px 0;transition:color .2s}
  .foot-grid a:hover{color:var(--emerald-bright)}
  .foot-brand p{color:var(--mist);font-size:15px;margin-top:16px;max-width:34ch}
  .foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:14px;font-size:13px;color:var(--mist-dim);font-family:"JetBrains Mono",monospace;letter-spacing:.04em}

  /* floating whatsapp */
  .fab-wrap{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:12px}
  .fab{width:58px;height:58px;border-radius:50%;flex:none;
    background:#1FBF73;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(31,191,115,.7);
    transition:transform .25s;animation:pop 4s ease-in-out infinite}
  .fab:hover{transform:scale(1.08)}
  @keyframes pop{0%,92%,100%{transform:scale(1)}96%{transform:scale(1.1)}}
  .fab-tip{
    background:var(--ink-2);border:1px solid var(--line);color:var(--parchment);font-size:13.5px;
    padding:9px 14px;border-radius:10px;white-space:nowrap;opacity:0;transform:translateX(6px);
    transition:opacity .2s ease,transform .2s ease;pointer-events:none;order:-1;
  }
  .fab-wrap:hover .fab-tip{opacity:1;transform:none}

  /* back to top */
  .to-top{
    position:fixed;left:22px;bottom:22px;z-index:60;width:46px;height:46px;border-radius:50%;
    background:var(--ink-3);border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;
    transition:opacity .25s ease,transform .2s ease,border-color .2s ease;opacity:0;
  }
  .to-top.show{opacity:1}
  .to-top:hover{transform:translateY(-3px);border-color:var(--emerald)}
  @media(max-width:560px){.fab-tip{display:none}}

  /* propuesta ribbon */
  .ribbon{background:var(--scarlet);color:#fff;text-align:center;font-family:"JetBrains Mono",monospace;
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:8px}

  /* responsive */
  @media(max-width:920px){
    .hero-grid,.contact-grid{grid-template-columns:1fr}
    .plume{order:-1;min-height:260px;max-width:360px;margin:0 auto}
    .svc-grid,.ind-grid{grid-template-columns:1fr}
    .case-grid{grid-template-columns:1fr}
    .proc{grid-template-columns:1fr 1fr}
    .step{border-bottom:1px solid var(--line)}
    .foot-grid{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .burger{display:block}
    .nav-cta .btn-ghost{display:none}
  }
  @media(max-width:560px){
    .proc{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    section{padding:68px 0}
  }

/* ==========================================================================
   Ajustes de compatibilidad — Contact Form 7
   El formulario real (plugin CF7) vive dentro de los mismos contenedores
   .field / .contact-grid del diseño original, así que hereda casi todo el
   estilo por selectores de descendiente (.field input, .field textarea).
   Estos ajustes cubren únicamente lo que CF7 añade por su cuenta:
   el wrapper <span> de cada campo, el estado "no válido" y su mensaje
   propio de respuesta (que ocultamos porque usamos nuestro #formStatus).
   ========================================================================== */
.field .wpcf7-form-control-wrap{display:block}
.field .wpcf7-not-valid{border-color:var(--scarlet)!important}
.field .wpcf7-not-valid-tip{display:block;margin-top:7px;font-size:13px;color:#F0A199}
.wpcf7-response-output{display:none!important}
.wpcf7-spinner{display:none!important} /* usamos nuestra propia animación .sending en el botón */