/* Sistema visual del sitio de Daima.
   Dos capas: la de marketing (hero, productos, bloques) con escala grande, y la de app
   (.group/.rows, calculadora de planes) con escala densa. Comparten tokens y fuente. */

:root{
  /* superficie y tinta */
  --bg:#f7f7f4;
  --surface:#ffffff;
  --ink:#0c1222;
  --ink-2:#5b6472;
  --line:#e3e3dc;
  --line-strong:#cfcfc6;

  /* un solo acento, azul profundo: distinto del azul de las apps para que las capturas
     se lean como contenido y no como parte de la interfaz del sitio */
  --brand:#17368c;
  --brand-hover:#122b70;
  --brand-soft:#e8edf8;
  --brand-ink:#12306b;

  /* whatsapp, solo en el flotante */
  --wa:#128c7e;
  --wa-hover:#0f766a;

  /* nombres que ya usa planes.css: se mantienen, apuntan a los tokens nuevos */
  --background:var(--bg);
  --foreground:var(--ink);
  --card:var(--surface);
  --muted:#efefe9;
  --muted-foreground:var(--ink-2);
  --primary:var(--brand);
  --primary-hover:var(--brand-hover);
  --primary-foreground:#ffffff;
  --accent:var(--brand-soft);
  --accent-foreground:var(--brand-ink);
  --success:var(--wa);
  --success-hover:var(--wa-hover);
  --border:var(--line);
  --ring:var(--brand);

  --shadow-card:0 1px 2px rgba(12,18,34,.04),0 8px 24px rgba(12,18,34,.06);
  --shadow-device:0 2px 4px rgba(12,18,34,.06),0 24px 48px -12px rgba(12,18,34,.18);
  --radius:12px;
  --font:"Manrope",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
img{max-width:100%;display:block}
[hidden]{display:none!important}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
p{margin:0}
a{color:inherit}

/* una sola medida, acotada y centrada */
.pane{width:100%;max-width:72rem;margin-inline:auto;padding-inline:24px}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:10;background:rgba(247,247,244,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:17px;font-weight:800;letter-spacing:0;line-height:1}
/* "Solutions" en peso liviano: el conjunto se lee como un wordmark y no como dos palabras sueltas */
.brand .co{font-weight:500;color:var(--ink-2)}
.brand:focus-visible,.nav a:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{display:inline-flex;align-items:center;height:36px;padding-inline:12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.nav a:hover{background:var(--brand-soft);color:var(--brand-ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- capa de marketing ---------- */
.eyebrow{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
/* atmosfera: un halo de acento y una reticula de puntos casi invisible, en vez de fondo plano */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 85% -10%,rgba(23,54,140,.10),transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%,rgba(23,54,140,.06),transparent 60%),
    radial-gradient(rgba(12,18,34,.07) 1px,transparent 1px);
  background-size:auto,auto,22px 22px}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;min-height:min(78vh,760px);padding-block:72px}
/* en pantallas anchas la ventana se asoma un poco fuera de la columna: mas presencia */
@media (min-width:1200px){.hero-visual{margin-right:-48px}}
.hero h1{font-size:clamp(36px,5.2vw,56px)}
.hero .lead{margin-top:20px;max-width:34rem;font-size:19px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.hero .btns{margin-top:32px}
.hero-visual{position:relative}
.hero-visual .phone{position:absolute;right:-8px;bottom:-40px;width:clamp(180px,22%,230px)}

/* marco de ventana para capturas de escritorio */
.window{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-device);overflow:hidden}
.window-bar{display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px;border-bottom:1px solid var(--line);background:#fafaf7}
.window-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.window img{width:100%;height:auto}

/* marco de telefono para capturas de celular */
.phone{padding:8px;border-radius:38px;background:#0c1222;box-shadow:var(--shadow-device)}
.phone img{width:100%;height:auto;border-radius:30px}

/* franja de confianza: nombres reales, sin numeros inventados */
/* Franja de clientes, variante "tira": los logos sueltos sobre el fondo, con el nombre debajo.
   Sin tarjeta, porque tres cajas grandes con borde hacen notar que los clientes son pocos.
   Ademas el texto va DEBAJO del logo y no al lado, asi que desaparece el hueco lateral que
   dejaban los logos de distinta proporcion. */
.trust{padding-block:48px}
.trust p{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 10px}
/* La caja es igual para todos, pero el logo se apoya en el BORDE INFERIOR, no centrado: si va
   centrado, el aire sobrante de un logo bajito se suma al gap y ese queda mas separado del texto
   que los demas. Apoyados abajo, los tres arrancan el texto a la misma distancia. */
.trust-item .logo{width:160px;height:72px;object-fit:contain;object-position:center bottom;transform:scale(var(--esc,1));transform-origin:center bottom}
/* sin logo: icono en trazo, sin fondo de color, que en una tira un cuadrado lleno desentona.
   Gris medio: tiene que pesar como un logo, no desaparecer ni competir con los de color */
.trust-item .ic{width:160px;height:72px;display:grid;place-items:end center;color:#9aa1ab}
.trust-item .ic svg{width:48px;height:48px}
.trust-item b{display:block;font-size:16px;font-weight:700;line-height:1.35;text-wrap:balance}
/* En carrusel y en marquee las tarjetas son angostas y un nombre largo pasa a dos lineas.
   Si el bloque del nombre crece, la bajada de esa tarjeta baja con el y deja de estar a la
   misma altura que la de al lado. Reservamos los dos renglones siempre: el nombre corto deja
   uno vacio, pero todas las bajadas arrancan parejas, agregue el dueno el cliente que agregue. */
.trust-row.is-carousel .trust-item b,
.trust-row.is-marquee .trust-item b{min-height:2.7em}
.trust-item small{display:block;margin-top:3px;font-size:13px;color:var(--ink-2);text-wrap:pretty}

.trust-wrap{position:relative}
/* marquee: la tira se desliza sin parar. Solo se activa desde 6 clientes, cuando el loop
   deja de notarse; con pocos, el movimiento llama la atencion sobre que son pocos. */
.trust-wrap.marquee{overflow:hidden}
.trust-row.is-marquee{display:flex;align-items:flex-start;gap:20px;width:max-content;animation:marquee var(--dur,40s) linear infinite}
.trust-row.is-marquee .trust-item{flex:0 0 200px}
.trust-wrap.marquee:hover .trust-row.is-marquee,
.trust-wrap.marquee:focus-within .trust-row.is-marquee{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 10px))}}
.trust-row.is-carousel{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:20px;padding-bottom:4px}
.trust-row.is-carousel::-webkit-scrollbar{display:none}
.trust-row.is-carousel .trust-item{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start}
.trust-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.trust-nav:hover{background:var(--brand-soft)}
.trust-nav:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.trust-nav.prev{left:-18px}
.trust-nav.next{right:-18px}
.trust-dots{display:flex;justify-content:center;gap:9px;margin-top:20px}
.trust-dots button{position:relative;width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line-strong);cursor:pointer}
.trust-dots button::before{content:"";position:absolute;inset:-10px}
.trust-dots button[aria-current="true"]{background:var(--brand)}
.trust-dots button:focus-visible{outline:2px solid var(--ring);outline-offset:4px}

/* seccion de producto: captura a un lado, texto al otro, alternando */
.product{padding-block:88px;border-top:1px solid var(--line)}
.product-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.product.rev .product-copy{order:-1}
.product-copy .app{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.product-copy .app img{width:44px;height:44px;border-radius:12px}
.product-copy h2{font-size:clamp(28px,3.4vw,36px)}
.product-copy .sub{margin-top:14px;font-size:18px;color:var(--ink-2);text-wrap:pretty}
.product-copy .ticks{margin-top:24px}
.product-copy .btns{margin-top:32px}
.product-visual .phone{width:min(300px,80%);margin-inline:auto}

/* lista con tilde */
.ticks{margin:0;padding:0;list-style:none}
.ticks li{position:relative;padding-left:30px;font-size:17px;line-height:1.5}
.ticks li + li{margin-top:12px}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--brand-soft)}
.ticks li::after{content:"";position:absolute;left:6px;top:.55em;width:8px;height:4px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}

