/* ==========================================================================
   SWS Core · sws.css
   Estilos globales de Sabine Web Studio.
   Los widgets HTML de Elementor solo llevan HTML: todo el estilo vive aquí.

   Índice
   01. Tokens de marca
   02. Base y utilidades
   03. Componentes compartidos (etiquetas, títulos, botones, lista con checks)
   04. Hero
   05. Planes
   06. Por qué SWS
   07. CTA de contacto
   08. Formulario de contacto
   09. WhatsApp flotante
   10. Aparición suave y movimiento reducido
   11. Casos (página de portafolio)
   12. Testimonios
   13. Portafolio en inicio (bloque de entrada)
   14. Encabezado de páginas internas

   Convención: todo empieza con "sws-". Bloque__elemento--variante.
   ========================================================================== */


/* 01. Tokens de marca ------------------------------------------------------ */
:root{
  --sws-green:#22c55e;       /* verde estratégico */
  --sws-green-deep:#16a34a;  /* CTA / hover */
  --sws-green-ink:#166534;   /* texto verde sobre fondos claros */
  --sws-on-green:#06210f;    /* texto sobre botones verdes */
  --sws-mint:#e9fbf0;
  --sws-ice:#f3f8ff;
  --sws-base:#f9fafb;
  --sws-ink:#0f172a;         /* texto principal */
  --sws-muted:#475569;       /* texto secundario */
  --sws-subtle:#64748b;
  --sws-border:#e2e8f0;
  --sws-danger:#ef4444;

  --sws-font-title:"Poppins","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sws-font-body:"Inter","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --sws-radius:22px;
  --sws-shadow-sm:0 12px 30px rgba(2,6,23,.07);
  --sws-shadow-md:0 22px 55px rgba(2,6,23,.10);
}


/* 02. Base y utilidades ---------------------------------------------------- */

/* 100vw incluye la barra de desplazamiento: esto evita el scroll horizontal */
body{overflow-x:clip;}

.sws,
.sws *,
.sws *::before,
.sws *::after{box-sizing:border-box;}

.sws{
  font-family:var(--sws-font-body);
  color:var(--sws-ink);
  -webkit-font-smoothing:antialiased;
}

/* Sección a todo el ancho aunque el contenedor de Elementor sea "encajado".
   Si pones el contenedor en ancho completo y sin padding, puedes quitarla. */
.sws-bleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.sws-wrap{
  position:relative;
  z-index:1;
  width:min(1120px,92%);
  margin-inline:auto;
}
.sws-wrap--wide{width:min(1200px,92%);}
.sws-wrap--narrow{width:min(980px,92%);}

/* Borrador: oculto en la web publicada, visible (marcado) en el editor de Elementor.
   Cuando la sección esté lista, borra la clase "sws-draft" de su HTML. */
.sws-draft{display:none !important;}
.elementor-editor-active .sws-draft{
  display:block !important;
  position:relative;
  outline:3px dashed #f59e0b;
  outline-offset:-3px;
}
.elementor-editor-active .sws-draft::before{
  content:"BORRADOR · no se ve en la web publicada";
  position:absolute;
  top:14px;
  left:14px;
  z-index:5;
  padding:6px 10px;
  border-radius:8px;
  background:#f59e0b;
  color:#1f1300;
  font:700 12px/1.2 var(--sws-font-body);
}


/* 03. Componentes compartidos ---------------------------------------------- */

