/* ============================================================
   Lacustre Digital — hoja de estilos única
   Identidad "Bosque valdiviano": papel crudo, tinta verde-negro,
   cobre volcánico como único relleno de botón.
   Estructura, escala de 8px, pills y tarjetas tomadas de DESIGN.md.
   Móvil primero. Sin frameworks.
   ============================================================ */

/* ─────────── 1. tokens ─────────── */
:root{
  /* color */
  --papel:        #F7F3EC;
  --papel-hondo:  #EFE9DE;
  --blanco:       #FFFFFF;
  --tinta:        #101F1B;
  --tinta-2:      #2C3C36;
  --tinta-suave:  #5E6E67;
  --cobre:        #C0552B;
  --cobre-hondo:  #9E4322;
  --cobre-claro:  #E9D3C6;
  --musgo:        #2E6A5A;
  --musgo-claro:  #D7E4DC;
  --lenga:        #E3A72F;
  --linea:        #E2DACD;
  --linea-oscura: #2A3C36;
  --sobre-oscuro: #EDE7DC;

  /* tipografía */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xxl: clamp(2.3rem, 1.45rem + 3.9vw, 4.1rem);
  --t-xl:  clamp(1.8rem, 1.35rem + 2.1vw, 2.9rem);
  --t-lg:  clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --t-md:  1.15rem;
  --t-body:1rem;
  --t-sm:  0.9375rem;
  --t-xs:  0.8125rem;

  /* espacio (base 8) */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  /* forma */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 9999px;

  --sombra-1: 0 1px 2px rgba(16,31,27,.06), 0 6px 18px rgba(16,31,27,.05);
  --sombra-2: 0 2px 6px rgba(16,31,27,.07), 0 18px 44px rgba(16,31,27,.10);

  --ancho: 1180px;
  --nav-alto: 64px;
}

/* ─────────── 2. base ─────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-alto) + 12px);
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.sprite{ display:none; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--e-5);
}

:focus-visible{
  outline:2.5px solid var(--cobre);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* tipos de display */
.display-xxl{ font-size:var(--t-xxl); letter-spacing:-.028em; }
.display-xxl em{ font-style:normal; color:var(--cobre); }
.display-xl{ font-size:var(--t-xl); letter-spacing:-.022em; }

.lead{
  font-size:clamp(1.03rem, .97rem + .3vw, 1.19rem);
  line-height:1.58;
  color:var(--tinta-2);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--musgo);
}
.punto{
  width:7px; height:7px; border-radius:50%;
  background:var(--cobre);
  flex:none;
}

/* números tabulares donde hay plata */
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ─────────── 3. íconos ─────────── */
.ico{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.ico--grande{ width:30px; height:30px; stroke-width:1.4; color:var(--musgo); }

/* ─────────── 4. botones ─────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--e-2);
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--t-sm);
  line-height:1;
  padding:12px 20px;
  min-height:44px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  cursor:pointer;
  text-align:center;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.boton--primario{ background:var(--cobre); color:#FFF; }
.boton--primario:hover{ background:var(--cobre-hondo); }
.boton--primario:active{ transform:translateY(1px); }

.boton--fantasma{ background:transparent; color:var(--tinta); border-color:var(--linea); }
.boton--fantasma:hover{ border-color:var(--tinta); background:rgba(16,31,27,.04); }

.boton--claro{ background:var(--papel); color:var(--tinta); }
.boton--claro:hover{ background:#FFF; }

.boton--contorno-claro{ background:transparent; color:var(--papel); border-color:rgba(247,243,236,.42); }
.boton--contorno-claro:hover{ border-color:var(--papel); background:rgba(247,243,236,.08); }

.boton--sm{ padding:10px 16px; min-height:40px; font-size:var(--t-xs); }
.boton--lg{ padding:15px 26px; min-height:52px; font-size:1.0rem; }
.boton--bloque{ width:100%; }

/* ─────────── 5. navegación ─────────── */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(247,243,236,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background-color .2s ease;
}
.nav.is-scrolled{ border-bottom-color:var(--linea); background:rgba(247,243,236,.96); }

.nav__fila{
  min-height:var(--nav-alto);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-4);
}