/* cuatro bloques */
.features{padding-block:88px;border-top:1px solid var(--line)}
.features h2{font-size:clamp(26px,3vw,32px);text-align:center}
.features-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.feature{padding:28px 24px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s}
.feature:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(12,18,34,.04),0 16px 32px rgba(12,18,34,.09)}
.feature .ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:18px}
.feature h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.feature p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding-inline:22px;border:1px solid transparent;border-radius:10px;font-family:inherit;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(12,18,34,.12)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-2);background:#fff}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- cabecera de pagina interna ---------- */
.page-head{padding-block:64px 8px}
.page-head h1{font-size:clamp(34px,4.6vw,48px)}
.page-head p{margin-top:16px;max-width:40rem;font-size:19px;color:var(--ink-2);text-wrap:pretty}
.page-head .btns{margin-top:28px}
/* variante con captura al lado, para las paginas de producto */
.page-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:64px 24px}
.page-hero .page-head{padding:0}
.page-hero .phone{width:min(280px,70%);margin-inline:auto}

section{padding-block:32px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sec-head h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.sec-head p{margin:0;font-size:15px;color:var(--ink-2)}

/* ---------- capa de app: lista agrupada ---------- */
.group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(12,18,34,.03)}
.rows{padding-inline:20px}
.rows > *{padding-block:16px}
.rows > * + *{border-top:1px solid var(--line)}

