/* ==========================================================================
   Criterio — «Vitrina»: capa de estilo del sitio, encima de criterio.css.
   Referencias: IFTTT (tipografía gruesa, tarjetas de color, filtros, franja
   oscura de marcas, secciones título + caja + panel + cuatro columnas) y
   Apple (fotos grandes, galería blanca, medios de esquina amplia sin sombra).
   Cambia respecto a la guía de estilo: la web usa Nunito Sans y permite 800/900
   en titulares y botones. El cuerpo sigue en 400 y Martian Mono sigue siendo
   solo para etiquetas y datos.
   Se enlaza DESPUÉS de criterio.css.
   ========================================================================== */

:root{
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pag:#ffffff; --banda:#f3f6fb; --en-banda:#ffffff; --aro:#e3e8f2; --aro-control:#8d93a8;
  --noche:#111118; --sobre-noche:#ffffff; --suave-noche:rgba(255,255,255,.66);
  --iris-hondo:#1a1a9e;
  --r:20px; --r-media:28px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --pag:#0d0e16; --banda:#141624; --en-banda:#1d2033; --aro:#2b2f45; --aro-control:#585d7f; --noche:#000000; }
}
:root[data-theme="dark"]{ --pag:#0d0e16; --banda:#141624; --en-banda:#1d2033; --aro:#2b2f45; --aro-control:#585d7f; --noche:#000000; }

body{background:var(--pag);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:clip}
h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.05}
strong,b{font-weight:800}

/* ---------- escala de titulares ---------- */
.d1{font-size:clamp(42px,6.6vw,80px);font-weight:900;letter-spacing:-.025em;line-height:1.02}
.d2{font-size:clamp(32px,4.2vw,50px);font-weight:900;letter-spacing:-.02em;line-height:1.06}
.d3{font-size:clamp(22px,2vw,26px);font-weight:800;letter-spacing:-.01em;line-height:1.15}
.bajada-v{font-size:clamp(18px,1.8vw,21px);line-height:1.45;color:var(--suave);max-width:40em}
.centro{text-align:center;margin-inline:auto}

/* ---------- cabecera ---------- */
.cab{background:color-mix(in srgb,var(--pag) 90%,transparent);border-bottom:1px solid transparent}
.marca{font-weight:900;font-size:22px;letter-spacing:-.02em}
.menu a{font-weight:700;font-size:15px}
.menu a.pill,.menu a.boton{color:var(--pag);border-bottom:0;padding:9px 20px;font-weight:800}
.menu a.idioma{font-weight:400}  /* Martian Mono solo se carga en 400: con el 700 de .menu a salía en negrita falsa */

/* ---------- botones: la pastilla es la única forma de acción ---------- */
.boton,.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:100px;padding:14px 30px;font:inherit;font-size:18px;font-weight:800;
  letter-spacing:-.005em;text-decoration:none;cursor:pointer;border:0;background:var(--texto);color:var(--pag);box-shadow:none;min-height:48px;transition:transform .12s,opacity .12s}
