/* Callsy X — secciones: "Qué hace" con imágenes, la campaña con envío masivo de ejemplo, los testimonios en video,
   el precio y los datos de contacto. Tokens en base.css; la lógica en js/secciones.js. Celular primero. */

/* ===================================================================================================
   Qué hace: cada función con su imagen (720 × 1080, 2:3).
   - Celular y tableta (y sin JS): carrusel con scroll-snap, de borde a borde.
   - Escritorio sin JS: cuadrícula de tres columnas, imagen junto a su texto.
   - Escritorio con JS: secciones.js arma .vitrina (botones a la izquierda, celular fijo a la derecha).
   =================================================================================================== */
.funciones-zona{position:relative}
.funciones{list-style:none;margin:0;padding:0}
.func{display:grid;gap:12px;align-content:start;padding:10px;border-radius:var(--r-lg);background:rgba(255,255,255,.02);border:1px solid var(--line)}
.func__fig{position:relative;margin:0;aspect-ratio:2/3;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(70% 50% at 50% 0%,rgba(94,227,207,.12),transparent 70%),var(--surface)}
.func__fig img{width:100%;height:100%;object-fit:cover;display:block}
.func.is-sin-imagen .func__fig img{visibility:hidden}   /* si una imagen no carga, queda el fondo y no el ícono roto */
.func__cuerpo{display:flex;gap:12px;align-items:flex-start;padding:2px 2px 4px}
.func__ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);flex:none;color:var(--brand);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;transition:border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.func__ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.func__t{font:500 1rem/1.3 var(--font-display);margin:4px 0 4px;letter-spacing:-.01em;color:var(--ink)}
.func .p{font-size:.9rem;line-height:1.5}

@media (max-width:899px){
  .funciones{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter);
    scrollbar-width:thin;scrollbar-color:rgba(94,227,207,.35) transparent}
  .funciones:focus-visible{outline-offset:-2px;border-radius:0}
  .func{flex:0 0 min(84%,320px);scroll-snap-align:start}   /* ≥ 280 px de imagen a 360: la letra de las capturas se lee */
}
@media (min-width:600px) and (max-width:899px){.func{flex-basis:41%}}
@media (min-width:900px){
  .funciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .func{grid-template-columns:120px minmax(0,1fr);align-items:start;gap:14px}
  .func__cuerpo{flex-direction:column;gap:8px;padding:4px 4px 0 0}
}