.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:32px;row-gap:8px}
.row .lbl{flex:1 1 16rem;min-width:0}
.row .lbl b{display:block;font-size:16px;font-weight:600}
.row .lbl small{display:block;margin-top:3px;font-size:14px;color:var(--ink-2);text-wrap:pretty}
.row .ctl{flex:0 0 auto;min-width:14rem;max-width:22rem;display:flex;justify-content:flex-end}
.row .val{flex:0 0 auto;font-size:16px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .val small{display:block;font-size:13px;font-weight:400;color:var(--ink-2)}
.row .listv{flex:1 1 20rem;min-width:0;font-size:16px;color:var(--ink-2);text-align:right;text-wrap:pretty}

/* fila de definicion: etiqueta a la izquierda y el texto tambien */
.defrow{display:grid;grid-template-columns:11rem minmax(0,1fr);column-gap:32px;align-items:baseline}
.defrow .lbl{flex:none}
.defrow .listv{flex:none;text-align:left}

.on{color:var(--brand-ink)}

/* cabecera de tarjeta de plan */
.phead{padding:22px 20px 18px;border-bottom:1px solid var(--line)}
.phead h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:18px;font-weight:700;letter-spacing:-.01em}
.phead p{margin:8px 0 0;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pick-tag{display:inline-block;padding:3px 9px;border-radius:9999px;background:var(--brand-soft);color:var(--brand-ink);font-size:12px;font-weight:700;letter-spacing:0;white-space:nowrap}
.amt{display:flex;align-items:baseline;gap:6px;margin-top:14px}
.amt i{font-style:normal;font-size:15px;color:var(--ink-2)}
.amt b{font-size:34px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.amt span{font-size:15px;color:var(--ink-2)}

/* bloque de cierre dentro de un grupo */
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 20px;border-top:1px solid var(--line);background:#fbfbf9;border-radius:0 0 var(--radius) var(--radius)}
.cta b{display:block;font-size:17px;font-weight:700}
.cta span{display:block;margin-top:3px;font-size:15px;color:var(--ink-2);text-wrap:pretty}

/* ---------- pie ---------- */
footer{margin-top:64px;border-top:1px solid var(--line);background:var(--surface)}
.foot-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding-block:48px 28px;text-align:center}
.foot-in .brand{font-size:22px}
.foot-in .contact{display:flex;gap:8px 22px;flex-wrap:wrap;justify-content:center;font-size:16px;color:var(--ink-2)}
.foot-in .contact a{color:var(--ink-2);text-decoration:none;font-variant-numeric:tabular-nums}
.foot-in .contact a:hover{color:var(--brand-ink);text-decoration:underline}
.foot-in .contact a:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:4px}
.foot-legal{padding-block:0 28px;font-size:13px;color:var(--ink-2);text-align:center}

