@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --kc-paper:#F3F0E8;
  --kc-paper-raised:#FBF9F3;
  --kc-paper-sunken:#E9E4D7;
  --kc-ink:#17140F;
  --kc-graphite:#4A5049;
  --kc-line:rgba(23,20,15,.14);
  --kc-line-strong:rgba(23,20,15,.28);
  --kc-roast:#B5622B;
  --kc-roast-deep:#8C4A20;
  --kc-roast-tint:rgba(181,98,43,.12);
  --kc-moss:#5C6B4F;
  --kc-moss-tint:rgba(92,107,79,.14);
  --kc-alert:#A63D2E;
  --kc-alert-tint:rgba(166,61,46,.12);
  --kc-on-roast:#FBF6EE;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  color-scheme: light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--kc-paper);color:var(--kc-ink);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Clash Display','IBM Plex Sans',sans-serif;font-weight:600;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em;}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em;color:var(--kc-graphite);}
a{color:inherit;text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}
img{max-width:100%;display:block;}

.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.container-narrow{max-width:760px;margin:0 auto;padding:0 24px;}
section{padding:64px 0;}
section.tight{padding:36px 0;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kc-roast);margin:0 0 10px;font-weight:500;
}
.section-head{max-width:640px;margin:0 0 40px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:9px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.btn-primary{background:var(--kc-roast);color:var(--kc-on-roast);}
.btn-primary:hover{background:var(--kc-roast-deep);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:transparent;border-color:var(--kc-line-strong);color:var(--kc-ink);}
.btn-ghost:hover{border-color:var(--kc-ink);background:var(--kc-paper-raised);}
.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-block{width:100%;}
.btn:focus-visible{outline:2px solid var(--kc-roast);outline-offset:2px;}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(243,240,232,.86);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);}
.site-header.is-scrolled{border-color:var(--kc-line);box-shadow:0 1px 0 rgba(23,20,15,.04);}
.nav{max-width:1180px;margin:0 auto;padding:14px 24px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;}
.brand img{width:166px;height:auto;}
.nav-links{list-style:none;display:flex;justify-content:center;gap:26px;margin:0;padding:0;}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--kc-graphite);padding:4px 0;border-bottom:2px solid transparent;transition:color .16s, border-color .16s;}
.nav-links a:hover,.nav-links a.active{color:var(--kc-ink);border-color:var(--kc-roast);}
/* grid-column:3 fijo: sin esto, cuando .nav-links desaparece en móvil (ver media query de abajo),
   la rejilla reacomoda a .nav-actions en la columna del medio (la "1fr" que era de .nav-links) en
   vez de la última — por eso el botón de hamburguesa aparecía pegado al logo en vez de en la
   esquina derecha. Fijar la columna lo mantiene siempre pegado al borde derecho. */
.nav-actions{display:flex;align-items:center;gap:10px;grid-column:3;}
.nav-menu-btn{display:none;background:none;border:none;padding:8px;color:var(--kc-ink);cursor:pointer;}

.mobile-panel{
  position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--kc-paper-raised);
  transform:translateX(100%);transition:transform .32s var(--ease-out);z-index:50;
  padding:20px;display:flex;flex-direction:column;gap:22px;box-shadow:-8px 0 30px rgba(23,20,15,.14);
}
.mobile-panel.open{transform:translateX(0);}
.mobile-panel-top{display:flex;justify-content:space-between;align-items:center;}
.mobile-panel-top img{height:24px;}
.mobile-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
/* Antes era ".mobile-panel a", que también agarraba los dos botones de abajo (Comenzar prueba
   gratis / Iniciar sesión) — como esa regla pesa más que .btn, les imponía display:block y
   tumbaba el centrado de texto de .btn. Se limita solo a los enlaces de la lista de navegación. */
.mobile-panel ul a{display:block;padding:12px 4px;font-size:16px;border-bottom:1px solid var(--kc-line);}

