/* ===================================================================
   Landing — Servicio de creación de sitios web
   Extiende assets/css/style.css. Solo patrones que la landing necesita:
   breadcrumbs, hero de dos columnas, marco de navegador, portafolio con
   imagen, precios, línea de proceso, bloque de conversión y formulario
   amplio agrupado. Reutiliza variables y clases globales — no las
   redefine.
   =================================================================== */

/* ── BREADCRUMBS ── */
.breadcrumbs{
  max-width:1040px;margin:0 auto;padding:18px 24px 0;
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint);
}
.breadcrumbs a{color:var(--faint);text-decoration:none;}
.breadcrumbs a:hover{color:var(--accent);}
.breadcrumbs span[aria-hidden]{color:var(--line-strong);}
.breadcrumbs .current{color:var(--muted);}

/* ── HERO DE DOS COLUMNAS ── */
.service-hero{
  max-width:1040px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;
  padding:44px 24px 56px;
}
.service-hero h1{max-width:20ch;}
@media (max-width:900px){
  .service-hero{grid-template-columns:1fr;padding-top:28px;}
}

/* Marco de navegador para mostrar capturas de sitios reales */
.browser-frame{
  border:1px solid var(--line-strong);border-radius:var(--radius-md);
  overflow:hidden;background:var(--bg-raised);
}
.browser-frame-bar{
  display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);
}
.browser-frame-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);}
.browser-frame img{width:100%;height:auto;display:block;}

/* ── PORTAFOLIO ── */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px;}
.portfolio-card{
  background:var(--bg-raised-2);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
  transition:border-color .15s ease,transform .15s ease;
}
.portfolio-card:hover{border-color:var(--line-strong);transform:translateY(-2px);}
.portfolio-card-shot{aspect-ratio:16/11;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg-raised);}
.portfolio-card-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.portfolio-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.portfolio-card .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.portfolio-card .t{font-family:var(--serif);font-size:17px;margin-bottom:6px;}
.portfolio-card .d{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:14px;flex:1;}
.portfolio-card .cta{font-size:12.5px;font-weight:600;color:var(--accent);}

/* ── PRECIOS ── */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px;align-items:stretch;}
.pricing-card{
  background:var(--bg-raised-2);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:26px 24px 24px;display:flex;flex-direction:column;
}
.pricing-card.featured{border-color:var(--accent);position:relative;}
.pricing-card .pricing-badge{
  align-self:flex-start;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:20px;margin-bottom:12px;
}
.pricing-card h3{font-family:var(--serif);font-size:19px;margin-bottom:6px;}
.pricing-card .pricing-desc{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:16px;}
.pricing-card .pricing-amount{font-family:var(--serif);font-size:28px;color:var(--ink);margin-bottom:16px;}
.pricing-card .pricing-amount small{font-family:var(--mono);font-size:11px;color:var(--faint);font-weight:400;}
.pricing-card ul{list-style:none;margin-bottom:20px;flex:1;}
.pricing-card li{
  font-size:13px;color:var(--muted);padding:7px 0;border-top:1px solid var(--line);
}
.pricing-card li:first-child{border-top:none;}
.pricing-card .btn{align-self:flex-start;}

/* ── LÍNEA DE PROCESO ── */
.process-list{display:flex;flex-direction:column;max-width:640px;margin-top:28px;}
.process-step{display:flex;gap:18px;padding-bottom:26px;position:relative;}
.process-step:not(:last-child)::before{
  content:'';position:absolute;left:15px;top:34px;bottom:0;width:1px;background:var(--line-strong);
}
.process-step-num{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12.5px;
  background:var(--bg);position:relative;z-index:1;
}
.process-step h3{font-size:15.5px;margin-bottom:4px;}
.process-step p{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:56ch;}

/* ── BLOQUE FINAL DE CONVERSIÓN ── */
.conversion-block{
  max-width:1040px;margin:0 auto;text-align:center;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);
  padding:48px 32px;background:var(--bg-raised);
}
.conversion-block h2{max-width:26ch;margin-left:auto;margin-right:auto;}
.conversion-block .lead{margin-left:auto;margin-right:auto;}
.conversion-block .btn-row{justify-content:center;}

/* ── FORMULARIO AMPLIO Y AGRUPADO ── */
.service-form{max-width:780px;}
.form-section{margin-bottom:36px;}
.form-section:last-child{margin-bottom:0;}
.form-section-title{
  font-family:var(--mono);font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px;
}
.form-section-hint{font-size:12.5px;color:var(--faint);margin-bottom:18px;}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px;}
@media (max-width:680px){.form-grid{grid-template-columns:1fr;}}
.form-grid .field-full{grid-column:1/-1;}

.choice-fieldset{border:none;padding:0;margin:0;min-width:0;}
.field-group-label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;padding:0;width:100%;
}
.choice-grid{display:flex;flex-wrap:wrap;gap:8px 10px;}
.choice-item{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-raised-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:9px 13px;font-size:13px;color:var(--ink);cursor:pointer;
}
.choice-item:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
.choice-item input{accent-color:var(--accent);width:14px;height:14px;flex-shrink:0;}
.choice-item:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}

.service-form .btn{align-self:flex-start;margin-top:8px;}