/* unico contacto directo del sitio: flota en cada pagina */
.fab{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:20;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:9999px;background:var(--wa);color:#fff;box-shadow:0 8px 20px rgba(12,18,34,.22);transition:background .15s,transform .15s}
.fab:hover{background:var(--wa-hover);transform:translateY(-2px)}
.fab:active{transform:scale(.95)}
.fab:focus-visible{outline:2px solid var(--ring);outline-offset:3px}

/* ---------- movimiento: una entrada escalonada en el hero, nada mas ---------- */
.reveal{opacity:0;transform:translateY(14px);animation:reveal .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes reveal{to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .features-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:40px;min-height:0;padding-block:56px 72px}
  /* el telefono se queda sobre la esquina de la ventana, con el bisel a escala:
     padding 8 y radio 38 en un elemento de 90px lo hacen parecer una pastilla, no un telefono */
  .hero-visual{margin-right:0}
  .hero-visual .phone{width:32%;max-width:130px;right:0;bottom:-16px;padding:4px;border-radius:22px;box-shadow:0 2px 4px rgba(12,18,34,.08),0 12px 24px -8px rgba(12,18,34,.28)}
  .hero-visual .phone img{border-radius:18px}
  .product{padding-block:64px}
  .product-in{grid-template-columns:1fr;gap:36px}
  .product.rev .product-copy{order:0}
  .product-visual{order:-1}
  .product-visual .phone{width:min(260px,70%)}
  .page-hero{grid-template-columns:1fr;gap:36px;padding-block:48px 16px}
  .trust-row{grid-template-columns:1fr}
  /* en celular entran dos por vez: cada uno es angosto porque el texto va debajo del logo */
  .trust-row.is-carousel{margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px}
  .trust-row.is-carousel .trust-item{flex-basis:calc((100% - 20px)/2)}
}
@media (max-width:640px){
  /* capturas de tablet en un celular: recorte 4:3 desde arriba a la izquierda, que es donde esta la UI legible */
  .hero .window img,.product .window img{aspect-ratio:4/3;object-fit:cover;object-position:left top}
  /* logo arriba y texto abajo: en una tarjeta angosta, al lado no entra ninguno de los dos */
  .trust-item{gap:10px;padding-inline:4px}
  .trust-item .logo,.trust-item .ic{width:132px;height:60px}
  .trust-item small{font-size:12px}
  .trust-row.is-carousel{margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px}
}
@media (max-width:640px){
  body{font-size:16px}
  .pane{padding-inline:18px}
  .top-in{height:60px}
  /* el header de celular tiene ~340px utiles: con dos enlaces de producto no entra un wordmark
     de dos palabras, se desborda 26px. "Solutions" sigue en el pie, el titulo y las metas */
  .top .brand .co{display:none}
  /* "RestoManager" y "FactuManager" juntos no entran a 14px: se salian 24px del margen */
  .nav{gap:2px}
  .nav a{padding-inline:7px;font-size:13px}
  .hero .lead{font-size:17px}
  .row{column-gap:16px}
  .row .ctl{flex:1 1 100%;min-width:0;max-width:none;justify-content:flex-start}
  .row .listv{flex:1 1 100%;text-align:left}
  .rows > .defrow{display:block;padding-block:12px}
  .defrow .lbl,.defrow .lbl b,.defrow .listv{display:inline;font-size:15px}
  .defrow .lbl b::after{content:" \00b7 ";font-weight:400;color:var(--ink-2)}
  .btns .btn{flex:1 1 12rem}
  .features-row{grid-template-columns:1fr}
  .ticks li{font-size:16px}
  .foot-legal{padding-bottom:96px}
  .fab{right:18px;bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}