@media (max-width:900px){
  .nav-links,.nav-actions .btn{display:none;}
  .nav-menu-btn{display:inline-flex;}
}

/* Hero */
.page-hero{padding:76px 0 40px;}
.page-hero .eyebrow{margin-top:0;}
.hero{padding:64px 0 24px;text-align:center;}
.hero-media{border-radius:18px;overflow:hidden;border:1px solid var(--kc-line);box-shadow:0 24px 60px -30px rgba(23,20,15,.35);margin:40px auto 0;max-width:640px;}
.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap;}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.card{background:var(--kc-paper-raised);border:1px solid var(--kc-line);border-radius:14px;padding:24px;transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(23,20,15,.3);}
.icon{width:30px;height:30px;color:var(--kc-roast);margin-bottom:12px;flex-shrink:0;}
.contact-card .icon{width:26px;height:26px;margin-bottom:10px;}
@media (max-width:820px){.card-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}

/* Pasos */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step{padding:8px 0;}
.step .n{font-family:'IBM Plex Mono',monospace;color:var(--kc-roast);font-size:13px;}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* Feature rows */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--kc-line);}
.feature-row:first-of-type{border-top:none;}
.feature-row.reverse .feature-media{order:2;}
.feature-media{border-radius:16px;overflow:hidden;border:1px solid var(--kc-line);}
.feature-media img{transition:transform .5s var(--ease-out);}
.feature-row:hover .feature-media img{transform:scale(1.03);}
.feature-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.feature-list li{padding-left:24px;position:relative;color:var(--kc-graphite);font-size:14.5px;}
.feature-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--kc-moss);}
@media (max-width:900px){.feature-row,.feature-row.reverse{grid-template-columns:1fr;gap:24px;}.feature-row.reverse .feature-media{order:0;}}

/* Precios */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto;}
.plan{background:var(--kc-paper-raised);border:1px solid var(--kc-line);border-radius:16px;padding:30px;position:relative;transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);}
.plan:hover{transform:translateY(-2px);}
.plan.featured{border-color:var(--kc-roast);box-shadow:0 22px 50px -28px rgba(181,98,43,.4);}
.plan-badge{position:absolute;top:-12px;right:24px;background:var(--kc-roast);color:var(--kc-on-roast);font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;}
.plan-sub{font-size:13.5px;}
.price{display:flex;align-items:baseline;gap:6px;margin:18px 0 4px;}
.price .cur{font-size:14px;color:var(--kc-graphite);}
.price .amount{font-family:'IBM Plex Mono',monospace;font-size:2.4rem;font-weight:500;color:var(--kc-ink);}
.price .cycle{font-size:14px;color:var(--kc-graphite);}
.save{font-size:12.5px;color:var(--kc-moss);margin:0 0 18px;}
/* El botón venía pegado a la última línea de la lista (.feature-list solo trae margin-top de
   base, sin separación hacia abajo) — Antonio lo reportó en escritorio y en móvil. Este margen
   inferior separa la lista del botón "Comenzar prueba gratis" en las dos tarjetas de precio,
   sin depender de que ambas tarjetas midan lo mismo. */
.plan .feature-list{margin-bottom:26px;}
@media (max-width:700px){.plans{grid-template-columns:1fr;}}

.trial-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--kc-moss-tint);border-radius:14px;padding:20px 26px;margin-top:28px;flex-wrap:wrap;}
.trial-strip p{margin:0;color:var(--kc-ink);}

.faq-list{display:flex;flex-direction:column;gap:2px;}
.faq-item{border-bottom:1px solid var(--kc-line);padding:16px 0;}
.faq-item summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:20px;color:var(--kc-roast);transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .a{margin-top:10px;}