/* Etiqueta tipo píldora */
.sws-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.30);
  color:var(--sws-green-ink);
  font-family:var(--sws-font-body);
  font-size:12.5px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sws-kicker--plain{          /* hero: texto normal, sin mayúsculas */
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.sws-kicker--on-dark{        /* sobre fondo verde oscuro */
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.sws-kicker--neutral{        /* formulario */
  background:rgba(255,255,255,.72);
  border-color:var(--sws-border);
  color:var(--sws-muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.sws-dot{
  display:inline-block;
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--sws-green);
  box-shadow:0 0 0 5px rgba(34,197,94,.14);
}

/* Encabezado de sección */
.sws-head{
  max-width:880px;
  margin:0 auto;
  text-align:center;
}
.sws-h2{
  margin:16px 0 0;
  font-family:var(--sws-font-title);
  font-size:clamp(30px,3.2vw,46px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  color:inherit;
}
.sws-lead{
  max-width:760px;
  margin:14px auto 0;
  font-size:16.5px;
  line-height:1.75;
  color:var(--sws-muted);
}
.sws-note{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.5;
  text-align:center;
  color:rgba(71,85,105,.85);
}

/* Lista con checks */
.sws-checks{
  display:grid;
  gap:10px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
  font-size:14.5px;
  line-height:1.5;
  color:var(--sws-muted);
}
.sws-checks li{display:flex;align-items:flex-start;gap:10px;margin:0;}
.sws-checks li::before{
  content:"✓";
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-top:2px;
  border-radius:999px;
  background:rgba(34,197,94,.15);
  color:#15803d;
  font-size:12px;
  font-weight:900;
}

/* Fila de botones */
.sws-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:28px;
}

/* Botones (van con .sws delante para ganarle a los estilos del tema) */
.sws .sws-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  border:1px solid transparent;
  border-radius:14px;
  font-family:var(--sws-font-body);
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  white-space:normal;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.sws .sws-btn:hover{transform:translateY(-2px);text-decoration:none;}
.sws .sws-btn:focus-visible{outline:3px solid rgba(34,197,94,.45);outline-offset:3px;}

.sws .sws-btn--primary{
  background:linear-gradient(180deg,var(--sws-green),var(--sws-green-deep));
  color:var(--sws-on-green);
  box-shadow:0 16px 36px rgba(34,197,94,.24);
}
.sws .sws-btn--primary:hover,
.sws .sws-btn--primary:focus{
  background:linear-gradient(180deg,var(--sws-green),var(--sws-green-deep));
  color:var(--sws-on-green);
}
.sws .sws-btn--primary:hover{box-shadow:0 20px 46px rgba(34,197,94,.30);}

.sws .sws-btn--ghost{
  background:#fff;
  border-color:var(--sws-border);
  color:var(--sws-ink);
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}
.sws .sws-btn--ghost:hover,
.sws .sws-btn--ghost:focus{
  background:#f8fafc;
  border-color:rgba(15,23,42,.14);
  color:var(--sws-ink);
}

.sws .sws-btn--block{display:flex;width:100%;}
.sws .sws-btn[disabled]{opacity:.7;cursor:not-allowed;transform:none;}

@media (max-width:520px){
  .sws .sws-actions .sws-btn{width:100%;}
}


/* 04. Hero ----------------------------------------------------------------- */
.sws-hero{
  padding:120px 20px;
  background:linear-gradient(180deg,var(--sws-mint) 0%,#fff 100%);
}
.sws-hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.sws-hero__title{
  margin:20px 0 0;
  font-family:var(--sws-font-title);
  font-size:clamp(32px,4vw,54px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--sws-ink);
}
.sws-hero__title span{color:var(--sws-green-deep);}
.sws-hero__subtitle{
  max-width:520px;
  margin:20px 0 0;
  font-size:18px;
  line-height:1.7;
  color:var(--sws-muted);
}
.sws-hero .sws-actions{justify-content:flex-start;gap:16px;margin-top:30px;}
.sws-hero__media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,.08);
}

@media (max-width:900px){
  .sws-hero__grid{grid-template-columns:1fr;gap:48px;text-align:center;}
  .sws-hero__subtitle{margin-inline:auto;}
  .sws-hero .sws-actions{justify-content:center;}
}
@media (max-width:640px){
  .sws-hero{padding:72px 18px;}   /* el CTA aparece antes en el celular */
}


/* 05. Planes --------------------------------------------------------------- */
.sws-plans{
  padding:120px 20px;
  color:#fff;
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(34,197,94,.45), transparent 60%),
    radial-gradient(800px 400px at 85% 20%, rgba(22,163,74,.35), transparent 60%),
    linear-gradient(180deg,#16a34a 0%,#0f3d25 100%);
}
.sws-plans .sws-lead{color:rgba(255,255,255,.9);}

.sws-plans__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
  margin-top:60px;
}

.sws-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:var(--sws-radius);
  background:#fff;
  color:var(--sws-ink);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sws-plan:hover{
  transform:translateY(-8px);
  border-color:rgba(34,197,94,.35);
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}
.sws-plan--featured{box-shadow:0 20px 60px rgba(0,0,0,.25),0 0 0 2px rgba(34,197,94,.28);}
.sws-plan--featured:hover{box-shadow:0 28px 80px rgba(0,0,0,.35),0 0 0 2px rgba(34,197,94,.42);}

.sws-plan__badge{
  position:absolute;
  top:-25px;
  left:18px;
  right:18px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(34,197,94,.92);
  color:var(--sws-on-green);
  box-shadow:0 14px 26px rgba(0,0,0,.22);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sws-plan__name{
  margin:0;
  font-family:var(--sws-font-title);
  font-size:18px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--sws-ink);
}
.sws-plan__desc{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--sws-muted);
}
.sws-plan__price{
  margin:20px 0 0;
  font-family:var(--sws-font-title);
  font-size:30px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--sws-ink);
}
.sws-plan__price small{
  display:inline-block;   /* si no cabe, baja completo a la siguiente línea */
  white-space:nowrap;
  margin-left:6px;
  font-family:var(--sws-font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  color:var(--sws-subtle);
}
.sws-plan__divider{height:1px;margin:18px 0;background:var(--sws-border);}

.sws-plan__list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px;
  color:var(--sws-muted);
}
.sws-plan__list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
}
.sws-plan__list li::before{
  content:"✓";
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-top:2px;
  border-radius:999px;
  background:rgba(34,197,94,.15);
  color:#15803d;
  font-size:12px;
  font-weight:900;
}
.sws-plan__list li.sws-plan__includes{font-weight:700;color:var(--sws-ink);}
.sws-plan__list li.sws-plan__includes::before{content:"+";}