.boton.principal,.pill.principal{background:var(--texto);color:var(--pag)}
.pill.blanca{background:#fff;color:#111118}
.pill.contorno,.boton.contorno{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 2px var(--texto)}
.pill.chica{padding:9px 20px;font-size:15px;min-height:44px}  /* 44 es el minimo tactil; con 40 la cabecera no llegaba */
@media (hover:hover){
  .boton:hover,.pill:hover{transform:scale(1.03);box-shadow:none}
  .boton:active,.pill:active{transform:scale(.98);box-shadow:none}
}

/* ---------- franjas ---------- */
.franja{padding-block:clamp(64px,9vw,112px)}
.franja.banda{background:var(--banda)}
.franja.noche{background:var(--noche);color:var(--sobre-noche)}
.franja.noche .bajada-v{color:var(--suave-noche)}
/* En claro el foco es iris, y iris sobre la franja oscura da 2,25:1. Cielo da 11,85:1. */
.franja.noche :focus-visible{outline-color:var(--cielo)}
.ancho{max-width:1200px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.filtro{font:inherit;font-size:15px;font-weight:700;padding:10px 18px;min-height:44px;border-radius:10px;border:0;background:var(--banda);color:var(--texto);cursor:pointer;transition:background .2s,color .2s,border-radius .2s}
.filtro[aria-pressed="true"]{background:var(--texto);color:var(--pag);border-radius:100px}

/* ---------- tarjeta de color (la «receta») ---------- */
.recetas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.receta{position:relative;display:flex;flex-direction:column;gap:14px;min-height:300px;padding:24px;border-radius:var(--r);text-decoration:none;color:#fff;background:var(--c,#2727e6);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.receta.clara{color:#111118}
.receta .iconos{display:flex;gap:10px;align-items:center;height:34px}
.receta .iconos svg{width:30px;height:30px}
.receta h3{font-size:clamp(21px,1.9vw,25px);font-weight:900;letter-spacing:-.015em;line-height:1.12}
.receta .de{font-size:13px;font-weight:700;opacity:.85}
.receta .pie-r{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:700}
.receta .sello-r{font-family:var(--mono);font-size:11px;letter-spacing:-.013em;text-transform:uppercase;padding:4px 10px;border-radius:6px;background:#fff;color:#111118;font-weight:400}
.receta[hidden]{display:none}
@media (hover:hover){ .receta:hover{transform:translateY(-4px)} }

/* ---------- sección tipo: título + caja | panel | 4 columnas ---------- */
.linea-cab{display:grid;grid-template-columns:1fr minmax(0,560px);gap:24px 48px;align-items:center;margin-bottom:32px}
.linea-cab p{margin-top:12px}
.caja-casos{border:1px solid var(--aro);border-radius:var(--r);padding:18px 20px;display:grid;gap:12px}
.caja-casos .t{font-size:15px;font-weight:800}
.pares{display:flex;flex-wrap:wrap;gap:10px}
.par{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:14px;background:var(--banda);text-decoration:none;color:var(--texto);font-size:13px;font-weight:700}
.par .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:var(--c,#2727e6);flex:none}
.par .ic img{width:100%;height:100%;object-fit:cover}
.par .ic svg{width:20px;height:20px}
.par .mas{opacity:.4;font-size:11px}
.panel{position:relative;border-radius:var(--r-media);background:var(--c,#2727e6);overflow:hidden;min-height:clamp(340px,42vw,520px);display:flex;justify-content:center;align-items:flex-end;padding:clamp(28px,5vw,56px) clamp(16px,4vw,48px) 0}
.ventana{width:min(100%,760px);background:#fff;border-radius:14px 14px 0 0;overflow:hidden}
.ventana .barra{display:flex;gap:7px;padding:12px 14px;background:#f2f2f4}
.ventana .barra i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.ventana .barra i:nth-child(2){background:#febc2e}
.ventana .barra i:nth-child(3){background:#28c840}
.ventana img{display:block;width:100%;height:auto}
.columnas{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px}
.columnas h3{font-size:16px;font-weight:800;display:flex;gap:8px;align-items:center;letter-spacing:0;line-height:1.3}
.columnas h3 svg{flex:none}
.columnas p{font-size:15px;color:var(--suave);margin-top:4px}
.linea-accion{display:flex;justify-content:center;margin-top:40px}

/* ---------- el celular (render con CSS) ---------- */
.cel{position:relative;aspect-ratio:9/19.2;border-radius:18% / 8.4%;padding:3.2%;background:linear-gradient(145deg,#3a3b40,#16161a 40%,#2a2b30);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);flex:none}
.cel .pantalla{height:100%;border-radius:15% / 7%;overflow:hidden;background:#0d0b0a;position:relative}
.cel .pantalla::before{content:"";position:absolute;top:2.2%;left:50%;transform:translateX(-50%);width:30%;height:3.4%;border-radius:50px;background:#000;z-index:1}
.cel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- aparición al hacer scroll (sin JS todo se ve) ---------- */
.js .aparece{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .aparece.visto{opacity:1;transform:none}

/* ==========================================================================
   Componentes de portada (ES y EN): héroe con bloques, cómo trabaja,
   cinta de logos, casos, panel «si / entonces», quién.
   ========================================================================== */
/* ---------- héroe: bloques de color que se salen del borde, como los de IFTTT,
   pero con la comida de los clientes en vez de iconos de apps ---------- */
.heroe-v{position:relative;text-align:center;padding-block:clamp(56px,8vw,96px) clamp(64px,8vw,110px);display:grid;gap:22px;justify-items:center}
.heroe-v .bajada-v{color:var(--texto)}
.pedir{width:min(100%,560px);display:grid;gap:14px;justify-items:center;margin-top:6px}
.pedir textarea{width:100%;min-height:92px;resize:vertical;border-radius:14px;border:1px solid var(--aro-control);background:var(--pag);padding:14px 16px;font:inherit;font-size:16px;color:var(--texto)}
.pedir textarea::placeholder{color:var(--suave)}
/* Atajos del heroe: llenan el campo de una pulsada. Solo existen con JS, que es
   quien los hace funcionar; sin el serian botones muertos. */
.atajos{display:none}
.js .atajos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.atajo{min-height:44px;padding:10px 16px;border-radius:100px;border:1px solid var(--aro-control);
  background:var(--pag);color:var(--texto);font:inherit;font-size:15px;font-weight:700;
  cursor:pointer;transition:transform .12s,border-color .12s}
@media (hover:hover){ .atajo:hover{border-color:var(--texto)} }
.atajo:active{transform:scale(.97)}
.bloques{position:absolute;inset:0;pointer-events:none;z-index:-1}
.bl{position:absolute;border-radius:24px;overflow:hidden}
.bl svg.orbita{position:absolute;inset:0;width:100%;height:100%}
.bola{position:absolute;width:62px;height:62px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.bola img{display:block;width:100%;height:100%;object-fit:cover}
.bola.wa{display:grid;place-items:center;background:#25d366;color:#fff}
.bola.wa svg{width:32px;height:32px}
.bloques .izq{left:calc(50% - 700px)}
.bloques .der{right:calc(50% - 700px)}
.b1{top:90px;width:250px;height:250px;background:var(--iris);margin-left:-70px}
.b2{top:210px;width:200px;height:190px;background:var(--noche);margin-left:20px}
.b3{top:400px;width:180px;height:140px;background:var(--amarillo);margin-left:-60px}
.b4{top:40px;width:230px;height:200px;background:var(--cielo);margin-right:-50px}
.b5{top:170px;width:270px;height:270px;background:#ff6a3d;margin-right:-70px}
.b6{top:200px;width:190px;height:180px;background:var(--noche);margin-right:10px}
@media (max-width:1180px){ .bloques{display:none} }
.bolas-movil{display:none;gap:10px;justify-content:center}
.bolas-movil .bola{position:static;width:52px;height:52px;box-shadow:none}
@media (max-width:1180px){ .bolas-movil{display:flex} }

/* ---------- cómo funciona ---------- */
.como{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:center}
.como .texto{display:grid;gap:18px;justify-items:start}
.escenario{background:var(--noche);border-radius:var(--r-media);height:clamp(320px,36vw,440px);display:flex;justify-content:center;align-items:flex-end;overflow:hidden;padding-top:36px}
.escenario .cel{width:clamp(120px,14vw,180px);margin-bottom:-90px}
.escenario .cel:nth-child(2){width:clamp(140px,16vw,205px);z-index:1;margin-inline:-14px;margin-bottom:-50px}

/* ---------- quién ---------- */
.quien-v{display:grid;grid-template-columns:auto 1fr;gap:24px 40px;align-items:center;max-width:980px;margin:0 auto}
.quien-v .cubo-g{width:120px;height:120px;border-radius:30px;background:var(--marca-fondo);display:grid;place-items:center}
.quien-v .cubo-g path{stroke:var(--marca-trazo)}  /* el logo en oscuro: círculo cielo y cubo tinta */
.quien-v p{color:var(--suave);max-width:60ch;margin-top:10px}

.cierre-v{text-align:center;display:grid;gap:24px;justify-items:center}
.cierre-v .contacto{color:var(--suave-noche)}


/* ---------- panel «Si pasa esto → entonces», como el If This Then That de IFTTT ---------- */
.flujo{width:min(100%,720px)}
.flujo-cuerpo{padding:clamp(24px,4vw,44px) clamp(18px,4vw,44px) clamp(28px,4vw,48px);display:grid;justify-items:center;background:#fff}
.flujo .si,.flujo .entonces{width:100%;border-radius:16px;padding:clamp(16px,2.4vw,24px) clamp(18px,3vw,28px);display:grid;gap:4px;text-align:left}
.flujo .si{background:#111118;color:#fff}
.flujo .entonces{background:#e9ebf0;color:#111118}
.flujo .k{font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1}
.flujo .t{font-size:clamp(16px,1.8vw,20px);font-weight:700;line-height:1.3;transition:opacity .3s}
.flujo.cambia .t{opacity:0}
.linea-flujo{width:2px;height:28px;background:#c9ceda}

/* ---------- cinta de logos: se desplaza sola, se detiene al pasar el cursor ---------- */
.cinta{display:flex;overflow:hidden;margin-block:40px 36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta-pista{display:flex;gap:16px;padding:0 8px;margin:0;list-style:none;flex:none;animation:cinta 38s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-100%)}}
.logo-t{width:clamp(120px,13vw,160px);aspect-ratio:1;border-radius:22px;background:var(--c);display:grid;place-items:center;padding:clamp(16px,2vw,24px);flex:none}
.logo-t img{max-width:100%;max-height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){ .cinta{overflow-x:auto} .cinta-pista{animation:none} .cinta-pista[aria-hidden]{display:none} }

/* ---------- casos: tarjetas que avanzan solas, como testimonios pero con el trabajo ---------- */
.casos-v{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,290px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:0 0 4px;list-style:none;scroll-behavior:smooth}
.casos-v::-webkit-scrollbar{display:none}
.caso-v{scroll-snap-align:start;background:#1b1c26;border-radius:22px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.caso-foto{background:var(--c);height:250px;overflow:hidden;display:flex;justify-content:center;padding-top:26px}
.caso-foto .cel{width:150px;height:auto}
.caso-cuerpo{position:relative;padding:40px 20px 20px;display:flex;flex-direction:column;gap:6px}
.caso-logo{position:absolute;top:-30px;left:20px;width:60px;height:60px;border-radius:16px;background:var(--c);display:grid;place-items:center;padding:8px;box-shadow:0 0 0 3px #1b1c26}
.caso-logo img{max-width:100%;max-height:100%;object-fit:contain}
.caso-nombre{font-size:20px;font-weight:900;letter-spacing:-.01em;line-height:1.15}
.caso-rubro{font-size:14px;color:var(--suave-noche)}
.hechos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hechos span{font-family:var(--mono);font-size:11px;letter-spacing:-.013em;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.1)}
.ir-caso{margin-top:auto;padding-top:12px;color:var(--cielo);font-weight:800;font-size:15px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.ir-caso:hover{text-decoration:underline}
.ir-caso.entregado{color:var(--suave-noche);font-weight:700}
@media (max-width:860px){ .como,.quien-v{grid-template-columns:1fr} }

.bola.ic{display:grid;place-items:center;background:var(--c);color:#fff}
.bola.ic svg{width:30px;height:30px}
.caso-foto .ventana-mini{width:90%;align-self:flex-end;border-radius:10px 10px 0 0;overflow:hidden;background:#fff}
.caso-foto .ventana-mini .barra{display:flex;gap:5px;padding:7px 9px;background:#f2f2f4}
.caso-foto .ventana-mini .barra i{width:7px;height:7px;border-radius:50%;background:#ff5f57}
.caso-foto .ventana-mini .barra i:nth-child(2){background:#febc2e}
.caso-foto .ventana-mini .barra i:nth-child(3){background:#28c840}
.caso-foto .ventana-mini img{display:block;width:100%;height:auto}

@media (max-width:1000px){
  .recetas{grid-template-columns:repeat(2,1fr)}
  .linea-cab{grid-template-columns:1fr}
  .columnas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){ .menu .ocultar-movil{display:none} }
@media (max-width:560px){
  .recetas{grid-template-columns:1fr}
  .receta{min-height:230px}
  .columnas{grid-template-columns:1fr}
  .boton,.pill{font-size:17px;padding:13px 26px}
}
@media (prefers-reduced-motion:reduce){ .js .aparece{opacity:1;transform:none} }