.cta-band{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--kc-ink);color:var(--kc-on-roast);border-radius:18px;padding:36px 40px;flex-wrap:wrap;}
.cta-band h2{color:var(--kc-on-roast);margin-bottom:6px;}
.cta-band p{color:rgba(251,246,238,.72);margin:0;}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.contact-card{background:var(--kc-paper-raised);border:1px solid var(--kc-line);border-radius:14px;padding:22px 24px;margin-bottom:14px;}
.contact-card h3{margin-bottom:6px;font-size:15px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1/-1;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo label{font-size:13px;font-weight:600;}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:15px;padding:11px 13px;border-radius:9px;
  border:1px solid var(--kc-line-strong);background:var(--kc-paper);color:var(--kc-ink);
  transition:border-color .16s, box-shadow .16s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--kc-roast);box-shadow:0 0 0 3px var(--kc-roast-tint);}
.campo textarea{resize:vertical;min-height:120px;}
.campo .error-txt{font-size:12.5px;color:var(--kc-alert);min-height:1em;}
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden;}

.aviso{padding:14px 16px;border-radius:10px;font-size:14px;margin:0 0 18px;}
.aviso-ok{background:var(--kc-moss-tint);color:#2E3A26;}
.aviso-error{background:var(--kc-alert-tint);color:var(--kc-alert);}

/* Footer */
footer{border-top:1px solid var(--kc-line);padding:52px 0 26px;margin-top:40px;}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px;padding-bottom:34px;}
.footer-brand img{height:24px;margin-bottom:10px;}
.footer-desc{font-size:13.5px;max-width:280px;}
.footer-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--kc-graphite);margin:0 0 12px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:14px;color:var(--kc-graphite);transition:color .15s;}
.footer-col a:hover{color:var(--kc-roast);}
.footer-bottom{display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid var(--kc-line);font-size:12.5px;color:var(--kc-graphite);flex-wrap:wrap;gap:8px;}
@media (max-width:820px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* Reveal / movimiento */
[data-reveal],[data-reveal-group]>*{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-reveal].is-visible,[data-reveal-group].is-visible>*{opacity:1;transform:none;}
[data-reveal-group].is-visible>*:nth-child(2){transition-delay:.08s;}
[data-reveal-group].is-visible>*:nth-child(3){transition-delay:.16s;}
[data-reveal-group].is-visible>*:nth-child(4){transition-delay:.24s;}

/* Aviso de cookies */
.kw-cookies{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:60;max-width:640px;margin:0 auto;
  background:var(--kc-paper-raised);border:1px solid var(--kc-line-strong);border-radius:16px;
  padding:20px 22px;box-shadow:0 20px 50px -20px rgba(23,20,15,.35);
  display:flex;flex-direction:column;gap:14px;
}
.kw-cookies p{margin:0;font-size:13.5px;color:var(--kc-graphite);}
.kw-cookies p a{color:var(--kc-roast-deep);text-decoration:underline;}
.kw-cookies-botones{display:flex;justify-content:flex-end;gap:10px;}
@media (max-width:560px){
  .kw-cookies{left:12px;right:12px;bottom:12px;padding:16px 18px;}
  .kw-cookies-botones{justify-content:stretch;}
  .kw-cookies-botones .btn{flex:1;}
}

/* Páginas legales */
.legal-content h2{margin-top:2em;font-size:1.3rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-size:1.02rem;margin-top:1.4em;}
.legal-content p,.legal-content li{color:var(--kc-graphite);font-size:14.5px;}
.legal-content ul,.legal-content ol{margin:0 0 1.1em;padding-left:1.3em;}
.legal-content li{margin-bottom:.45em;}
.legal-content .legal-fecha{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--kc-roast);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2em;}
.legal-content .legal-aviso{background:var(--kc-moss-tint);border-radius:12px;padding:16px 18px;font-size:13.5px;color:#2E3A26;margin-bottom:2.2em;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal],[data-reveal-group]>*{opacity:1!important;transform:none!important;transition:none!important;}
  .btn,.card,.plan,.feature-media img{transition:none!important;}
}