/* Controles del carrusel (los pone secciones.js; solo en celular y tableta) */
.carril__ctrl{display:flex;align-items:center;gap:12px;margin-top:6px}
.carril__btn{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);transition:border-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),opacity var(--t-hover) var(--ease)}
.carril__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carril__btn:hover{border-color:rgba(94,227,207,.55);color:var(--brand)}
.carril__btn:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--muted)}
.carril__pista{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.carril__valor{display:block;height:100%;width:100%;border-radius:inherit;background:var(--grad);transform-origin:0 50%;transform:scaleX(.11)}
.carril__cuenta{min-width:42px;text-align:right;font:500 .8rem/1 var(--font-body);color:var(--muted);font-variant-numeric:tabular-nums}
@media (min-width:900px){.carril__ctrl{display:none}}

/* Vitrina de escritorio: lista de botones + celular fijo que cambia de imagen con un fundido */
.vitrina{display:none}
@media (min-width:900px){
  .con-vitrina > .funciones{display:none}
  .con-vitrina > .vitrina{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:clamp(40px,6vw,96px);align-items:start}
}
.vitrina__col{position:relative}
.vitrina__lista{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vitrina__textos{display:block;min-width:0}
.vitrina__btn .func__t{display:block}
.vitrina__luz{position:absolute;left:0;right:0;top:0;height:0;z-index:0;pointer-events:none;border-radius:var(--r-md);
  background:linear-gradient(90deg,rgba(94,227,207,.13),rgba(94,227,207,.03) 75%);border:1px solid rgba(94,227,207,.42);
  box-shadow:0 0 34px -14px rgba(94,227,207,.75);opacity:0;transition:transform .5s var(--ease),height .5s var(--ease),opacity .3s var(--ease)}
.vitrina__luz.is-lista{opacity:1}
.vitrina__btn{position:relative;z-index:1;width:100%;display:flex;gap:14px;align-items:flex-start;padding:12px 16px 12px 12px;text-align:left;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:var(--r-md);color:var(--muted);transition:color var(--t-hover) var(--ease)}
.vitrina__btn .func__t{margin-top:2px;color:rgba(244,247,246,.78);transition:color var(--t-hover) var(--ease)}
.vitrina__btn .func__d{display:block;font-size:.88rem;line-height:1.5}
.vitrina__btn .func__ico{color:var(--muted)}
.vitrina__btn:hover .func__t,.vitrina__btn[aria-pressed="true"] .func__t{color:var(--ink)}
.vitrina__btn[aria-pressed="true"] .func__ico{color:var(--brand);border-color:rgba(94,227,207,.55);box-shadow:0 0 0 1px rgba(94,227,207,.2),0 0 20px -4px rgba(30,158,144,.75)}
.vitrina__btn:focus-visible{outline-offset:-2px;border-radius:var(--r-md)}
.vitrina__escena{position:sticky;top:92px}
.celu{margin:0;display:grid;gap:12px}
.celu__cuerpo{position:relative;padding:28px 10px 14px;border-radius:46px;background:linear-gradient(165deg,#1B2726,#0A1010 60%);border:1px solid var(--line-strong);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(0,0,0,.6),0 50px 100px -50px rgba(0,0,0,.95),0 0 80px -34px rgba(94,227,207,.5)}
.celu__bocina{position:absolute;top:11px;left:50%;width:64px;height:7px;margin-left:-32px;border-radius:999px;background:#030606;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.celu__pantalla{position:relative;aspect-ratio:2/3;border-radius:34px;overflow:hidden;
  background:radial-gradient(70% 45% at 50% 0%,rgba(94,227,207,.14),transparent 70%),var(--surface)}
.celu__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease)}
.celu__img.is-activa{opacity:1}
.celu__img.is-rota{visibility:hidden}
.celu__pie{margin:0;text-align:center;font-size:.8rem;color:var(--muted);min-height:1.3em}
.celu__pie b{color:var(--ink);font-weight:500}

/* ===================================================================================================
   Campaña: vista previa → envío masivo de ejemplo (secciones.js). Sin JS solo existe la vista previa.
   =================================================================================================== */
.campana{overflow:hidden}
.campana__barrido{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 30%,rgba(94,227,207,.2) 48%,rgba(182,243,234,.28) 50%,rgba(94,227,207,.2) 52%,transparent 70%)}
.campana__cab .chip .dot{animation:latido 1.4s ease-in-out infinite}
.campana__cab .chip--ok .dot{animation:none}
@keyframes latido{50%{opacity:.35}}
.sin-movimiento .campana__cab .chip .dot{animation-play-state:paused}
.no-js [data-campana-enviar]{cursor:default}
.no-js [data-campana-enviar]:hover{transform:none}
.campana__vistas{display:grid}
.campana__vistas > *{grid-area:1/1;min-width:0;align-self:start}
.campana__previa,.campana__envio{display:grid;gap:14px;align-content:start}
.campana__envio[hidden],.campana__previa[hidden],.campana .btn[hidden]{display:none}   /* .btn pone display y le ganaría a hidden */
.campana__envio:focus{outline:none}
.campana__envio:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:var(--r-sm)}
.envio__cifra{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.envio__total{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:.86rem;color:var(--muted)}
.envio__n{font:500 clamp(2rem,4.2vw,2.6rem)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:3.2ch}
.envio__reloj{margin:0;flex:none;padding:6px 10px;border-radius:var(--r-pill);border:1px solid rgba(94,227,207,.3);background:rgba(94,227,207,.08);
  color:var(--brand);font:500 .8rem/1 var(--font-body);font-variant-numeric:tabular-nums}
.envio__barra{height:10px}
.envio__barra .barra__valor{box-shadow:0 0 14px rgba(94,227,207,.6)}
.envio__split{margin:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.78rem;color:var(--muted)}
.envio__split b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.envio__lista{list-style:none;margin:0;padding:6px;display:grid;grid-auto-rows:40px;gap:6px;height:236px;overflow:hidden;align-content:start;
  border-radius:var(--r-md);background:rgba(255,255,255,.025);border:1px solid var(--line);
  -webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent)}