.sws-plan__cta{margin-top:auto;padding-top:22px;}
.sws-plan__note{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.4;
  text-align:center;
  color:var(--sws-subtle);
}

.sws-plans__foot{
  margin:32px 0 0;
  font-size:13.5px;
  line-height:1.6;
  text-align:center;
  color:rgba(255,255,255,.85);
}
.sws .sws-plans__foot a{
  border-bottom:1px dashed rgba(209,250,229,.6);
  color:#d1fae5;
  font-weight:900;
  text-decoration:none;
}
.sws .sws-plans__foot a:hover{border-bottom-color:rgba(255,255,255,.85);color:#fff;}

@media (max-width:980px){
  .sws-plans__grid{grid-template-columns:repeat(2,1fr);}
  .sws-plan--featured{margin-top:18px;}
}
@media (max-width:640px){
  .sws-plans{padding:90px 16px;}
  .sws-plans__grid{grid-template-columns:1fr;}
}


/* 06. Por qué SWS ---------------------------------------------------------- */
.sws-why{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:120px 20px 95px;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(34,197,94,.16), transparent 65%),
    radial-gradient(900px 420px at 90% 35%, rgba(243,248,255,.95), transparent 60%),
    linear-gradient(180deg,var(--sws-base) 0%,#fff 100%);
}

.sws-why__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:32px;
}
.sws-why__card,
.sws-why__stat{
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--sws-shadow-sm);
}
.sws-why__card{
  position:relative;
  overflow:hidden;
  padding:18px 16px;
  text-align:center;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.sws-why__card::after{
  content:"";
  position:absolute;
  inset:-2px;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(420px 140px at 25% 0%, rgba(34,197,94,.18), transparent 65%);
  transition:opacity .16s ease;
}
.sws-why__card:hover{
  transform:translateY(-2px);
  border-color:rgba(34,197,94,.28);
  background:rgba(255,255,255,.88);
  box-shadow:var(--sws-shadow-md);
}
.sws-why__card:hover::after{opacity:1;}

.sws-why__icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin:0 auto 10px;
  border:1px solid rgba(34,197,94,.28);
  border-radius:16px;
  background:rgba(34,197,94,.14);
  color:var(--sws-green-ink);
}
.sws-why__icon svg{width:20px;height:20px;}
.sws-why__card h3{
  margin:0;
  font-family:var(--sws-font-title);
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--sws-ink);
}
.sws-why__card p{
  margin:8px 0 0;
  font-size:13.8px;
  line-height:1.65;
  color:var(--sws-muted);
}

.sws-why__outcome{
  max-width:980px;
  margin:18px auto 0;
  padding:18px 16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--sws-radius);
  background:linear-gradient(180deg,rgba(233,251,240,.70),rgba(255,255,255,.75));
  box-shadow:var(--sws-shadow-sm);
  text-align:center;
}
.sws-why__outcome-title{
  margin:0;
  font-family:var(--sws-font-title);
  font-size:20px;
  font-weight:800;
  color:var(--sws-ink);
}
.sws-why__outcome-text{
  max-width:820px;
  margin:4px auto 0;
  font-size:15px;
  line-height:1.6;
  color:var(--sws-muted);
}

