/* Ordeno — sistema de diseño del sitio de marketing (index, precios).
   Tono: comida rápida. Crema de papel de envolver, tinta de parrilla, rojo salsa y mostaza.
   Títulos en Bricolage Grotesque, texto en Figtree. La mostaza NUNCA va como texto sobre crema
   (no se lee): solo como fondo o sobre la tinta oscura. */
:root{
  --ink:#17110D; --ink-2:#221914; --ink-3:#2E231C;
  --paper:#FFF8EF; --paper-2:#F6EADB; --white:#FFFFFF;
  --red:#E8321C; --red-600:#C8260F; --red-soft:#FFE6DF;
  --mustard:#FFB627; --mustard-soft:#FFF1CF;
  --green:#15803D; --green-soft:#DCFCE7; --wa:#25D366;
  --muted:#6B5B50; --muted-dark:#B9A89A;
  --line:#EADBCB; --line-dark:rgba(255,248,239,.12);
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --shadow:0 24px 60px -24px rgba(23,17,13,.35);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px;border-radius:6px}

/* Tipografía */
.h-display{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.98}
h1,h2,h3{font-family:var(--display);letter-spacing:-.022em;line-height:1.05}
h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
.lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);max-width:620px}
.on-dark .lead,.dark .lead{color:var(--muted-dark)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red-600)}
.dark .eyebrow{color:var(--mustard)}
.eyebrow::before{content:"";width:18px;height:3px;border-radius:3px;background:currentColor}
.mark{background:linear-gradient(transparent 58%,var(--mustard) 58%,var(--mustard) 90%,transparent 90%);padding:0 .08em}
.dark .mark{background:none;color:var(--mustard)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:700;font-size:1rem;padding:15px 24px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px -10px rgba(232,50,28,.7)}
.btn-red:hover{background:var(--red-600)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.dark .btn-ghost{border-color:rgba(255,248,239,.4);color:var(--paper)}
.btn-mustard{background:var(--mustard);color:var(--ink)}
.btn-wa{background:var(--wa);color:#08331a}
.btn-sm{padding:10px 18px;font-size:.92rem}
.btn svg{flex:none}

/* Navegación */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,248,239,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.04em}
.logo-mark{width:36px;height:36px;border-radius:11px;background:var(--red);display:grid;place-items:center;flex:none}
.logo-mark svg{width:22px;height:22px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink);opacity:.82}
.nav-links a:hover{opacity:1;color:var(--red-600)}
.nav-links a.cur{opacity:1;color:var(--red-600)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-login{font-weight:700;font-size:.95rem;text-decoration:none;padding:10px 12px}
.nav-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--white);cursor:pointer;align-items:center;justify-content:center}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;content:""}
.nav-burger span::before{position:absolute;top:-6px}
.nav-burger span::after{position:absolute;top:6px}
.nav-sheet{display:none}
@media (max-width:920px){
  .nav-links{display:none}
  .nav-login{display:none}
  .nav-burger{display:inline-flex}
  .nav-sheet.open{display:flex;flex-direction:column;gap:4px;padding:10px 20px 20px;border-top:1px solid var(--line);background:var(--paper)}
  .nav-sheet a{padding:12px 4px;text-decoration:none;font-weight:700;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav-sheet a:last-child{border-bottom:0}
}
@media (max-width:420px){ .nav-right .btn{padding:10px 14px;font-size:.88rem} }

/* Secciones */
.section{padding:clamp(72px,10vw,120px) 0}
.dark{background:var(--ink);color:var(--paper)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(36px,5vw,56px);max-width:760px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;justify-items:center}

/* Tarjetas genéricas */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.dark .card{background:var(--ink-2);border-color:var(--line-dark)}

/* Revelado al hacer scroll (solo si el usuario no pidió menos movimiento) */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}

/* Pie */
.footer{background:var(--ink);color:var(--muted-dark);padding:64px 0 36px}
.footer .logo{color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot-grid h4{font-family:var(--body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);margin-bottom:14px}
.foot-grid a{display:block;text-decoration:none;padding:5px 0;font-size:.95rem}
.foot-grid a:hover{color:var(--mustard)}
.foot-about{max-width:320px;margin-top:14px;font-size:.95rem}
.foot-copy{margin-top:48px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:.84rem;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid>div:first-child{grid-column:1/-1} }

/* Planes (index y precios) */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;display:flex;flex-direction:column;position:relative}
.plan.pro{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-10px)}
.plan-flag{position:absolute;top:-14px;left:26px;background:var(--mustard);color:var(--ink);font-weight:800;font-size:.76rem;padding:6px 12px;border-radius:999px;letter-spacing:.02em}
.plan h3{font-size:1.6rem}
.plan-for{color:var(--muted);font-size:.95rem;margin:6px 0 20px;min-height:48px}
.plan.pro .plan-for{color:var(--muted-dark)}
.price{font-family:var(--display);font-weight:800;font-size:2.7rem;letter-spacing:-.04em;line-height:1}
.price small{font-family:var(--body);font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:0}
.plan.pro .price small{color:var(--muted-dark)}
.plan-where{margin:14px 0 20px;font-size:.86rem;font-weight:700;padding:9px 12px;border-radius:12px;background:var(--paper);border:1px dashed var(--line)}
.plan.pro .plan-where{background:var(--ink-3);border-color:var(--line-dark)}
.plan ul{list-style:none;display:grid;gap:11px;margin-bottom:26px;font-size:.95rem}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2315803D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plan.pro li::before{background-color:var(--mustard);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2317110D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan li.inh{font-weight:800}
.plan li.inh::before{display:none}
.plan .btn{margin-top:auto;width:100%}
.plan-note{text-align:center;font-size:.82rem;color:var(--muted);margin-top:10px}
.plan.pro .plan-note{color:var(--muted-dark)}
.plans-foot{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;font-weight:600;color:var(--muted);font-size:.95rem}
.plans-foot span{display:inline-flex;gap:8px;align-items:center}
.plans-foot svg{color:var(--green)}
@media (max-width:980px){ .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto} .plan.pro{transform:none} .plan-for{min-height:0} }

/* Preguntas frecuentes */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:4px 22px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:700;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--red);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted)}