/* ============================================================
   Webs para comercios locales — landing del servicio
   Dirección visual: toldo de comercio. Papel blanco, tinta azul marino,
   verde toldo y ámbar de luz de tienda. Un solo elemento memorable:
   la banda de rayas del toldo. Sin kit de tarjetas, sin adornos.
   ============================================================ */

:root {
  --tinta: #16233A;
  --papel: #FFFFFF;
  --papel-2: #F3F5F2;
  --verde: #1F6F4A;
  --verde-osc: #17563A;
  --ambar: #E8A33D;
  --gris: #5A6472;
  --linea: #DCE2DC;
  --radio: 6px;
  --sombra: 0 14px 40px rgba(22, 35, 58, .12);
  --fuente: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --paso: clamp(1.05rem, 2.4vw, 1.2rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.65;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container { width: min(1140px, 100% - 3rem); margin-inline: auto; }
.narrow { max-width: 720px; }

h1, h2, h3 { line-height: 1.08; letter-spacing: -.025em; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); margin-bottom: 1rem; }
h3 { font-size: 1.2rem; margin-bottom: .4rem; }

.lead { font-size: var(--paso); color: var(--gris); max-width: 62ch; }
.lead strong { color: var(--tinta); }

/* Banda de toldo: el elemento distintivo */
.toldo {
  height: 14px;
  background: repeating-linear-gradient(90deg,
    var(--verde) 0 34px, var(--papel) 34px 68px);
}
.toldo--fino { height: 8px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .85rem 1.7rem;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn--principal { background: var(--verde); color: #fff; }
.btn--principal:hover { background: var(--verde-osc); }
.btn--linea { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn--linea:hover { background: var(--tinta); color: #fff; }
.btn--claro { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn--claro:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn--ambar { background: var(--ambar); color: var(--tinta); }
.btn--ambar:hover { filter: brightness(1.06); }
.btn--sm { min-height: 44px; padding: .5rem 1.05rem; font-size: .95rem; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 62px; }
.nav__marca { font-weight: 800; text-decoration: none; color: var(--tinta); font-size: 1.05rem; line-height: 1.25; }
.nav__links { display: none; gap: 1.6rem; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--gris); font-weight: 600; font-size: .95rem; }
.nav__links a:hover { color: var(--verde); }
.nav__cta { margin-left: auto; }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 0; }
}

/* ---------- Hero (texto a la izquierda, foto sangrando a la derecha) ---------- */
.hero { display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.05fr .95fr; min-height: 76vh; } }
.hero__texto { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.hero__caja { width: min(560px, 100% - 3rem); margin-left: max(1.5rem, calc((100vw - 1140px) / 2 + 1.5rem)); margin-right: 1.5rem; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); margin-bottom: 1.25rem; }
.hero__sub { font-size: var(--paso); color: var(--gris); margin-bottom: 2rem; max-width: 46ch; }
.hero__sub strong { color: var(--tinta); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__confianza {
  list-style: none;
  margin-top: 2.25rem;
  display: grid;
  gap: .55rem;
  font-size: .95rem;
  color: var(--gris);
}
.hero__confianza li { position: relative; padding-left: 1.7rem; }
.hero__confianza li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 9px; height: 9px;
  background: var(--ambar);
  border-radius: 2px;
}
.hero__foto { position: relative; min-height: 320px; background: var(--tinta); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 959px) { .hero__foto { order: -1; min-height: 260px; } }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.seccion--papel2 { background: var(--papel-2); }
.seccion--tinta { background: var(--tinta); color: #fff; }
.seccion--tinta .lead { color: #B9C2D1; }

/* ---------- Qué incluye: lista con filetes ---------- */
.incluye { list-style: none; margin-top: 2.5rem; display: grid; gap: 0; }
@media (min-width: 760px) { .incluye { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.incluye li { padding: 1.35rem 0; border-top: 1px solid var(--linea); }
.incluye li:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 760px) {
  .incluye li:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
}
@media (max-width: 759px) {
  .incluye li:nth-last-child(2) { border-bottom: 0; }
}
.incluye p { color: var(--gris); font-size: .98rem; }

/* ---------- Pasos (secuencia real, numerada) ---------- */
.pasos { list-style: none; counter-reset: paso; margin-top: 2.5rem; display: grid; gap: 2rem; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.paso { counter-increment: paso; }
.paso::before {
  content: counter(paso);
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--ambar);
  line-height: 1;
  margin-bottom: .75rem;
  letter-spacing: -.03em;
}
.paso p { color: var(--gris); font-size: .97rem; }
.paso strong { color: var(--tinta); }

/* ---------- Material: lista + nota ---------- */
.material__lista { list-style: none; display: grid; gap: .9rem; margin-top: 1.5rem; }
.material__lista li { position: relative; padding-left: 2rem; color: var(--gris); }
.material__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 10px; height: 10px;
  background: var(--verde);
  border-radius: 2px;
}
.material__lista strong { color: var(--tinta); }
.material__nota {
  margin-top: 1.6rem;
  padding: 1.1rem 1.25rem;
  background: var(--papel-2);
  border-left: 4px solid var(--ambar);
  font-size: .95rem;
  color: var(--gris);
}
.material__nota strong { color: var(--tinta); }

/* ---------- Galería de demos (capturas reales) ---------- */
.galeria {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.captura { text-decoration: none; color: inherit; display: block; }
@media (min-width: 700px) {
  .captura--grande { grid-column: span 2; grid-row: span 2; }
}
.captura__marco {
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-2);
  aspect-ratio: 4 / 3;
}
.captura--grande .captura__marco { aspect-ratio: auto; height: calc(100% - 3.4rem); min-height: 300px; }
.captura__marco img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .3s ease;
}
.captura:hover .captura__marco img { transform: scale(1.03); }
.captura__pie { padding: .8rem .1rem 0; }
.captura__pie strong { display: block; font-size: 1.02rem; }
.captura__pie span { color: var(--gris); font-size: .9rem; }

.galeria__cta {
  background: var(--verde);
  color: #fff;
  border-radius: var(--radio);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
}
.galeria__cta h3 { color: #fff; }
.galeria__cta p { color: #D7E8DE; font-size: .97rem; }
.galeria__cta .btn { align-self: flex-start; }

.galeria__aviso { margin-top: 1.5rem; font-size: .9rem; color: var(--gris); }

/* ---------- Precio ---------- */
.precio { text-align: center; }
.precio__cifra {
  font-size: clamp(4rem, 12vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 1.2rem 0;
}
.precio__cifra span { font-size: .4em; font-weight: 700; }
.precio .lead { margin-inline: auto; }

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--linea);
  padding: 1.1rem 0;
}
.faq:last-of-type { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--verde); font-weight: 400; }
.faq[open] summary::after { content: "–"; }
.faq p { color: var(--gris); padding-top: .6rem; max-width: 65ch; }

/* ---------- Contacto ---------- */
.contacto { text-align: center; }
.contacto__mail { margin: 1.25rem 0 .5rem; }
.contacto__nota { color: #B9C2D1; font-size: .95rem; }
.pendiente {
  background: var(--ambar);
  color: var(--tinta);
  border-radius: var(--radio);
  padding: .45rem .9rem;
  font-size: 1rem;
  font-weight: 700;
}

/* ---------- Footer ---------- */
.footer { background: var(--tinta); color: #8B96A8; padding: 2rem 0 5.5rem; font-size: .9rem; }
.footer__inner { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; }

/* ---------- Barra CTA fija (móvil) ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  gap: .7rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(22, 35, 58, .96);
  backdrop-filter: blur(8px);
}
.sticky-cta .btn { flex: 1; white-space: nowrap; padding: .5rem .7rem; font-size: .92rem; }
@media (min-width: 900px) {
  .sticky-cta { display: none; }
  .footer { padding-bottom: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Suscripcion de interesados */
.suscripcion { margin-top: 1.5rem; display: grid; gap: .9rem; max-width: 460px; }
.suscripcion input[type="email"] {
  font: inherit; padding: .75rem .9rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); min-height: 48px;
}
.suscripcion__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--gris); }
.suscripcion__consent input { margin-top: .3rem; }
.suscripcion button { justify-self: start; }
.suscripcion__ok { color: var(--verde); font-weight: 700; }
.suscripcion__err { color: #B23C0A; font-weight: 600; }
/* New art direction: warm editorial studio, ink green and citrus. */
:root { --tinta: #182f28; --verde: #244c3c; --verde-osc: #153426; --papel: #fbfaf6; --papel-2: #eeeee5; --ambar: #e5ef87; --gris: #59665f; --linea: #d7dcd0; --radio: 4px; }
.toldo { height: 5px; background: var(--verde); }
.nav { background: #fbfaf6ed; }
.nav__inner { min-height: 86px; }
.nav__marca { max-width: 185px; font-size: 1.1rem; letter-spacing: -.04em; }
.hero { width: min(1360px,100%); margin: auto; grid-template-columns: 1.05fr 1fr; min-height: 730px; align-items: center; padding: 3rem 0; }
.hero__texto { padding: 2rem 0; }
.hero__caja { margin: auto; width: calc(100% - 4rem); max-width: 600px; }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: 1.6rem; color: var(--verde); }
.hero h1 { font-size: clamp(3.5rem,5.6vw,5.6rem); font-weight: 600; letter-spacing: -.065em; line-height: 1.04; }
.hero h1 em { font-family: Georgia,serif; font-weight: 400; color: var(--verde); }
.hero__sub { font-size: 1.05rem; max-width: 46ch; }
.hero__confianza { font-size: .8rem; margin-top: 1.5rem; }
.hero-showcase { padding: 1rem 2.5rem 1rem 1rem; }
.browser-preview { background: #fff; border: 1px solid #d2d8cc; border-radius: 10px; overflow: hidden; box-shadow: 0 25px 65px #203c2820; transform: rotate(2deg); }
.browser-bar { padding: .8rem 1rem; display: flex; justify-content: space-between; font-size: .65rem; color: #6e776c; }
.preview-content { display: block; position: relative; height: 450px; color: white; text-decoration: none; }
.preview-content img { width: 100%; height: 100%; object-fit: cover; }
.preview-content::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#26190aeb,transparent 90%); }
.preview-copy { position: absolute; bottom: 2.5rem; left: 2.5rem; z-index: 1; }
.preview-copy > span:first-child { font-size: .6rem; letter-spacing: .2em; }
.preview-copy h2 { font-family: Georgia,serif; font-weight: 400; font-size: clamp(2.7rem,4vw,4rem); margin: 1rem 0 1.5rem; }
.preview-button { display: inline-block; border-bottom: 1px solid #eedec1; padding: .5rem 0; font-size: .8rem; }
.showcase-note { display: flex; justify-content: space-between; align-items: center; padding: 2rem 1rem 0; font-size: .9rem; }
.showcase-price { font-size: 2rem; font-weight: 700; letter-spacing: -.06em; }
.showcase-price small { display: block; font-size: .65rem; font-weight: 400; text-align: right; letter-spacing: 0; }
.landing-strip { padding: 1.6rem 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.8rem; border-block: 1px solid var(--linea); font-family: Georgia,serif; font-size: 1.2rem; }
.landing-strip span:first-child { font: 600 .65rem/2.8 var(--fuente); letter-spacing: .12em; }
h2 { font-size: clamp(2.2rem,4vw,3.6rem); font-weight: 600; letter-spacing: -.05em; }
.incluye { counter-reset: feature; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.incluye li { counter-increment: feature; border: 0 !important; background: var(--papel-2); padding: 2rem; border-radius: 5px; }
.incluye li::before { content: '0' counter(feature); font: 400 2rem Georgia,serif; color: var(--verde); display: block; margin-bottom: 1.5rem; }
.incluye h3 { font-size: 1.2rem; }
.seccion--tinta .paso p { color: #c6d1c9; }
.seccion--tinta .paso strong { color: #fff; }
.galeria { grid-template-columns: repeat(2,1fr); gap: 2.5rem; }
.captura--grande { grid-column: auto; }
.captura { text-decoration: none; }
.captura__marco { border-radius: 8px; overflow: hidden; aspect-ratio: 1.5; border: none; background: #ddd; }
.captura__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.captura:hover img { transform: scale(1.035); }
.captura__pie { padding: 1rem 0; border: 0; }
.captura__pie strong { font-size: 1.25rem; letter-spacing: -.03em; }
.captura__pie::after { content: 'Explorar demo ↗'; display: block; font-size: .75rem; color: var(--verde); margin-top: .5rem; }
.galeria__cta { border-radius: 8px; padding: 3rem; background: var(--verde); color: white; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.galeria__cta p { color: #d0dbd3; }
.precio { padding: 3rem; background: var(--papel-2); border-radius: 12px; }
.precio__cifra { color: var(--verde); letter-spacing: -.06em; }
.faq { padding: 1.25rem 0; }
@media(max-width:959px) {
 .hero { grid-template-columns: 1fr; padding: 1.5rem 0 3rem; }
 .hero__caja { width: calc(100% - 3rem); }
 .hero-showcase { padding: 2rem 2rem 0; max-width: 650px; width: 100%; margin: auto; }
 .hero h1 { font-size: clamp(3.3rem,8vw,5rem); }
 .incluye { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:600px) {
 .nav__inner { min-height: 72px; }
 .hero h1 { font-size: 3.5rem; }
 .hero__acciones .btn { font-size: .9rem; padding-inline: 1rem; }
 .preview-content { height: 340px; }
 .preview-copy { left: 1.5rem; bottom: 1.5rem; }
 .landing-strip { gap: .8rem 1.5rem; }
 .landing-strip span:first-child { flex-basis: 100%; text-align: center; }
 .incluye, .galeria { grid-template-columns: 1fr; }
 .precio { padding: 2rem; }
}
.captura--grande { grid-row: auto; }
.captura--grande .captura__marco { height: auto; min-height: 0; aspect-ratio: 1.5; }
[id] { scroll-margin-top: 100px; }
.sticky-cta { background: var(--tinta); }

/* IMYT: marca compartida por landing y contratación. */
.imyt-brand{display:inline-flex;flex-direction:column;gap:5px;flex-shrink:0;text-decoration:none;letter-spacing:0;max-width:230px;color:#174b33}
.imyt-brand img{display:block;width:152px;height:auto;max-width:100%}
.imyt-brand span{font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.01em}
.nav .imyt-brand{max-width:230px}
@media(max-width:600px){.nav__inner{gap:12px}.imyt-brand img{width:120px}.imyt-brand span{font-size:8px}.nav .imyt-brand{max-width:160px}}

.pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}.pack{padding:30px;border:1px solid #d7ded5;border-radius:18px;background:#fffdf8}.pack h3{font-size:1.7rem;margin:16px 0}.pack p{color:#526057}.pack ul{padding-left:20px;margin-top:18px}.pack-number{font-size:.75rem;letter-spacing:.12em;font-weight:800;color:#276448}.module-note{padding:32px;background:#e8eedf;border-radius:18px;margin-top:24px}.module-note p{margin:16px 0}.association-callout{background:#f4dfd0}.association-callout .btn{margin-top:24px}.association-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-block:70px}.association-hero h1{font-size:clamp(2.8rem,5vw,4.7rem);margin:20px 0}.association-hero .btn{margin-top:22px}.community-preview{padding:28px;border:1px solid #d7ded5;border-radius:24px;background:#fffdf8;box-shadow:0 20px 60px #214d4015}.community-preview h2{font-size:1.5rem;margin:16px 0}.community-preview article{padding:18px 0;border-bottom:1px solid #dedbd2}.community-preview small{color:#526057}.preview-label{font-size:.75rem;letter-spacing:.08em;font-weight:700}.planned{display:inline-block;padding:6px 12px;border-radius:20px;background:#f4dfd0;font-size:.85rem;font-weight:700}.association-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px}.association-steps h3{font-size:1.4rem}.footer a{color:inherit}@media(max-width:899px){.association-hero{grid-template-columns:1fr;gap:28px;padding-block:40px}.association-steps{grid-template-columns:1fr}}@media(max-width:600px){.pack-grid{grid-template-columns:1fr}.pack,.module-note,.community-preview{padding:24px}.association-hero h1{font-size:2.8rem}}

.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:32px 0}.price-part{padding:28px;background:#fffdf8;border:1px solid #d7ded5;border-radius:16px}.price-amount{font-size:3.5rem;line-height:1.2;font-weight:700;color:#174b33;margin:22px 0}.price-amount small{display:block;font-size:1rem;font-weight:400;letter-spacing:0}.price-part h3{font-size:1.3rem;margin-bottom:16px}.price-total{display:flex;flex-direction:column;gap:10px;padding:24px;background:#174b33;color:#fff;border-radius:12px;margin-bottom:24px}.price-total strong{font-size:1.4rem}.precio>p{margin-block:18px}@media(max-width:650px){.pricing-grid{grid-template-columns:1fr}.price-part{padding:22px}.precio{padding:24px}.price-total strong{font-size:1.2rem}}