.sws-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:12px;
}
.sws-chip{
  padding:8px 10px;
  border:1px solid rgba(34,197,94,.22);
  border-radius:999px;
  background:rgba(34,197,94,.08);
  color:var(--sws-green-ink);
  font-size:13px;
  font-weight:700;
}

.sws-why__stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  max-width:980px;
  margin:16px auto 0;
}
.sws-why__stat{padding:18px 14px;text-align:center;}
.sws-why__num{
  margin:0;
  font-family:var(--sws-font-title);
  font-size:34px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--sws-ink);
}
.sws-why__label{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--sws-muted);
}
.sws-why .sws-actions{gap:10px;margin-top:18px;}

@media (max-width:980px){
  .sws-why__grid,
  .sws-why__stats{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .sws-why{padding:88px 18px 72px;}
}


/* 07. CTA de contacto ------------------------------------------------------ */
.sws-cta{
  position:relative;
  overflow:hidden;
  padding:110px 20px;
  text-align:center;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(700px 360px at 85% 35%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg,rgba(243,248,255,.55),rgba(233,251,240,.85)),
    var(--sws-mint);
}
.sws-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity:.55;
  pointer-events:none;
  background:radial-gradient(600px 240px at 50% 0%, rgba(255,255,255,.55), transparent 60%);
}
.sws-cta__card{
  position:relative;
  z-index:1;
  width:min(900px,100%);
  margin:0 auto;
  padding:clamp(22px,3.2vw,34px);
  border:1px solid rgba(226,232,240,.9);
  border-radius:var(--sws-radius);
  background:rgba(249,250,251,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(2,6,23,.10),0 10px 24px rgba(2,6,23,.06);
}
.sws-cta__trust{
  margin:18px 0 0;
  font-size:13px;
  color:var(--sws-subtle);
}

@media (max-width:768px){
  .sws-cta{padding:80px 18px;}
}


/* 08. Formulario de contacto ----------------------------------------------- */
.sws-contact{
  width:min(1120px,calc(100% - 40px));
  margin:70px auto;
}
.sws-contact__card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.95);
  border-radius:var(--sws-radius);
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(700px 420px at 85% 25%, rgba(22,163,74,.10), transparent 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(243,248,255,.85), transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  box-shadow:0 24px 70px rgba(2,6,23,.10);
}
.sws-contact__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:22px;
  align-items:stretch;
}
.sws-contact__intro{padding:42px 38px 34px;}
.sws-contact__title{
  margin:16px 0 10px;
  font-family:var(--sws-font-title);
  font-size:clamp(28px,3.2vw,38px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--sws-ink);
}
.sws-contact__sub{
  max-width:60ch;
  margin:0 0 18px;
  font-size:15.5px;
  line-height:1.55;
  color:var(--sws-muted);
}
.sws-contact__minis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.sws-contact__mini{
  padding:14px 14px 12px;
  border:1px solid var(--sws-border);
  border-radius:18px;
  background:rgba(255,255,255,.66);
}
.sws-contact__mini b{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:800;
}
.sws-contact__mini span{
  font-size:13px;
  line-height:1.35;
  color:var(--sws-muted);
}
.sws-contact__formbox{
  padding:26px;
  border-left:1px solid var(--sws-border);
  background:linear-gradient(180deg,rgba(249,250,251,.95),rgba(255,255,255,.70));
}

/* Campos */
.sws-form{display:flex;flex-direction:column;gap:12px;}
.sws-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sws-form__field{display:flex;flex-direction:column;gap:7px;}
.sws-form__label{font-size:13px;font-weight:700;color:var(--sws-muted);}
.sws-form__help{margin:0;font-size:12.5px;line-height:1.4;color:var(--sws-muted);}