.marca{ display:inline-flex; align-items:center; gap:10px; flex:none; }
.marca__mark{ width:32px; height:32px; border-radius:7px; flex:none; }
.marca__texto{
  font-family:var(--serif);
  font-size:1.06rem;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.marca__texto b{ font-weight:600; }

.nav__links{
  position:fixed;
  inset:var(--nav-alto) 0 auto 0;
  display:none;
  flex-direction:column;
  gap:var(--e-1);
  padding:var(--e-4) var(--e-5) var(--e-6);
  background:var(--papel);
  border-bottom:1px solid var(--linea);
  box-shadow:var(--sombra-1);
}
.nav__links.is-abierto{ display:flex; }
.nav__links a{
  padding:12px 0;
  font-size:1.05rem;
  color:var(--tinta);
  border-bottom:1px solid var(--linea);
}
.nav__links a:last-child{ border-bottom:0; }
.nav__links-cta{ margin-top:var(--e-3); color:#FFF !important; }

.nav__cta{ display:none; }

.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  margin-right:-8px;
  background:transparent; border:0; color:var(--tinta);
  cursor:pointer;
}
.nav__toggle .ico--cerrar{ display:none; }
.nav__toggle[aria-expanded="true"] .ico--menu{ display:none; }
.nav__toggle[aria-expanded="true"] .ico--cerrar{ display:inline-block; }

/* ─────────── 6. hero ─────────── */
.hero{
  position:relative;
  overflow:hidden;
  padding-block: var(--e-7) var(--e-8);
  border-bottom:1px solid var(--linea);
}
/* las curvas de nivel se quedan bajo el mockup en móvil: no cruzan el titular */
.hero__curvas{
  position:absolute; inset:auto -5% -8% -5%;
  width:110%; height:62%;
  opacity:.13;
  pointer-events:none;
}
.hero__grid{ position:relative; display:grid; gap:var(--e-7); }

.hero h1{ margin:var(--e-4) 0 var(--e-4); max-width:16ch; }
.hero .lead{ max-width:52ch; }

.hero__acciones{
  display:flex; flex-wrap:wrap; gap:var(--e-3);
  margin-top:var(--e-6);
}
.hero__notas{
  display:grid; gap:var(--e-2);
  margin-top:var(--e-6);
  font-size:var(--t-xs);
  color:var(--tinta-suave);
}
.hero__notas li{ display:flex; align-items:center; gap:var(--e-2); }
.hero__notas li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--musgo); flex:none;
}

/* composición de producto: el chat cuelga bajo el marco, sin taparlo */
.hero__visual{ position:relative; padding-bottom:148px; }

