/* =====================================================================
   PÁGINA DE VENTA (vender.html) — hoja propia, independiente de styles.css
   (las demos de cada rubro siguen usando styles.css sin cambios).
   Formato de portfolio: texto en una columna, el trabajo real en grande,
   sin tarjetas, sin íconos y sin efectos. Negro sobre papel.
   ===================================================================== */
:root{
  --bg:#F5F4F0;
  --paper:#FFFFFF;
  --text:#1A1A18;
  --muted:#66635D;
  --faint:#97938B;
  --line:rgba(26,26,24,.12);
  --sans:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
  --wrap:1180px;
  --gutter:28px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
img,video{display:block; max-width:100%; height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.025em; text-wrap:balance}
:focus-visible{outline:2px solid var(--text); outline-offset:3px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter)}
.mono{font-family:var(--mono); font-size:13px; letter-spacing:-.01em; color:var(--muted)}

/* Botón y enlaces */
.btn{display:inline-flex; align-items:center; min-height:46px; padding:0 20px; border-radius:6px; background:var(--text); color:#fff;
  font:500 15.5px/1 var(--sans); text-decoration:none; transition:background-color .15s}
.btn:hover{background:#000}
.link{color:var(--text); text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:4px; transition:text-decoration-color .15s}
.link:hover{text-decoration-color:var(--text)}

/* Encabezado */
.top{display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding-block:28px}
.top__name{font-weight:500; text-decoration:none; letter-spacing:-.01em}
.top nav{display:flex; gap:28px; font-size:15px}
.top nav a{color:var(--muted); text-decoration:none}
.top nav a:hover{color:var(--text)}

/* Presentación */
.intro{padding-block:72px 64px}
.intro h1{font-size:clamp(30px,4.2vw,52px); line-height:1.1; max-width:21ch}
.intro__text{margin-top:28px; max-width:56ch; color:var(--muted); font-size:clamp(17px,1.5vw,19px)}
.intro__cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:36px}

/* Figuras */
figure{margin:0}
figcaption{margin-top:14px; font-size:14.5px; color:var(--muted); max-width:46ch}
figcaption b{color:var(--text); font-weight:500}
.browser{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper)}
.browser__bar{display:flex; justify-content:center; padding:9px 12px; border-bottom:1px solid var(--line); font:400 12.5px/1 var(--mono); color:var(--muted); background:#FAFAF8}
.shot{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper)}
.shot video{width:100%; aspect-ratio:600/1298; background:#E9EEF5}

/* Secciones */
.block{padding-block:96px; border-top:1px solid var(--line)}
.block__head{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; margin-bottom:56px}
.block__head h2{font-size:clamp(24px,2.6vw,32px); line-height:1.2}
.block__head .lead{color:var(--muted); max-width:58ch}
.block__head .lead p+p{margin-top:14px}

.facts{display:grid; grid-template-columns:auto 1fr; gap:8px 24px; margin:28px 0 0; font-size:15px}
.facts dt{font-family:var(--mono); font-size:13px; color:var(--faint); padding-top:2px}
.facts dd{margin:0}

.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:start}
.wide{margin-top:64px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; align-items:end}
.wide figcaption{margin:0}

/* Qué incluye */
.list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.list li{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; padding:20px 0; border-bottom:1px solid var(--line)}
.list li b{font-weight:500}
.list li span{color:var(--muted)}

/* Precio */
.price{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px}
.price__num{font-size:clamp(44px,6vw,76px); line-height:1; font-weight:500; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.price__num small{font-size:.32em; letter-spacing:-.01em; color:var(--muted); font-weight:400; margin-left:6px}
.price__body{display:grid; gap:14px; margin-top:28px; max-width:58ch}
.price__body p{color:var(--muted)}
.price__body p strong{color:var(--text); font-weight:500}

/* Otros rubros */
.rubros{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.rubros li{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto; gap:24px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line)}
.rubros__name{display:flex; align-items:center; gap:12px; font-weight:500}
.rubros__name i{width:10px; height:10px; border-radius:50%; flex:0 0 auto}
.rubros__desc{color:var(--muted)}
.rubros__links{display:flex; gap:20px; font-size:15px; white-space:nowrap}
.try{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:40px}
.try label{width:100%; font-size:15px; color:var(--muted); margin-bottom:4px}
.try input, .try select{min-height:46px; padding:0 14px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--text); font:400 16px var(--sans)}
.try input{flex:1 1 260px}
.try input:focus, .try select:focus{outline:none; border-color:var(--text)}
.try .btn{border:0; cursor:pointer}

/* Preguntas */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; padding:18px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px; color:var(--muted); max-width:62ch}

/* Contacto */
.contact__line{font-size:clamp(24px,2.6vw,32px); line-height:1.25; letter-spacing:-.025em; max-width:26ch}
.contact__actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:32px}
.footer{border-top:1px solid var(--line); padding-block:24px 32px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}

/* Responsive */
@media (max-width:900px){
  .block{padding-block:72px}
  .block__head, .wide, .price, .list li{grid-template-columns:1fr; gap:14px}
  .list li{gap:4px}
  .block__head{margin-bottom:40px}
  .trio{grid-template-columns:repeat(3,minmax(220px,1fr)); overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-bottom:8px; gap:16px}
  .trio figure{scroll-snap-align:start}
  .wide{margin-top:48px}
  .rubros li{grid-template-columns:1fr auto; gap:6px 16px}
  .rubros__desc{grid-row:2; grid-column:1/-1; font-size:15px}
}
@media (max-width:600px){
  :root{--gutter:20px}
  body{font-size:16px}
  .top nav a:not(.top__wa){display:none}
  .intro{padding-block:40px 48px}
  .trio{grid-template-columns:repeat(3,76%)}
  .browser__bar{font-size:11.5px}
}