.sws .sws-form__control{
  width:100%;
  margin:0;
  padding:13px 14px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:16px;
  background-color:rgba(255,255,255,.88);
  box-shadow:0 10px 30px rgba(2,6,23,.05);
  font-family:var(--sws-font-body);
  font-size:14.5px;
  color:var(--sws-ink);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.sws .sws-form__control::placeholder{color:rgba(71,85,105,.70);}
.sws .sws-form__control:focus{
  border-color:rgba(34,197,94,.60);
  box-shadow:0 0 0 5px rgba(34,197,94,.14),0 16px 45px rgba(2,6,23,.10);
}
.sws .sws-form__control:focus-visible{outline:3px solid rgba(34,197,94,.22);outline-offset:2px;}
.sws textarea.sws-form__control{min-height:120px;resize:vertical;}
.sws .is-touched .sws-form__control:invalid{
  border-color:rgba(239,68,68,.55);
  box-shadow:0 0 0 5px rgba(239,68,68,.12);
}

/* Selects con la misma altura y flecha en todos los navegadores */
.sws select.sws-form__control{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  height:48px;
  padding:0 44px 0 14px;
  line-height:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
}
.sws select.sws-form__control::-ms-expand{display:none;}

/* WhatsApp: país + número */
.sws-form__phone{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:10px;
  align-items:center;
}
.sws select.sws-form__country{padding-right:40px;}

/* Chips de referencias */
.sws-form__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-height:96px;
  margin-top:6px;
  padding-right:4px;
  overflow:auto;
}
.sws-form__chips:empty{display:none;}
.sws-form__chip{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  height:34px;
  padding:0 10px;
  border:1px solid var(--sws-border);
  border-radius:999px;
  background:rgba(233,251,240,.60);
  font-size:12.5px;
  color:var(--sws-ink);
}
.sws-form__chip span{
  min-width:0;
  max-width:520px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sws .sws-form__chip button{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:4px;
  padding:0;
  border:1px solid rgba(226,232,240,.9);
  border-radius:999px;
  background:rgba(255,255,255,.75);
  color:rgba(15,23,42,.55);
  font-size:12px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.sws .sws-form__chip button:hover{
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
  color:var(--sws-danger);
}

.sws-form__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:-2px;
}
.sws-form__counter{font-size:12.5px;color:rgba(71,85,105,.90);}
.sws-form__counter b{color:var(--sws-ink);}

.sws-form__status{
  display:none;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--sws-border);
  border-radius:16px;
  background:rgba(255,255,255,.7);
  font-size:13.5px;
}
.sws-form__status.is-ok{display:block;border-color:rgba(34,197,94,.35);background:rgba(233,251,240,.85);}
.sws-form__status.is-err{display:block;border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08);}

.sws-form__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}
.sws-form__spinner{
  display:none;
  width:16px;
  height:16px;
  border:2px solid rgba(6,33,15,.25);
  border-top-color:var(--sws-on-green);
  border-radius:999px;
  animation:sws-spin .7s linear infinite;
}
.sws .sws-btn[aria-busy="true"] .sws-form__spinner{display:inline-block;}
@keyframes sws-spin{to{transform:rotate(360deg);}}

.sws-form__privacy{margin:0;font-size:12.5px;color:var(--sws-muted);}
.sws .sws-form__privacy a{color:var(--sws-green-deep);font-weight:800;text-decoration:none;}
.sws .sws-form__privacy a:hover{text-decoration:underline;}

/* Campo trampa para bots (no lo ven las personas) */
.sws-form__hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width:920px){
  .sws-contact__grid{grid-template-columns:1fr;}
  .sws-contact__formbox{border-left:none;border-top:1px solid var(--sws-border);}
}
@media (max-width:520px){
  .sws-contact{width:calc(100% - 24px);margin:40px auto;}
  .sws-contact__intro{padding:30px 22px 24px;}
  .sws-contact__formbox{padding:20px;}
  .sws-contact__minis,
  .sws-form__row,
  .sws-form__phone{grid-template-columns:1fr;}
  .sws-form__chip span{max-width:260px;}
}


/* 09. WhatsApp flotante (lo imprime sws-core.php en todas las páginas) ---- */
.sws.sws-wa-float{
  position:fixed;
  z-index:9999;
  right:calc(18px + env(safe-area-inset-right, 0px));
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px 12px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--sws-green),var(--sws-green-deep));
  color:var(--sws-on-green);
  font-family:var(--sws-font-body);
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(22,163,74,.35),0 4px 12px rgba(2,6,23,.12);
  transition:transform .16s ease, box-shadow .16s ease;
}
.sws.sws-wa-float:hover,
.sws.sws-wa-float:focus{color:var(--sws-on-green);text-decoration:none;}
.sws.sws-wa-float:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(22,163,74,.42),0 6px 14px rgba(2,6,23,.14);
}
.sws.sws-wa-float:focus-visible{outline:3px solid rgba(34,197,94,.45);outline-offset:3px;}
.sws-wa-float svg{flex:0 0 auto;width:22px;height:22px;}
.sws-wa-float__short{display:none;}