.marco{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  box-shadow:var(--sombra-2);
  overflow:hidden;
}
.marco__barra{
  display:flex; align-items:center; gap:6px;
  padding:10px var(--e-3);
  background:var(--papel-hondo);
  border-bottom:1px solid var(--linea);
}
.marco__barra i{ width:8px; height:8px; border-radius:50%; background:#CFC6B7; }
.marco__barra span{
  margin-left:var(--e-3);
  font-size:11px; color:var(--tinta-suave);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.marco__pantalla{ padding:var(--e-4); }

.mini-hero{
  position:relative;
  padding:var(--e-5) var(--e-4);
  border-radius:var(--r-md);
  background:linear-gradient(160deg, var(--musgo) 0%, #1C4A3F 100%);
  color:var(--papel);
}
.mini-hero__eyebrow{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.mini-hero__titulo{ font-family:var(--serif); font-size:1.25rem; margin-top:4px; }
.mini-hero__boton{
  display:inline-block; margin-top:var(--e-3);
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--cobre); color:#FFF; font-size:11px; font-weight:500;
}
.mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-2); margin-top:var(--e-3); }
.mini-grid i{ height:38px; border-radius:var(--r-sm); background:var(--papel-hondo); }
.mini-lineas{ margin-top:var(--e-3); display:grid; gap:7px; }
.mini-lineas i{ height:7px; border-radius:var(--r-pill); background:var(--papel-hondo); }
.mini-lineas i:nth-child(2){ width:78%; }
.mini-lineas i:nth-child(3){ width:52%; }

.chat{
  position:absolute; right:0; bottom:0;
  width:min(280px, 82%);
  padding:var(--e-3) var(--e-3) var(--e-4);
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  box-shadow:var(--sombra-2);
}
.chat__cabecera{
  display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:500; color:var(--tinta-suave);
  padding-bottom:var(--e-2); margin-bottom:var(--e-2);
  border-bottom:1px solid var(--linea);
}
.chat__punto{
  width:7px; height:7px; border-radius:50%;
  background:var(--musgo);
  box-shadow:0 0 0 3px rgba(46,106,90,.16);
  flex:none;
}
.chat__burbuja{
  font-size:var(--t-xs);
  line-height:1.45;
  padding:9px 12px;
  border-radius:12px;
  margin-bottom:7px;
  max-width:92%;
}
.chat__burbuja--cliente{
  background:var(--papel-hondo);
  color:var(--tinta-2);
  border-bottom-left-radius:4px;
}
.chat__burbuja--bot{
  background:var(--musgo);
  color:var(--papel);
  margin-left:auto;
  border-bottom-right-radius:4px;
}
.chat__hora{ font-size:10px; color:var(--tinta-suave); text-align:right; }

/* ─────────── 7. secciones ─────────── */
.seccion{ padding-block:var(--e-8); }
.seccion--papel{ background:var(--papel-hondo); border-block:1px solid var(--linea); }

.seccion__cabecera{ margin-bottom:var(--e-7); }
.seccion__cabecera h2{ margin-top:var(--e-3); max-width:20ch; }
.seccion__bajada{
  margin-top:var(--e-4);
  color:var(--tinta-suave);
  font-size:var(--t-sm);
  max-width:54ch;
}

/* ─────────── 8. qué hacemos ─────────── */
.servicios{ display:grid; gap:var(--e-4); }

.tarjeta{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  padding:var(--e-5);
}
.tarjeta h3{ font-size:var(--t-lg); margin:var(--e-4) 0 var(--e-3); }
.tarjeta p{ color:var(--tinta-2); font-size:var(--t-sm); }

.tarjeta--angosta{ background:var(--musgo-claro); border-color:#C4D8CE; }
.tarjeta--angosta .ico--grande{ color:var(--musgo); }

.lista-check{ display:grid; gap:var(--e-2); margin-top:var(--e-4); }
.lista-check li{
  position:relative;
  padding-left:26px;
  font-size:var(--t-xs);
  color:var(--tinta-2);
}
.lista-check li::before{
  content:""; position:absolute; left:0; top:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--cobre-claro);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0552B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6 9.6-10.2'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}
.lista-check--clara li{ color:var(--sobre-oscuro); }
.lista-check--clara li::before{
  background-color:rgba(227,167,47,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3A72F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6 9.6-10.2'/%3E%3C/svg%3E");
}

.tarjeta--oscura{
  background:var(--tinta);
  border-color:var(--tinta);
  color:var(--papel);
  padding:var(--e-6) var(--e-5);
  display:grid; gap:var(--e-6);
}
.tarjeta--oscura .ico--grande{ color:var(--lenga); }
.tarjeta--oscura p{ color:var(--sobre-oscuro); opacity:.86; }

.canales{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-bottom:var(--e-3); }
.canal{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px;
  border:1px solid rgba(247,243,236,.22);
  border-radius:var(--r-pill);
  font-size:11px; color:var(--sobre-oscuro);
}
.canal__led{ width:6px; height:6px; border-radius:50%; background:var(--lenga); }

.chat--dentro{
  position:static; width:100%;
  background:rgba(247,243,236,.06);
  border-color:rgba(247,243,236,.16);
  box-shadow:none;
  padding:var(--e-3);
}
.chat--dentro .chat__burbuja--cliente{ background:rgba(247,243,236,.12); color:var(--sobre-oscuro); }
.chat--dentro .chat__burbuja--bot{ background:var(--cobre); color:#FFF; }
.chat--dentro .chat__burbuja:last-child{ margin-bottom:0; }

/* ─────────── 9. demos ─────────── */
.demos{ display:grid; gap:var(--e-5); }

.demos__tabs{
  display:flex; flex-wrap:wrap; gap:var(--e-2);
  padding-bottom:var(--e-1);
  scrollbar-width:none;
}
.demos__tabs::-webkit-scrollbar{ display:none; }
.tab{
  display:inline-flex; align-items:center; gap:var(--e-2);
  flex:none;
  padding:11px 18px;
  min-height:44px;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-pill);
  font-family:var(--sans);
  font-size:var(--t-xs);
  font-weight:500;
  color:var(--tinta-2);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tab .ico{ width:17px; height:17px; }
.tab:hover{ border-color:var(--tinta-suave); }
.tab[aria-selected="true"]{
  background:var(--tinta); border-color:var(--tinta); color:var(--papel);
}

.panel{ display:grid; gap:var(--e-5); }
.panel[hidden]{ display:none; }

.panel__texto h3{ font-size:var(--t-lg); margin-bottom:var(--e-3); }
.panel__texto > p{ color:var(--tinta-2); font-size:var(--t-sm); }
.panel__pregunta{
  margin-top:var(--e-4);
  padding:var(--e-4);
  background:var(--blanco);
  border:1px solid var(--linea);
  border-left:3px solid var(--cobre);
  border-radius:var(--r-md);
}
.panel__pregunta dt{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:var(--e-2);
}
.panel__pregunta dd{
  margin:0 0 var(--e-3);
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.35;
}
.panel__pregunta dd:last-child{
  margin-bottom:0;
  font-family:var(--sans);
  font-size:var(--t-xs);
  line-height:1.5;
  color:var(--tinta-2);
  padding-top:var(--e-3);
  border-top:1px solid var(--linea);
}
.panel__pregunta dd:last-child b{ color:var(--musgo); font-weight:500; }

/* marco de captura real */
.captura{
  position:relative;
  aspect-ratio:16/10;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  box-shadow:var(--sombra-1);
  overflow:hidden;
}
.captura img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.captura__vacia{
  position:absolute; inset:var(--e-3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--e-2);
  border:1.5px dashed var(--linea);
  border-radius:var(--r-md);
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(46,106,90,.05) 9px 18px);
  text-align:center;
  padding:var(--e-4);
}
.captura__vacia b{
  font-family:var(--serif);
  font-size:var(--t-sm);
  font-weight:500;
  color:var(--tinta-2);
}
.captura__vacia span{ font-size:var(--t-xs); color:var(--tinta-suave); }
.captura__vacia code{
  font-size:11px;
  padding:3px 8px;
  border-radius:var(--r-sm);
  background:var(--papel-hondo);
  color:var(--musgo);
}

/* ─────────── 10. planes ─────────── */
.planes{ display:grid; gap:var(--e-4); align-items:stretch; }

.plan{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  padding:var(--e-5);
}
.plan__etiqueta{
  position:absolute; top:-11px; left:var(--e-5);
  padding:4px 10px;
  border-radius:var(--r-pill);
  background:var(--lenga);
  color:var(--tinta);
  font-size:10px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
}
.plan__nombre{ font-size:var(--t-lg); }
.plan__para{ margin-top:var(--e-2); font-size:var(--t-xs); color:var(--tinta-suave); }

.plan__precio{
  display:flex; align-items:baseline; gap:var(--e-2);
  flex-wrap:wrap;
  margin:var(--e-4) 0 var(--e-1);
  padding-top:var(--e-4);
  border-top:1px solid var(--linea);
}
.plan__monto{
  font-family:var(--serif);
  font-size:2.1rem;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.15;
}
.plan__iva{ font-size:var(--t-xs); color:var(--tinta-suave); }
.plan__mensual{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px;
  margin-top:var(--e-2);
  font-size:var(--t-xs);
  color:var(--musgo);
  line-height:1.5;
}
.plan__mensual b{ font-weight:500; }
.plan__mensual span{ color:var(--tinta-suave); font-weight:400; }

.plan__items{ display:grid; gap:var(--e-2); margin:var(--e-5) 0 var(--e-6); }
.plan__items li{ position:relative; padding-left:26px; font-size:var(--t-xs); color:var(--tinta-2); }
.plan__items li::before{
  content:""; position:absolute; left:0; top:3px;
  width:16px; height:16px; border-radius:50%;
  background-color:var(--cobre-claro);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0552B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6 9.6-10.2'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}
.plan .boton{ margin-top:auto; }

.plan--destacado{
  background:var(--tinta);
  border-color:var(--tinta);
  color:var(--papel);
}
.plan--destacado .plan__para,
.plan--destacado .plan__iva{ color:rgba(237,231,220,.68); }
.plan--destacado .plan__precio{ border-top-color:rgba(247,243,236,.2); }
.plan--destacado .plan__mensual{ color:var(--lenga); }
.plan--destacado .plan__mensual span{ color:rgba(237,231,220,.68); }
.plan--destacado .plan__items li{ color:var(--sobre-oscuro); }
.plan--destacado .plan__items li::before{
  background-color:rgba(227,167,47,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3A72F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6 9.6-10.2'/%3E%3C/svg%3E");
}

.planes__pie{
  margin-top:var(--e-5);
  font-size:var(--t-xs);
  color:var(--tinta-suave);
  max-width:70ch;
}

/* ─────────── 11. cómo trabajamos ─────────── */
.pasos{ display:grid; gap:var(--e-5); counter-reset:paso; }
.paso{
  position:relative;
  padding-left:var(--e-8);
  padding-bottom:var(--e-5);
  border-bottom:1px solid var(--linea);
}
.paso:last-child{ border-bottom:0; padding-bottom:0; }
.paso__n{
  position:absolute; left:0; top:-6px;
  font-family:var(--serif);
  font-size:2rem;
  font-weight:400;
  color:var(--cobre);
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.paso h3{ font-size:var(--t-md); margin-bottom:var(--e-2); }
.paso p{ font-size:var(--t-sm); color:var(--tinta-2); }

/* ─────────── 12. cierre ─────────── */
.cierre{ padding-block:var(--e-8); background:var(--papel); }
.cierre__caja{
  position:relative;
  background:var(--tinta);
  color:var(--papel);
  border-radius:var(--r-xl);
  padding:var(--e-7) var(--e-5);
  display:grid; gap:var(--e-6);
  overflow:hidden;
}
.cierre__texto p{
  margin-top:var(--e-4);
  color:var(--sobre-oscuro);
  opacity:.86;
  font-size:var(--t-sm);
  max-width:52ch;
}
.cierre__acciones{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-4);
  margin-top:var(--e-6);
}
.cierre__telefono{
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--lenga);
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(227,167,47,.4);
  padding-bottom:2px;
}
/* las tres cosas que necesitamos saber: convierten el aire en contenido */
.cierre__tips{
  display:grid; gap:var(--e-3);
  padding-top:var(--e-5);
  border-top:1px solid rgba(247,243,236,.16);
}
.cierre__tips li{
  display:flex; align-items:baseline; gap:var(--e-3);
  font-size:var(--t-xs);
  color:var(--sobre-oscuro);
}
.cierre__tips-titulo{
  font-size:10px !important;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--lenga) !important;
  margin-bottom:var(--e-1);
}
.cierre__tips span{
  font-family:var(--serif);
  font-size:.8rem;
  color:var(--lenga);
  font-variant-numeric:tabular-nums;
  flex:none;
}

.cierre__sello{
  display:flex; align-items:center; gap:var(--e-3);
  padding-top:var(--e-5);
  border-top:1px solid rgba(247,243,236,.16);
}
.cierre__sello svg{ width:56px; height:56px; flex:none; opacity:.9; }
.cierre__sello p{
  font-size:var(--t-xs);
  line-height:1.3;
  color:rgba(237,231,220,.7);
}
.cierre__sello b{ font-family:var(--serif); font-size:1.05rem; color:var(--papel); font-weight:500; }

/* ─────────── 13. pie ─────────── */
.pie{
  background:var(--tinta);
  color:var(--sobre-oscuro);
  padding-block:var(--e-7);
}
.pie__fila{ display:grid; gap:var(--e-5); }
.marca--pie .marca__texto{ color:var(--papel); }
.pie__links{ display:flex; flex-wrap:wrap; gap:var(--e-3) var(--e-5); font-size:var(--t-xs); }
.pie__links a{ color:rgba(237,231,220,.76); cursor:pointer; }
.pie__links a:hover{ color:var(--papel); }
.pie__legal{ font-size:var(--t-xs); color:rgba(237,231,220,.5); }

/* ─────────── 14. escritorio ─────────── */
@media (min-width:600px){
  .servicios{ gap:var(--e-5); }
  .demos__tabs{ flex-wrap:nowrap; }
}

/* tablet: las tarjetas apiladas no se estiran a todo el ancho */
@media (min-width:640px) and (max-width:899px){
  .planes{ max-width:600px; }
  .tarjeta{ padding:var(--e-6); }
  .captura{ max-width:720px; }
}

@media (min-width:900px){
  :root{ --nav-alto:72px; }

  .contenedor{ padding-inline:var(--e-6); }
  .seccion{ padding-block:var(--e-9); }
  .hero{ padding-block:var(--e-8) var(--e-9); }

  /* nav completa */
  .nav__toggle{ display:none; }
  .nav__cta{ display:inline-flex; }
  .nav__links{
    position:static;
    display:flex; flex-direction:row; align-items:center;
    gap:var(--e-6);
    padding:0; margin-left:auto; margin-right:var(--e-5);
    background:transparent; border:0; box-shadow:none;
  }
  .nav__links a{
    padding:0; border:0;
    font-size:var(--t-sm);
    color:var(--tinta-2);
    transition:color .16s ease;
  }
  .nav__links a:hover{ color:var(--cobre); }
  .nav__links-cta{ display:none; }

  /* hero 2 columnas */
  .hero__grid{ grid-template-columns:1.02fr .98fr; align-items:center; gap:var(--e-7); }
  .hero__visual{ padding-bottom:0; padding-right:0; }
  .hero .chat{ right:-34px; bottom:-62px; width:290px; }
  .hero__notas{ grid-auto-flow:column; justify-content:start; gap:var(--e-5); }
  /* el mockup crece para no dejar aire bajo la columna derecha */
  .marco__pantalla{ padding:var(--e-5); }
  .mini-hero{ padding:var(--e-6) var(--e-5); }
  .mini-grid i{ height:64px; }
  .mini-lineas{ gap:10px; }
  .mini-lineas i{ height:9px; }

  /* servicios: 7/5 arriba, franja oscura abajo */
  .servicios{ grid-template-columns:repeat(12,1fr); }
  .tarjeta--ancha{ grid-column:span 7; padding:var(--e-6); }
  .tarjeta--angosta{ grid-column:span 5; padding:var(--e-6); }
  .tarjeta--oscura{
    grid-column:span 12;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    padding:var(--e-7) var(--e-6);
  }

  /* demos lado a lado */
  .panel{ grid-template-columns:.85fr 1.15fr; gap:var(--e-6); align-items:center; }

  /* planes 3-up */
  .planes{ grid-template-columns:repeat(3,1fr); gap:var(--e-5); }
  .plan{ padding:var(--e-6); }
  .plan--destacado{ transform:translateY(-14px); box-shadow:var(--sombra-2); }

  /* pasos 2x2 con línea */
  .pasos{ grid-template-columns:repeat(2,1fr); gap:var(--e-6) var(--e-7); }
  .paso{ border-bottom:0; padding-bottom:0; padding-left:var(--e-8); }
  .paso::before{
    content:""; position:absolute; left:16px; top:38px; bottom:-14px;
    width:1px; background:var(--linea);
  }
  .paso:nth-child(3)::before,
  .paso:nth-child(4)::before{ display:none; }

  /* cierre */
  .cierre__caja{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) auto;
    align-items:center;
    padding:var(--e-8) var(--e-7);
    gap:var(--e-7);
  }
  .cierre__tips{
    padding-top:0; padding-left:var(--e-6);
    border-top:0; border-left:1px solid rgba(247,243,236,.16);
    gap:var(--e-4);
  }
  .cierre__sello{
    flex-direction:column; text-align:center;
    padding-top:0; padding-left:var(--e-6);
    border-top:0; border-left:1px solid rgba(247,243,236,.16);
    gap:var(--e-2);
  }
  .cierre__sello svg{ width:74px; height:74px; }

  /* pie */
  .pie__fila{
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:var(--e-6);
  }
  .pie__links{ justify-content:center; }
  .pie__legal{ text-align:right; }
}

@media (min-width:1100px){
  .hero h1{ max-width:14ch; }
  .tarjeta--oscura{ padding:var(--e-8) var(--e-7); gap:var(--e-8); }
  .pasos{ grid-template-columns:repeat(4,1fr); gap:var(--e-6) var(--e-5); }
  .paso{ padding-left:0; padding-top:var(--e-8); }
  .paso__n{ top:var(--e-3); font-size:2.3rem; line-height:1; }
  .paso h3{ min-height:2.3em; }
  .paso::before{
    left:0; right:var(--e-4); top:0; bottom:auto;
    width:auto; height:1px;
  }
  .paso:nth-child(3)::before,
  .paso:nth-child(4)::before{ display:block; }
  .paso:last-child::before{ right:0; }
}

/* ─────────── 15. accesibilidad ─────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}