/* Sitio publico de Encauza: portada y paginas legales. Sin dependencias externas:
   las fuentes se sirven desde aqui (licencia OFL en fuentes/) para no mandar datos de
   los visitantes a terceros. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fuentes/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/public-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fuentes/public-sans-latin-600-normal.woff2") format("woff2");
}
:root {
  --noche: #121633;
  --indigo: #4256d6;
  --indigo-hondo: #3442b8;
  --menta: #7ee0c3;
  --papel: #f5f6fa;
  --blanco: #ffffff;
  --pizarra: #5b6178;
  --linea: #dde1ee;
  --wa: #25a35a;
  --ig: #c13584;
  --ms: #0a7cff;
  --titulos: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --texto: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 72rem;
  --radio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--noche);
  font: 400 1.0625rem/1.6 var(--texto);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { color: var(--indigo-hondo); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.08; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
p { margin: 0; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--noche); color: #fff; padding: .6rem 1rem; z-index: 10; }
.saltar:focus { left: 1rem; top: 1rem; }

/* Encabezado */
.cabecera { padding: 1.1rem 0; }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--noche); text-decoration: none; font: 700 1.3rem/1 var(--titulos); letter-spacing: -0.02em; }
.marca img { width: 34px; height: 34px; border-radius: 9px; }
.menu { display: flex; align-items: center; gap: 1.6rem; font-size: .97rem; }
.menu a { color: var(--noche); text-decoration: none; }
.menu a:hover { color: var(--indigo); }
.menu .boton-principal, .menu .boton-principal:hover { color: #fff; }
.menu .solo-ancho { display: none; }
@media (min-width: 760px) { .menu .solo-ancho { display: inline; } }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.3rem; border-radius: 999px;
  font: 600 1rem/1.2 var(--texto); text-decoration: none; border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.boton svg { width: 20px; height: 20px; flex: none; }
.boton-principal { background: var(--indigo); color: #fff; }
.boton-principal:hover { background: var(--indigo-hondo); color: #fff; }
.boton-borde { border-color: var(--noche); color: var(--noche); }
.boton-borde:hover { background: var(--noche); color: #fff; }
.boton-chico { min-height: 40px; padding: .5rem 1rem; font-size: .95rem; }

/* Portada */
.portada { padding: 2.5rem 0 4.5rem; }
.portada .envoltura { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .portada .envoltura { grid-template-columns: 1.05fr 1fr; gap: 3rem; } .portada { padding: 4rem 0 6rem; } }
.portada h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 800; max-width: 12ch; }
.portada .bajada { margin-top: 1.4rem; font-size: 1.2rem; color: var(--pizarra); max-width: 34rem; }
.acciones { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.nota { margin-top: 1rem; font-size: .92rem; color: var(--pizarra); }

/* Los cauces */
.cauces { width: 100%; height: auto; overflow: visible; }
.cauces .cauce { fill: none; stroke-width: 14; stroke-linecap: round; }
.cauces .cauce-wa { stroke: var(--wa); }
.cauces .cauce-ig { stroke: var(--ig); }
.cauces .cauce-ms { stroke: var(--ms); }
.cauces .punto { fill: var(--menta); }
.cauces .rio { fill: none; stroke: var(--indigo); stroke-width: 30; stroke-linecap: round; }
.cauces text { font: 600 17px var(--texto); fill: var(--noche); }
.cauces .venta-texto { font: 800 26px var(--titulos); fill: var(--noche); }
@media (prefers-reduced-motion: no-preference) {
  .cauces .cauce, .cauces .rio { stroke-dasharray: 1; stroke-dashoffset: 1; animation: correr 1.4s cubic-bezier(.6,.05,.25,1) forwards; }
  .cauces .rio { animation-delay: .9s; animation-duration: .9s; }
  .cauces .punto { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: brotar .5s 1.7s cubic-bezier(.3,1.6,.5,1) forwards; }
  .cauces .venta-texto { opacity: 0; animation: aparecer .4s 1.9s ease forwards; }
}
@keyframes correr { to { stroke-dashoffset: 0; } }
@keyframes brotar { to { transform: scale(1); } }
@keyframes aparecer { to { opacity: 1; } }

/* Secciones */
.seccion { padding: 4.5rem 0; }
.seccion h2 { font-size: clamp(2rem, 4.2vw, 3rem); max-width: 20ch; }
.seccion .intro { margin-top: 1rem; color: var(--pizarra); max-width: 40rem; font-size: 1.12rem; }
.blanca { background: var(--blanco); border-block: 1px solid var(--linea); }

/* Del chat al pedido: una secuencia real */
.recorrido { margin-top: 2.8rem; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .recorrido { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: start; } }
.chat { background: #e9edf8; border-radius: 22px; padding: 1.2rem; display: flex; flex-direction: column; gap: .65rem; max-width: 30rem; }
.chat .quien { font-size: .8rem; color: var(--pizarra); margin: .3rem .4rem 0; }
.chat .quien-asistente { align-self: flex-end; }
.burbuja { max-width: 86%; padding: .7rem .95rem; border-radius: 16px; font-size: .98rem; line-height: 1.45; }
.burbuja.cliente { background: #fff; align-self: flex-start; border-bottom-left-radius: 5px; }
.burbuja.asistente { background: var(--noche); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.burbuja .liga { color: var(--menta); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.burbuja.aviso { align-self: center; background: transparent; color: var(--pizarra); font-size: .86rem; padding: .2rem; }
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { position: relative; padding: 0 0 1.6rem 3.2rem; counter-increment: paso; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -.15rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--blanco); border: 2px solid var(--indigo); color: var(--indigo);
  font: 700 1rem/1 var(--titulos);
}
.pasos li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.1rem - 1px); top: 2.3rem; bottom: .2rem; width: 2px; background: var(--linea); }
.pasos h3 { font-size: 1.25rem; }
.pasos p { margin-top: .35rem; color: var(--pizarra); }

/* Que hace: lista de dos columnas, sin tarjetas */
.funciones { margin: 2.8rem 0 0; display: grid; gap: 2rem 3rem; }
@media (min-width: 760px) { .funciones { grid-template-columns: 1fr 1fr; } }
.funciones div { border-top: 2px solid var(--noche); padding-top: 1rem; }
.funciones dt { font: 700 1.2rem/1.25 var(--titulos); }
.funciones dd { margin: .45rem 0 0; color: var(--pizarra); }

/* Para quien */
.giros { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; }
.giros li { padding: .55rem 1rem; border-radius: 999px; background: var(--blanco); border: 1px solid var(--linea); font-size: .98rem; }
.giros-nota { margin-top: 1.4rem; color: var(--pizarra); max-width: 40rem; }

/* Datos */
.datos { display: grid; gap: 1.5rem; margin-top: 2.2rem; }
@media (min-width: 760px) { .datos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.datos h3 { font-size: 1.15rem; }
.datos p { margin-top: .4rem; color: var(--pizarra); }

/* Contacto */
.contacto { background: var(--noche); color: #fff; padding: 5rem 0; }
.contacto h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 16ch; }
.contacto p { margin-top: 1rem; color: #c9cde3; max-width: 36rem; font-size: 1.12rem; }
.contacto .boton-principal { background: var(--menta); color: var(--noche); }
.contacto .boton-principal:hover { background: #a6ecd8; color: var(--noche); }
.contacto .boton-borde { border-color: #fff; color: #fff; }
.contacto .boton-borde:hover { background: #fff; color: var(--noche); }
.contacto :focus-visible { outline-color: var(--menta); }

/* Pie */
.pie { padding: 2.2rem 0 3rem; font-size: .92rem; color: var(--pizarra); }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.pie nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.pie a { color: var(--pizarra); }

/* Paginas legales */
.legal { padding: 2rem 0 4rem; }
.legal article { max-width: 46rem; }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.legal .vigencia { margin-top: .8rem; color: var(--pizarra); }
.legal h2 { font-size: 1.45rem; margin-top: 2.4rem; }
.legal p, .legal ul, .legal ol { margin-top: .9rem; }
.legal li { margin-top: .4rem; }
.legal table { margin-top: 1rem; width: 100%; border-collapse: collapse; font-size: .97rem; }
.legal th, .legal td { text-align: left; padding: .6rem .7rem .6rem 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.legal th { font-weight: 600; }
.pendiente { background: #fff1b8; padding: 0 .25em; border-radius: 4px; }

/* --- Portada oscura con muestras del producto --- */
.escena {
  color: #fff;
  background:
    radial-gradient(58rem 30rem at 85% 8%, rgba(66, 86, 214, .62), transparent 62%),
    radial-gradient(40rem 26rem at 0% 78%, rgba(126, 224, 195, .16), transparent 60%),
    var(--noche);
  padding-bottom: 1px;
}
.cabecera-oscura .marca, .cabecera-oscura .menu a { color: #fff; }
.cabecera-oscura .menu a:hover { color: var(--menta); }
.escena :focus-visible { outline-color: var(--menta); }
.boton-menta, .menu .boton-menta { background: var(--menta); color: var(--noche); }
.boton-menta:hover, .menu .boton-menta:hover { background: #a6ecd8; color: var(--noche); }
.boton-claro { border-color: rgba(255, 255, 255, .7); color: #fff; }
.boton-claro:hover { background: #fff; color: var(--noche); }
.escena .portada { padding-bottom: 3rem; }
.escena .portada h1 { font-size: clamp(2.7rem, 6.2vw, 4.7rem); max-width: 13ch; }
@media (min-width: 900px) { .escena .portada { padding-top: 2.5rem; } }
.escena .portada .bajada { color: #cfd4ee; }
.escena .nota { color: #9aa1c4; }
.escena .cauces text { fill: #e6e9f8; }
.escena .cauces .venta-texto { fill: #fff; font-size: 30px; }
.escena .cauces .cauce { stroke-width: 16; }
.escena .cauces .cauce-wa { stroke: #3ddc84; }
.escena .cauces .cauce-ig { stroke: #ff5fa8; }
.escena .cauces .cauce-ms { stroke: #4da3ff; }
.escena .cauces .rio { stroke: #8f9dff; stroke-width: 34; }
.cauces .halo { fill: var(--menta); opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
  .cauces .halo { transform-box: fill-box; transform-origin: center; animation: latir 2.6s 2.2s ease-in-out infinite; opacity: 0; }
}
@keyframes latir { 0%, 100% { transform: scale(.8); opacity: .12; } 50% { transform: scale(1.15); opacity: .3; } }

.muestras { display: grid; gap: 1rem; margin-bottom: -5rem; position: relative; z-index: 1; }
@media (min-width: 900px) { .muestras { grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; align-items: end; } }
.muestra {
  background: #fff; color: var(--noche); border-radius: 20px; padding: 1.2rem 1.25rem 1.3rem;
  box-shadow: 0 30px 60px -20px rgba(8, 10, 32, .55), 0 2px 0 rgba(255, 255, 255, .6) inset;
  display: flex; flex-direction: column; gap: .6rem;
}
@media (min-width: 900px) {
  .muestra-chat { transform: rotate(-2deg); }
  .muestra-cotizacion { transform: translateY(-1.2rem); }
  .muestra-resumen { transform: rotate(2deg); }
}
.muestra-titulo { font: 700 1.05rem/1.2 var(--titulos); }
.muestra-pie { font-size: .82rem; color: var(--pizarra); }
.muestra .burbuja.cliente { background: #eef0f8; }
.muestra dl { margin: 0; }
.muestra dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--linea); font-size: .95rem; }
.muestra dd { margin: 0; font-variant-numeric: tabular-nums; }
.muestra dl .total { border: 0; font: 700 1.25rem/1.3 var(--titulos); padding-top: .6rem; }
.sello { align-self: flex-start; font-size: .8rem; font-weight: 600; color: #0d6b4f; background: #d9f7ec; padding: .2rem .65rem; border-radius: 999px; }
.falso-boton { text-align: center; background: var(--indigo); color: #fff; font-weight: 600; border-radius: 999px; padding: .6rem; }
.muestra ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.muestra li { display: flex; gap: .6rem; align-items: baseline; }
.muestra li::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: #b8bfe6; transform: translateY(-1px); }
.muestra li.urge::before { background: #f5a524; }

/* Cuatro datos */
.hechos { background: var(--blanco); padding: 7.5rem 0 2.5rem; border-bottom: 1px solid var(--linea); }
.hechos .envoltura { display: grid; gap: 1.2rem 2rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .hechos .envoltura { grid-template-columns: repeat(4, 1fr); } }
.hechos p { color: var(--pizarra); font-size: .98rem; line-height: 1.35; }
.hechos strong { display: block; color: var(--indigo); font: 800 clamp(1.7rem, 3.4vw, 2.4rem)/1.05 var(--titulos); letter-spacing: -.02em; margin-bottom: .2rem; }

/* Diferencias */
.diferencias { background: var(--noche); color: #fff; }
.diferencias .intro { color: #c9cde3; }
.comparativa { margin-top: 2.6rem; display: grid; gap: .5rem; }
.fila { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: var(--radio); background: rgba(255, 255, 255, .05); }
.fila [role="rowheader"] { font: 700 1.08rem/1.3 var(--titulos); }
.fila [role="cell"]:nth-child(2) { color: #9aa1c4; }
.fila [role="cell"]:nth-child(2)::before { content: "Común: "; font-weight: 600; }
.fila [role="cell"]:nth-child(3) { color: var(--menta); font-weight: 600; }
.fila [role="cell"]:nth-child(3)::before { content: "Encauza: "; color: #fff; }
.fila.encabezado { display: none; }
@media (min-width: 860px) {
  .fila { grid-template-columns: 1.05fr 1fr 1.25fr; gap: 1.5rem; align-items: center; padding: 1.05rem 1.4rem; }
  .fila.encabezado { display: grid; background: transparent; padding-bottom: .2rem; font-size: .92rem; color: #9aa1c4; }
  .fila.encabezado span:nth-child(3) { color: var(--menta); font: 700 1.1rem var(--titulos); }
  .fila [role="cell"]::before { content: none !important; }
  .fila [role="cell"]:nth-child(3) { position: relative; padding-left: 1.9rem; }
  .fila [role="cell"]:nth-child(3)::after {
    content: ""; position: absolute; left: 0; top: .2em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23121633' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  }
}

/* Lo que viene */
.proximo { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.2rem 2.5rem; }
@media (min-width: 760px) { .proximo { grid-template-columns: 1fr 1fr; } }
.proximo li { padding-left: 1.2rem; border-left: 3px solid var(--menta); color: var(--pizarra); }
.proximo strong { display: block; color: var(--noche); font: 700 1.15rem/1.3 var(--titulos); }

/* Tres columnas en pantallas anchas */
@media (min-width: 1000px) { .funciones { grid-template-columns: repeat(3, 1fr); } }
.contacto { background: radial-gradient(50rem 26rem at 90% 0%, rgba(66, 86, 214, .7), transparent 62%), var(--noche); }

/* --- Cauces animados: mensajes que viajan de cada canal a la venta --- */
.cauces .canal circle { fill: #fff; filter: drop-shadow(0 6px 14px rgba(8, 10, 32, .45)); }
.cauces .palomita { fill: none; stroke: var(--noche); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.cauces .gota { fill: #fff; opacity: 0; }
.gota-wa { offset-path: path("M72 72 C200 72 230 210 330 210 L470 210"); }
.gota-ig { offset-path: path("M72 210 L330 210 L470 210"); }
.gota-ms { offset-path: path("M72 350 C200 350 230 210 330 210 L470 210"); }
@media (prefers-reduced-motion: no-preference) {
  .cauces .canal { opacity: 0; animation: aparecer .5s ease forwards; }
  .cauces .canal:nth-of-type(3) { animation-delay: .15s; }
  .cauces .canal:nth-of-type(4) { animation-delay: .3s; }
  .cauces .gota { animation: viajar 3.6s 2.2s linear infinite; }
  .cauces .gota-ig { animation-delay: 3.1s; }
  .cauces .gota-ms { animation-delay: 4s; }
  .cauces .gota.tarde { animation-duration: 3.6s; }
  .cauces .gota-wa.tarde { animation-delay: 4s; }
  .cauces .gota-ig.tarde { animation-delay: 4.9s; }
  .cauces .gota-ms.tarde { animation-delay: 5.8s; }
  .cauces .halo-2 { animation-delay: 3.5s; }
  .cauces .palomita { stroke-dasharray: 34; stroke-dashoffset: 34; animation: correr-palomita .4s 2.1s ease forwards; }
}
@keyframes viajar {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes correr-palomita { to { stroke-dashoffset: 0; } }