@media (max-width:640px){
  .sws.sws-wa-float{padding:12px 16px 12px 13px;font-size:14px;}
  .sws-wa-float__long{display:none;}
  .sws-wa-float__short{display:inline;}
}


/* 10. Aparición suave y movimiento reducido -------------------------------- */
/* sws.js agrega .is-pending solo si el JS corre: sin JS, todo se ve. */
.sws-reveal{transition:opacity .55s ease, transform .55s ease;}
.sws-reveal.is-pending{opacity:0;transform:translateY(10px);transition:none;}

@media (prefers-reduced-motion:reduce){
  .sws *,
  .sws.sws-wa-float{animation:none !important;transition:none !important;}
  .sws .sws-btn:hover,
  .sws-plan:hover,
  .sws-why__card:hover,
  .sws.sws-wa-float:hover{transform:none;}
}


/* 11. Casos (página de portafolio) ----------------------------------------- */
.sws-cases{
  padding:110px 20px;
  background:linear-gradient(180deg,#fff 0%,var(--sws-base) 100%);
}
.sws-cases__list{display:grid;gap:28px;margin-top:48px;}
.sws-cases--page{padding-top:24px;}            /* debajo del encabezado de página */
.sws-cases--page .sws-cases__list{margin-top:0;}

.sws-case{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:48px;
  padding:24px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--sws-shadow-md);
}
.sws-case--reverse .sws-case__media{order:2;}

/* Fondo con los colores de cada cliente: se definen en el style="" del caso */
.sws-case__media{
  position:relative;
  padding:32px 60px 40px 32px;
  border-radius:20px;
  background:
    radial-gradient(380px 240px at 92% 0%, var(--case-glow,rgba(34,197,94,.35)), transparent 70%),
    linear-gradient(150deg,var(--case-a,#16a34a),var(--case-b,#0f3d25));
}

.sws-browser{
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  box-shadow:0 30px 60px rgba(2,6,23,.30);
}
.sws-browser__bar{
  display:flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 12px;
  border-bottom:1px solid var(--sws-border);
  background:#f1f5f9;
}
.sws-browser__bar i{width:9px;height:9px;border-radius:999px;background:#cbd5e1;}
.sws-browser__url{
  flex:0 1 240px;
  min-width:0;
  height:20px;
  margin-left:10px;
  padding:0 10px;
  overflow:hidden;
  border-radius:999px;
  background:#fff;
  font-size:11.5px;
  line-height:20px;
  color:var(--sws-subtle);
  white-space:nowrap;
  text-overflow:ellipsis;
}
.sws-browser img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top;
}

.sws-phone{
  position:absolute;
  right:18px;
  bottom:18px;
  width:24%;
  padding:5px;
  border-radius:22px;
  background:var(--sws-ink);
  box-shadow:0 24px 48px rgba(2,6,23,.40);
}
.sws-phone img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9/19.5;
  object-fit:cover;
  object-position:top;
  border-radius:17px;
}

.sws-case__body{padding:8px 16px 8px 0;}
.sws-case--reverse .sws-case__body{padding:8px 0 8px 16px;}
.sws-case__title{
  margin:14px 0 0;
  font-family:var(--sws-font-title);
  font-size:clamp(26px,2.6vw,34px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--sws-ink);
}
.sws-case__lead{
  margin:8px 0 0;
  font-size:16.5px;
  font-weight:700;
  line-height:1.5;
  color:var(--sws-green-ink);
}
.sws-case__text{
  margin:12px 0 0;
  font-size:15.5px;
  line-height:1.7;
  color:var(--sws-muted);
}
.sws-case .sws-chips{justify-content:flex-start;margin-top:18px;}
.sws-case .sws-actions{justify-content:flex-start;margin-top:24px;}

@media (max-width:900px){
  .sws-case{grid-template-columns:1fr;gap:28px;padding:16px;}
  .sws-case--reverse .sws-case__media{order:0;}
  .sws-case__body,
  .sws-case--reverse .sws-case__body{padding:0 8px 12px;}
}
@media (max-width:520px){
  .sws-cases{padding:88px 18px;}
  .sws-case__media{padding:18px 40px 26px 18px;}
  .sws-phone{right:10px;bottom:10px;width:28%;padding:4px;border-radius:16px;}
  .sws-phone img{border-radius:12px;}
}


/* 12. Testimonios ---------------------------------------------------------- */
.sws-testimonials{
  padding:100px 20px;
  background:linear-gradient(180deg,var(--sws-base) 0%,#fff 100%);
}
.sws-testimonials__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin-top:40px;
}
.sws-quote{
  flex:1 1 320px;
  max-width:720px;
  display:flex;
  flex-direction:column;
  margin:0;
  padding:30px 30px 24px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--sws-radius);
  background:#fff;
  box-shadow:var(--sws-shadow-sm);
}
.sws .sws-quote__text{
  flex:1;
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-style:normal;
  quotes:none;
}
.sws .sws-quote__text::before{
  content:"\201C";
  display:block;
  height:34px;
  font-family:var(--sws-font-title);
  font-size:64px;
  font-weight:800;
  line-height:1;
  color:var(--sws-green);
}
.sws .sws-quote__text p{
  margin:0;
  font-size:17px;
  line-height:1.7;
  color:var(--sws-ink);
}
.sws-quote__author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--sws-border);
}
.sws-quote__avatar{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  overflow:hidden;
  border-radius:999px;
  background:var(--sws-mint);
  color:var(--sws-green-ink);
  font-size:15px;
  font-weight:800;
}
.sws-quote__avatar img{display:block;width:100%;height:100%;object-fit:cover;}
.sws-quote__name{display:block;font-size:15px;font-weight:800;color:var(--sws-ink);}
.sws-quote__role{display:block;margin-top:2px;font-size:13.5px;color:var(--sws-muted);}