.envio__fila{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:0 10px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.04);font-size:.8rem;animation:filaEntra .35s var(--ease) both}
.envio__ini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid rgba(94,227,207,.3);
  color:var(--brand);font:600 .66rem/1 var(--font-body);letter-spacing:.02em}
.envio__quien{display:grid;min-width:0;line-height:1.2}
.envio__quien b{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.envio__tel{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.envio__fila .campana__tag{font-size:.66rem;padding:2px 8px}
.envio__check{color:var(--muted);font-size:.78rem;letter-spacing:-.18em;padding-right:.18em;animation:leido .3s .45s forwards}
@keyframes filaEntra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes leido{to{color:var(--brand)}}
.envio__grupos .barra__valor{transition:none}
.campana .btn--chico{min-height:44px}
.envio__fin{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;min-height:44px}
.envio__resultado{margin:0;font-size:.95rem;color:var(--ink);font-weight:500}
.envio__resultado small{display:block;font-size:.76rem;font-weight:400;color:var(--muted)}
@media (max-width:420px){.envio__fila{grid-template-columns:30px minmax(0,1fr) auto}.envio__fila .campana__tag{display:none}}
@media (prefers-reduced-motion:reduce){.campana__cab .chip .dot{animation:none}.envio__check{color:var(--brand)}}

/* ===================================================================================================
   Testimonios en video: tarjetas 9:16 (también aceptan videos horizontales) o, si no hay, los marcos vacíos.
   =================================================================================================== */
.testis__vacio{display:grid;gap:14px;justify-items:center;text-align:center}
.testis__huecos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:660px}
.testi-hueco{aspect-ratio:9/16;border-radius:var(--r-lg);display:grid;place-items:center;color:var(--muted);
  border:1px dashed var(--line-strong);background:radial-gradient(80% 50% at 50% 0%,rgba(94,227,207,.07),transparent 70%),rgba(255,255,255,.02)}
.testi-hueco:nth-child(2){border-color:rgba(94,227,207,.35);color:var(--brand);box-shadow:0 0 50px -24px rgba(94,227,207,.6)}
.testi-hueco svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.testis__marcador{margin:6px 0 0}
.testis__nota{max-width:52ch;text-wrap:balance}
.testis__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.testi{padding:10px;display:grid;gap:12px;align-content:start}
.testi__marco{position:relative;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;background:#020404;border:1px solid var(--line)}
.testi__marco::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 45%,rgba(94,227,207,.12),transparent 70%)}
.testi__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.testi__texto{display:grid;gap:8px;padding:0 4px 4px}
.testi__frase{margin:0}
.testi__frase p{margin:0;color:var(--ink);font-size:.95rem;line-height:1.45}
.testi__quien{margin:0;display:grid;gap:2px;font-size:.82rem;color:var(--muted)}
.testi__quien b{color:var(--ink);font-weight:600}
@media (max-width:699px){
  .testis__lista{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:rgba(94,227,207,.35) transparent}
  .testi{flex:0 0 min(76%,290px);scroll-snap-align:start}
  .testis__lista > .testi:only-child{flex-basis:100%}
}

/* ===================================================================================================
   Precio y contacto
   =================================================================================================== */
.precio__puntos{margin-top:18px;gap:12px}
.precio__puntos li{font-size:.95rem;line-height:1.5}
.precio__puntos b{color:var(--ink);font-weight:600}
.precio__enlace{margin-top:16px}
.contacto-datos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px}
.contacto-dato{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--ink);text-decoration:none;font-size:.95rem;font-variant-numeric:tabular-nums;
  transition:color var(--t-hover) var(--ease)}
.contacto-dato svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contacto-dato:hover{color:var(--brand)}
.contacto-datos--pie .contacto-dato{font-size:.86rem;color:var(--muted)}
.contacto-datos--pie .contacto-dato:hover{color:var(--brand)}