:root {
    --verde: #2F5D50;
    --verde-vivo: #3E8A72;
    --verde-oscuro: #244A40;
    --verde-suave: #E4EEE9;
    --verde-tenue: #F2F6F4;
    --verde-linea: #C9DAD3;
    --tinta: #111418;
    --tinta-suave: #4F575E;
    --claro: #ECEEF0;
    --papel: #F6F7F8;
    --arena: #F7F3EC;
    --blanco: #FFFFFF;
    --linea: #DFE3E6;
    --burbuja: #DCF3E6;
    --sombra: 0 10px 30px rgba(17, 20, 24, .08), 0 1px 3px rgba(17, 20, 24, .06);
    --radio: 18px;
    --fuente: "Onest", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; scroll-padding-top: 84px; }

  body {
    margin: 0;
    background: var(--blanco);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

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

  h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
  h1 { font-size: clamp(2.1rem, 4.6vw + 1rem, 3.6rem); font-weight: 700; }
  h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); font-weight: 700; }
  h3 { font-size: 1.35rem; font-weight: 600; }
  p { margin: 0; }

  a { color: var(--verde); text-underline-offset: 3px; text-decoration-thickness: 1px; }

  /* Superficies del navegador con los colores de la marca */
  ::selection { background: var(--verde-suave); color: var(--verde-oscuro); }
  html { caret-color: var(--verde); scrollbar-color: var(--verde-linea) var(--blanco); scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--blanco); }
  ::-webkit-scrollbar-thumb { background: var(--verde-linea); border-radius: 999px; border: 3px solid var(--blanco); }
  ::-webkit-scrollbar-thumb:hover { background: var(--verde); }

  :focus-visible {
    outline: 3px solid var(--verde-vivo);
    outline-offset: 3px;
    border-radius: 6px;
  }

  .contenedor {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  .seccion { padding: 72px 0; }
  .seccion--tenue { background: var(--verde-tenue); }

  .encabezado-seccion { max-width: 640px; margin-bottom: 40px; }
  .encabezado-seccion p { margin-top: 14px; color: var(--tinta-suave); font-size: 1.08rem; }

  /* Botones */
  .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 2px solid transparent;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  }
  .boton:active { transform: translateY(1px); }
  .boton--primario { background: var(--verde); color: var(--blanco); }
  .boton--primario:hover { background: var(--verde-oscuro); }
  .boton--secundario { background: var(--blanco); color: var(--verde); border-color: var(--verde-linea); }
  .boton--secundario:hover { border-color: var(--verde); background: var(--verde-tenue); }
  .boton--claro { background: var(--blanco); color: var(--verde); }
  .boton--claro:hover { background: var(--verde-suave); }
  .boton--compacto { min-height: 40px; padding: 8px 16px; font-size: .95rem; }

  /* Encabezado fijo */
  .cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--claro);
  }
  .cabecera__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 68px;
  }
  .cabecera__logo { display: inline-flex; align-items: center; }
  .cabecera__logo img { height: 26px; width: auto; }
  .cabecera__nav { display: none; gap: 26px; }
  .cabecera__nav a {
    color: var(--tinta-suave);
    text-decoration: none;
    font-weight: 500;
    font-size: .98rem;
  }
  .cabecera__nav a:hover { color: var(--verde); }
  @media (min-width: 820px) {
    .cabecera__nav { display: flex; }
  }

  /* Héroe */
  .heroe {
    position: relative;
    padding: 40px 0 32px;
    overflow: hidden;
  }
  .heroe__grid {
    display: grid;
    gap: 28px;
    align-items: center;
  }
  .heroe__texto { max-width: 560px; }
  .heroe__lema { margin-top: 18px; font-size: 1.15rem; color: var(--tinta-suave); max-width: 480px; }
  .heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .heroe__nota { margin-top: 18px; font-size: .92rem; color: var(--tinta-suave); }
  .heroe__nota strong { color: var(--verde); font-weight: 600; }

  @media (min-width: 900px) {
    .heroe { padding: 56px 0 48px; }
    .heroe__grid { grid-template-columns: 1fr 1.15fr; gap: 40px; }
  }

  /* Escena animada */
  .escena {
    position: relative;
    width: 100%;
    aspect-ratio: 720 / 520;
    max-height: 560px;
    isolation: isolate;
  }
  .escena__svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
  }


  /* Anillos que laten */
  .anillo {
    fill: none;
    stroke: var(--verde);
    transform-box: fill-box;
    transform-origin: center;
    animation: latir 6s ease-in-out infinite;
  }
  .anillo--1 { stroke-opacity: .22; stroke-width: 1.5; }
  .anillo--2 { stroke-opacity: .13; stroke-width: 1.25; animation-delay: -2s; }
  .anillo--3 { stroke-opacity: .07; stroke-width: 1; animation-delay: -4s; }
  @keyframes latir {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  /* Líneas del diagrama */
  .linea { fill: none; stroke: #D3DBD7; stroke-width: 2; stroke-linecap: round; }
  .linea-flujo {
    fill: none;
    stroke: var(--verde-vivo);
    stroke-opacity: .35;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 14;
    animation: fluir 2.4s linear infinite;
  }
  .linea-flujo--vuelta { animation-direction: reverse; }
  @keyframes fluir {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -40; }
  }

  .punto { fill: var(--verde-vivo); }
  .punto--halo { fill: var(--verde-vivo); fill-opacity: .18; }

  /* Hub y tarjetas del diagrama */
  .hub__fondo { fill: var(--verde); }
  .hub__sombra { fill: var(--verde); fill-opacity: .18; filter: blur(10px); }
  .hub__icono { fill: var(--blanco); }
  .tarjeta-nodo { fill: var(--blanco); stroke: var(--claro); stroke-width: 1; }
  .icono-nodo { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .etiqueta-nodo { font-family: var(--fuente); font-size: 11px; font-weight: 500; fill: var(--tinta-suave); text-anchor: middle; }

  /* En pantallas chicas la escena se reduce a la mitad y las etiquetas quedarían
     por debajo de 6 px: mejor dejar los íconos solos. */
  @media (max-width: 700px) {
    .etiqueta-nodo { display: none; }
    .escena { aspect-ratio: 720 / 440; }
  }

  /* Problema */
  .dolores { display: grid; gap: 28px; }
  .dolor {
    border-top: 1px solid var(--linea);
    padding-top: 22px;
  }
  .dolor__hora {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--verde);
    background: var(--verde-suave);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 14px;
  }
  .dolor h3 { font-size: 1.15rem; }
  .dolor p { margin-top: 8px; color: var(--tinta-suave); }
  @media (min-width: 760px) { .dolores { grid-template-columns: repeat(3, 1fr); gap: 36px; } }

  /* Productos */
  .productos { display: grid; gap: 40px; }
  .producto {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .producto__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .producto__nombre { display: flex; align-items: center; gap: 12px; }
  .producto__nombre svg { width: 40px; height: 40px; flex: none; }
  .producto__nombre h3 { font-size: 1.45rem; }
  .producto__para { color: var(--tinta-suave); font-size: .98rem; }
  .producto__para strong { color: var(--tinta); font-weight: 600; }
  .producto__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .producto__lista li { display: flex; gap: 10px; align-items: flex-start; }
  .producto__lista svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
  .pastilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--arena);
    color: #7A5A1E;
    white-space: nowrap;
  }
  .pastilla--verde { background: var(--verde-suave); color: var(--verde); }
  .producto__pie { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: auto; }
  .producto__pie small { color: var(--tinta-suave); font-size: .9rem; }
  @media (min-width: 900px) {
    .productos { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 56px; }
  }

  /* Maqueta de WhatsApp */
  .telefono {
    background: #E9EFEA;
    border: 1px solid var(--claro);
    border-radius: 20px;
    overflow: hidden;
    max-width: 380px;
  }
  .telefono__barra {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--verde);
    color: var(--blanco);
    padding: 12px 14px;
  }
  .telefono__avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--blanco);
    display: grid;
    place-items: center;
    flex: none;
  }
  .telefono__avatar svg { width: 20px; height: 20px; }
  .telefono__nombre { font-weight: 600; font-size: .95rem; line-height: 1.2; }
  .telefono__estado { font-size: .75rem; opacity: .85; }
  .chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    min-height: 420px;
  }
  .chat[data-animando] .msg:not(.is-visible) { display: none; }
  .msg {
    max-width: 88%;
    background: var(--blanco);
    border-radius: 12px;
    border-top-left-radius: 4px;
    padding: 8px 11px;
    font-size: .9rem;
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(17, 20, 24, .06);
    position: relative;
  }
  .msg--cliente {
    align-self: flex-end;
    background: var(--burbuja);
    border-top-left-radius: 12px;
    border-top-right-radius: 4px;
  }
  .msg__hora { display: block; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--tinta-suave); text-align: right; margin-top: 3px; }
  .msg__opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .msg__opciones button {
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--verde);
    background: var(--verde-tenue);
    border: 1px solid var(--verde-linea);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
  }
  .msg__opciones button:hover { background: var(--verde-suave); }
  .msg--cotizacion { max-width: 92%; padding: 0; overflow: hidden; }
  .cotiza__cabeza {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--verde-tenue);
    border-bottom: 1px solid var(--verde-suave);
    font-weight: 600;
    font-size: .88rem;
  }
  .cotiza__folio { color: var(--verde); }
  .cotiza__cuerpo { padding: 10px 12px; display: grid; gap: 6px; font-size: .86rem; }
  .cotiza__fila { display: flex; justify-content: space-between; gap: 10px; color: var(--tinta-suave); }
  .cotiza__fila span:first-child { color: var(--tinta); }
  .cotiza__total { display: flex; justify-content: space-between; border-top: 1px solid var(--claro); padding-top: 8px; margin-top: 2px; font-weight: 700; font-size: 1rem; }
  .cotiza__pdf { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--tinta-suave); }
  .cotiza__pdf svg { width: 16px; height: 16px; }
  .cotiza__acciones { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--claro); }
  .cotiza__acciones button {
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    background: var(--blanco);
    border: 0;
    padding: 10px;
    color: var(--verde);
    cursor: pointer;
  }
  .cotiza__acciones button + button { border-left: 1px solid var(--claro); }
  .cotiza__acciones button:hover { background: var(--verde-tenue); }
  .escribiendo {
    display: none;
    align-self: flex-start;
    background: var(--blanco);
    border-radius: 12px;
    border-top-left-radius: 4px;
    padding: 10px 12px;
    gap: 4px;
  }
  .escribiendo.is-visible { display: inline-flex; }
  .escribiendo span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #A8B3AE;
    animation: rebote 1.1s ease-in-out infinite;
  }
  .escribiendo span:nth-child(2) { animation-delay: .15s; }
  .escribiendo span:nth-child(3) { animation-delay: .3s; }
  @keyframes rebote {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
  }

  /* Cómo funciona */
  .pasos { display: grid; gap: 18px; counter-reset: paso; }
  .paso {
    position: relative;
    padding: 26px 22px 26px 22px;
    background: var(--blanco);
    border: 1px solid var(--claro);
    border-radius: var(--radio);
  }
  .paso__numero {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--verde);
    color: var(--blanco);
    font-weight: 700;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
  }
  .paso h3 { font-size: 1.2rem; }
  .paso p { margin-top: 8px; color: var(--tinta-suave); }
  @media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }

  /* Precios */
  .planes { display: grid; gap: 20px; }
  .plan {
    background: var(--blanco);
    border: 1px solid var(--claro);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .plan--destacado { border-color: var(--verde); }
  .plan__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .plan__precios { display: grid; gap: 10px; }
  .plan__precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
  .plan__monto { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
  .plan__monto small { font-size: 1rem; font-weight: 500; color: var(--tinta-suave); }
  .plan__concepto { color: var(--tinta-suave); font-size: .95rem; }
  .plan__incluye { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--tinta-suave); font-size: .96rem; }
  .plan__incluye li { display: flex; gap: 10px; align-items: flex-start; }
  .plan__incluye svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
  .plan__nota { font-size: .85rem; color: var(--tinta-suave); }
  @media (min-width: 760px) { .planes { grid-template-columns: 1fr 1fr; } }

  .oferta {
    margin-top: 28px;
    background: var(--verde);
    color: var(--blanco);
    border-radius: 24px;
    padding: 28px 24px;
    display: grid;
    gap: 18px;
    align-items: center;
  }
  .oferta h3 { color: var(--blanco); font-size: 1.4rem; }
  .oferta p { opacity: .92; margin-top: 8px; }
  .oferta__cupo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 12px;
  }
  @media (min-width: 900px) { .oferta { grid-template-columns: 1fr auto; padding: 32px 36px; } }

  /* Historia del puente */
  .puente { display: grid; gap: 28px; align-items: center; }
  .puente__ciudades {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--verde);
    margin-top: 22px;
  }
  .puente__ciudades span { padding: 8px 14px; background: var(--verde-suave); border-radius: 999px; }
  .puente__ciudades i { width: 22px; height: 2px; background: var(--verde-linea); display: inline-block; }
  .puente__dibujo { width: 100%; max-width: 460px; margin: 0 auto; }
  .puente__dibujo svg { width: 100%; height: auto; }
  .puente p { color: var(--tinta-suave); margin-top: 14px; }
  @media (min-width: 900px) { .puente { grid-template-columns: 1fr 1fr; } }

  /* Contacto */
  .contacto { display: grid; gap: 28px; }
  .contacto__tarjeta {
    background: var(--blanco);
    border: 1px solid var(--claro);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: var(--sombra);
    display: grid;
    gap: 16px;
  }
  .contacto__linea { display: flex; align-items: center; gap: 12px; }
  .contacto__linea svg { width: 22px; height: 22px; flex: none; }
  .contacto__linea a { font-weight: 600; text-decoration: none; }
  .contacto__linea a:hover { text-decoration: underline; }
  .contacto__linea span { color: var(--tinta-suave); }
  .contacto__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
  @media (min-width: 900px) { .contacto { grid-template-columns: 1fr 1fr; align-items: start; } }

  /* Pie */
  .pie { border-top: 1px solid var(--claro); padding: 32px 0; }
  .pie__fila { display: flex; flex-direction: column; gap: 14px; }
  .pie__logo img { height: 22px; width: auto; }
  .pie__texto { font-size: .9rem; color: var(--tinta-suave); }
  .pie__enlaces { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; }
  .pie__enlaces a { color: var(--tinta-suave); text-decoration: none; }
  .pie__enlaces a:hover { color: var(--verde); text-decoration: underline; }
  @media (min-width: 760px) {
    .pie__fila { flex-direction: row; align-items: center; justify-content: space-between; }
  }

  .check { color: var(--verde); }

  /* Movimiento reducido */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .anillo, .linea-flujo, .escribiendo span { animation: none !important; }
    .chat[data-animando] .msg:not(.is-visible) { display: block; }
    .escribiendo { display: none !important; }
  }

/* Páginas legales */
.legal { max-width: 100%; }
.legal .contenedor { max-width: 720px; }
.legal h1 { margin-bottom: 8px; }
.legal h2 { font-size: 1.25rem; margin-top: 36px; margin-bottom: 10px; }
.legal p, .legal li { color: var(--tinta-suave); }
.legal p + p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.legal__fecha { font-size: .92rem; }