@media (max-width:520px){
  .sws-testimonials{padding:80px 18px;}
  .sws-quote{padding:24px 22px 20px;}
}


/* 13. Portafolio en inicio (bloque de entrada) ----------------------------- */
.sws-teaser{
  padding:100px 20px;
  background:linear-gradient(180deg,#fff 0%,var(--sws-base) 100%);
}
.sws-teaser__card{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding:48px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  background:
    radial-gradient(520px 300px at 100% 0%, rgba(34,197,94,.14), transparent 70%),
    #fff;
  box-shadow:var(--sws-shadow-md);
}
.sws-teaser .sws-lead{max-width:520px;margin:14px 0 0;}
.sws-teaser .sws-chips{justify-content:flex-start;margin-top:18px;}
.sws-teaser .sws-actions{justify-content:flex-start;}

/* Ilustración: dos ventanas de navegador (sin datos de clientes) */
.sws-teaser__art{position:relative;height:300px;}
.sws-teaser__win{
  position:absolute;
  width:80%;
  height:80%;
  overflow:hidden;
  border:1px solid var(--sws-border);
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 50px rgba(2,6,23,.14);
}
.sws-teaser__win--back{top:0;right:0;}
.sws-teaser__win--front{bottom:0;left:0;}
.sws-teaser__hero{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  height:46%;
  padding:0 18px;
  background:linear-gradient(135deg,var(--sws-green),var(--sws-green-deep));
}
.sws-teaser__win--back .sws-teaser__hero{background:linear-gradient(135deg,#16a34a,#0f3d25);}
.sws-teaser__hero i{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.9);}
.sws-teaser__hero i:nth-child(1){width:62%;}
.sws-teaser__hero i:nth-child(2){width:44%;background:rgba(255,255,255,.6);}
.sws-teaser__hero b{display:block;width:26%;height:16px;margin-top:4px;border-radius:6px;background:var(--sws-mint);}
.sws-teaser__row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;}
.sws-teaser__row span{height:52px;border-radius:8px;background:var(--sws-base);border:1px solid var(--sws-border);}

@media (max-width:900px){
  .sws-teaser__card{grid-template-columns:1fr;gap:32px;padding:32px 24px;}
  .sws-teaser__art{height:240px;}
}
@media (max-width:520px){
  .sws-teaser{padding:80px 18px;}
  .sws-teaser__card{padding:28px 20px;}
  .sws-teaser__art{height:190px;}
}


/* 14. Encabezado de páginas internas --------------------------------------- */
.sws-page-head{
  padding:96px 20px 56px;
  text-align:center;
  background:linear-gradient(180deg,var(--sws-mint) 0%,#fff 100%);
}
.sws-page-head__title{
  margin:16px 0 0;
  font-family:var(--sws-font-title);
  font-size:clamp(34px,4.2vw,54px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--sws-ink);
}

@media (max-width:520px){
  .sws-page-head{padding:72px 18px 40px;}
}