/* ==========================================================================
   Las páginas comerciales de bnbwebs.com
   ==========================================================================

   Portada de precios, páginas por sector, demos y solicitud. La portada
   principal tiene su propia hoja (landing-v2.css) porque es una página
   distinta; estas comparten una.

   Los colores de acento vienen de la página (--sector-accent).
   ========================================================================== */

.comercial {
  --ink: #0c0f0e;
  --ink-2: #121715;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #f2efe9;
  --muted: #a7ada8;
  --faint: #6f7773;
  --brass: #c9a227;
  --sector-accent: var(--brass);
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.65;
}

.comercial a {
  color: inherit;
}

.comercial h1,
.comercial h2 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 0;
}

.comercial p {
  margin: 0;
}

.comercial .btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.comercial .btn--primary {
  background: var(--brass);
  color: #17140a;
}

.comercial .btn--primary:hover {
  background: #e3c76a;
}

.comercial .btn--quiet {
  border-color: var(--line-strong);
  color: var(--text);
}

.comercial .btn--quiet:hover {
  border-color: var(--text);
}

/* --- cabecera ------------------------------------------------------------ */

.comercial-head {
  padding: clamp(3rem, 9vw, 5.5rem) 1.25rem clamp(2rem, 6vw, 3.5rem);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(201, 162, 39, .12), transparent 58%),
    var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.comercial-head__inner {
  max-width: 62rem;
  margin: 0 auto;
}

.comercial-brand {
  display: inline-block;
  margin-bottom: 2rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  text-decoration: none;
}

.comercial-brand span {
  color: var(--brass);
}

.comercial-head__eyebrow {
  margin: 0 0 .75rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sector-accent);
}

.comercial-head__title {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.1;
  max-width: 24ch;
}

.comercial-head__lead {
  margin-top: 1.1rem;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.comercial-head .comercial-cta__acciones {
  margin-top: 2rem;
}

/* --- cuerpo -------------------------------------------------------------- */

.comercial-main {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem 4rem;
}

.comercial-main--form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .comercial-main--form {
    grid-template-columns: 1fr;
  }
}

.comercial-subtitle {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  margin-bottom: .8rem;
}

.comercial-lead {
  max-width: 58ch;
  color: var(--muted);
}

/* --- planes ---------------------------------------------------------------- */

.comercial-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: .75rem;
  overflow: hidden;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--ink);
}

.plan--highlight {
  background: var(--ink-2);
}

.plan__name {
  margin: 0 0 .4rem;
  font-size: 1.4rem;
}

.plan__tagline {
  min-height: 3rem;
  color: var(--muted);
  font-size: .92rem;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 1rem 0 .2rem;
}

.plan__price strong {
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.plan__price span {
  color: var(--muted);
  font-size: .88rem;
}

.plan__setup {
  color: var(--faint);
  font-size: .8rem;
}

.plan__features {
  list-style: none;
  margin: 1.2rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .55rem;
  font-size: .9rem;
}

.plan__features li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .5rem;
  color: var(--muted);
}

.plan__features i {
  color: var(--brass);
  font-size: .8rem;
  margin-top: .35rem;
}

.plan__features--two {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  display: grid;
}

.plan__cta {
  margin-top: auto;
  align-self: flex-start;
  padding: .6rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .88rem;
  text-decoration: none;
}

.plan__cta:hover {
  border-color: var(--text);
}

/* --- gestion y extras ------------------------------------------------------ */

.comercial-addon {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 800px) {
  .comercial-addon {
    grid-template-columns: 1fr;
  }
}

.comercial-note {
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--ink-2);
  color: var(--muted);
  font-size: .92rem;
}

.comercial-note--aside h2 {
  font-size: 1.2rem;
  margin-bottom: .8rem;
}

.comercial-extras {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.extras {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.extras li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}

.extras span {
  color: var(--muted);
}

.extras b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .extras li {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}

/* --- caracteristicas -------------------------------------------------------- */

.comercial-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.feature h2 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
}

.feature p {
  color: var(--muted);
  font-size: .95rem;
}

.includes {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  color: var(--muted);
  font-size: .92rem;
}

.includes li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .5rem;
}

.includes i {
  color: var(--brass);
  font-size: .8rem;
  margin-top: .35rem;
}

.comercial-includes,
.comercial-demo,
.comercial-faq {
  margin-bottom: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.comercial-faq__item {
  border-bottom: 1px solid var(--line);
}

.comercial-faq__item summary {
  padding: 1rem 0;
  cursor: pointer;
  font-size: 1.02rem;
  list-style: none;
}

.comercial-faq__item summary::-webkit-details-marker {
  display: none;
}

.comercial-faq__item summary::after {
  content: '+';
  float: right;
  color: var(--brass);
}

.comercial-faq__item[open] summary::after {
  content: '−';
}

.comercial-faq__item p {
  padding-bottom: 1.1rem;
  color: var(--muted);
  font-size: .94rem;
  max-width: 62ch;
}

/* --- demos ------------------------------------------------------------------ */

.comercial-demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}

.demo {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--sector-accent);
  border-radius: .6rem;
  background: var(--ink-2);
}

.demo h2 {
  font-size: 1.35rem;
  margin-bottom: .5rem;
}

.demo p {
  color: var(--muted);
  font-size: .93rem;
}

.demo .btn {
  margin-top: 1.4rem;
}

/* --- solicitud --------------------------------------------------------------- */

.solicitud {
  display: grid;
  gap: 1.1rem;
}

.solicitud__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.solicitud__campo label {
  display: block;
  margin-bottom: .35rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.solicitud__campo input,
.solicitud__campo select,
.solicitud__campo textarea {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: .4rem;
  background: var(--ink-2);
  color: var(--text);
  font: inherit;
}

.solicitud__campo input:focus-visible,
.solicitud__campo select:focus-visible,
.solicitud__campo textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.solicitud__consent {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  color: var(--muted);
  font-size: .85rem;
}

.solicitud__mensaje {
  min-height: 1.3rem;
  font-size: .9rem;
}

.solicitud__mensaje.is-error {
  color: #e08b7f;
}

.solicitud__gracias h2 {
  font-size: 1.5rem;
  margin-bottom: .6rem;
}

.solicitud__gracias p {
  color: var(--muted);
}

.pasos {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: .5rem;
  font-size: .92rem;
}

.pasos li {
  color: var(--muted);
}

/* --- CTA ---------------------------------------------------------------------- */

.comercial-cta {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.comercial-cta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.4rem;
}

/* --- pie ----------------------------------------------------------------------- */

.comercial-foot {
  padding: 2.5rem 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: .84rem;
  text-align: center;
}

.comercial-foot a {
  color: var(--muted);
  text-decoration: none;
}

.comercial-foot a:hover {
  color: var(--text);
}

/* --- movement reducido ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .comercial *,
  .comercial *::before,
  .comercial *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- acentos por sector -------------------------------------------------- */

/* El color de acento lo elegia un atributo style en linea, que la politica de
   seguridad de contenidos descarta. Una clase por sector hace lo mismo sin
   depender de que el navegador acepte el estilo. */

.demo--restaurant,
.sector-page--restaurant {
  --sector-accent: #9c4a2a;
}

.demo--rental,
.sector-page--rental {
  --sector-accent: #4f9268;
}

.demo--hostel,
.sector-page--hostel {
  --sector-accent: #7d6b45;
}