/* =========================================================
   I'm en línea — imenlinea.com
   Rediseño estilo macweb.digital
   Look: fondo claro, navy + teal, degradado índigo→teal,
   Plus Jakarta Sans, tarjetas modernas, mockups.
   ========================================================= */

:root{
  /* Superficies */
  --bg:        #FFFFFF;
  --bg-alt:    #F4F8FC;   /* secciones alternas */
  --navy:      #0B1526;   /* bandas oscuras / footer */
  --navy-2:    #12203A;
  --card:      #FFFFFF;

  /* Texto */
  --ink:       #0E1A2B;   /* títulos */
  --ink-2:     #47566B;   /* cuerpo */
  --ink-soft:  #7A879B;   /* secundario */
  --on-dark:   #E9F0F8;
  --on-dark-2: #9DB0C7;

  /* Marca */
  --teal:      #0FBEB8;   /* acento principal */
  --teal-d:    #0A9E99;
  --indigo:    #3B4FE0;   /* inicio del degradado */
  --indigo-d:  #2C3BC0;
  --grad:      linear-gradient(120deg, #3B4FE0 0%, #17B7C7 55%, #0FD1C4 100%);
  --grad-soft: linear-gradient(120deg, rgba(59,79,224,.12), rgba(15,190,184,.12));

  /* Líneas / sombras */
  --line:      #E3EAF3;
  --line-2:    #D5DFEC;
  --shadow-sm: 0 6px 18px -10px rgba(14,26,43,.25);
  --shadow:    0 20px 44px -22px rgba(14,26,43,.30);
  --shadow-lg: 0 34px 70px -28px rgba(20,32,58,.45);

  /* Tipografía */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 100px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--ink-2);
  background:var(--bg); line-height:1.65; font-size:clamp(16px,1.05vw,17px);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; color:var(--ink); line-height:1.12; font-weight:800; letter-spacing:-.02em; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }

.skip-link{ position:absolute; left:12px; top:-48px; z-index:100; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px; transition:top .2s; }
.skip-link:focus{ top:12px; }
:where(a,button,input,textarea,[tabindex]):focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:8px; }

/* ---------- Utilidades tipográficas ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-d);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--teal); border-radius:2px; }
.eyebrow.center{ justify-content:center; }
.section-head{ max-width:760px; margin-inline:auto; text-align:center; }
.section-title{ font-size:clamp(1.9rem,4.2vw,3rem); margin:.9rem 0 .6rem; }
.section-lead{ color:var(--ink-2); font-size:1.06rem; max-width:60ch; margin-inline:auto; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size:.95rem; padding:.85em 1.6em; border-radius:var(--r-pill);
  border:1.5px solid transparent; transition:transform .18s var(--ease), box-shadow .2s, background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background-image:var(--grad); color:#fff; box-shadow:0 12px 24px -12px rgba(23,120,180,.7); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -12px rgba(23,120,180,.75); }
.btn-solid{ background:var(--teal); color:#04201f; }
.btn-solid:hover{ background:var(--teal-d); color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-d); }
.btn-wa{ background:#25D366; color:#04240f; }
.btn-wa:hover{ background:#1eb455; color:#fff; transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-block{ width:100%; }

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:1.4rem; min-height:72px; }
.logo{ font-size:1.32rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-right:auto; display:inline-flex; white-space:nowrap; flex:none; }
.logo__mark{ font-style:italic; margin-right:.16em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.main-nav{ display:flex; gap:1.25rem; }
.main-nav a{ color:var(--ink-2); font-weight:600; font-size:.9rem; white-space:nowrap; position:relative; padding:.3em 0; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--teal); transition:width .22s var(--ease); }
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:.6rem; }
.header-cta{ padding:.6em 1.2em; font-size:.9rem; }
.lang-toggle{ display:flex; align-items:center; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; gap:2px; flex:none; }
.lang-toggle button{ border:none; background:transparent; font:inherit; font-size:.76rem; font-weight:800; letter-spacing:.02em; padding:.4em .75em; border-radius:var(--r-pill); color:var(--ink-soft); cursor:pointer; transition:background .2s var(--ease), color .2s; }
.lang-toggle button.is-active{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.lang-toggle button:hover:not(.is-active){ color:var(--ink); }
.nav-toggle{ display:none; background:none; border:0; width:44px; height:44px; padding:10px; }
.nav-toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; margin:4px 0; transition:.25s var(--ease); }

/* ================= HERO ================= */
.hero{ position:relative; overflow:hidden; padding:clamp(2.6rem,6vw,5rem) 0 clamp(3rem,7vw,5.5rem); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 55% at 85% 8%, rgba(15,209,196,.16), transparent 60%),
    radial-gradient(50% 50% at 8% 20%, rgba(59,79,224,.14), transparent 60%);
}
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.55em; font-size:.8rem; font-weight:600;
  color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.4em 1em; box-shadow:var(--shadow-sm); margin-bottom:1.4rem;
}
.hero-badge b{ color:var(--teal-d); }
.hero h1{ font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.04; }
.hero-sub{ font-size:1.15rem; color:var(--ink-2); max-width:48ch; margin:1.3rem 0 0; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin:2rem 0 1.4rem; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:1.4rem; color:var(--ink-soft); font-size:.9rem; font-weight:600; }
.hero-trust span{ display:inline-flex; align-items:center; gap:.45em; }
.hero-trust svg{ width:18px; height:18px; color:var(--teal); }

/* ---------- Hero: variante oscura ---------- */
.hero--dark{
  background:var(--navy);
  background-image:
    radial-gradient(70% 60% at 88% -6%, rgba(15,209,196,.30), transparent 60%),
    radial-gradient(55% 55% at 4% 10%, rgba(59,79,224,.40), transparent 65%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #182B4D 100%);
  padding-bottom:clamp(7.5rem,15vw,10.5rem);
}
.hero--dark::before{ content:none; }
.hero-orb{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; }
.hero-orb--1{ width:340px; height:340px; top:-120px; right:6%; background:radial-gradient(circle,rgba(15,209,196,.35),transparent 70%); }
.hero-orb--2{ width:260px; height:260px; bottom:0; left:-4%; background:radial-gradient(circle,rgba(59,79,224,.35),transparent 70%); }
.hero--dark .hero-inner{ position:relative; z-index:1; }
.hero--dark .hero-badge{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:var(--on-dark); backdrop-filter:blur(6px); }
.hero--dark .hero-badge b{ color:var(--teal); }
.hero--dark h1{ color:#fff; }
.hero--dark .hero-sub{ color:var(--on-dark-2); }
.hero--dark .hero-trust{ color:var(--on-dark-2); }
.hero--dark .btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); }
.hero--dark .btn-ghost:hover{ border-color:var(--teal); color:var(--teal); background:rgba(255,255,255,.1); }
.hero--dark .mock-browser{ box-shadow:0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.hero--dark .hero-chip{ box-shadow:0 22px 44px -18px rgba(0,0,0,.5); }

.hero-shape{ position:absolute; pointer-events:none; z-index:0; }
.hero-shape--ring{
  width:120px; height:120px; border-radius:50%; top:-9%; right:8%;
  border:2px dashed rgba(255,255,255,.22); animation:spin 26s linear infinite;
}
.hero-shape--dots{
  width:64px; height:64px; bottom:-4%; left:-2%;
  background-image:radial-gradient(rgba(15,209,196,.55) 1.6px, transparent 1.6px);
  background-size:12px 12px; opacity:.7;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Hero: tarjetas superpuestas ---------- */
.hero-cards-wrap{ position:relative; z-index:5; margin-top:clamp(-6rem,-11vw,-4.5rem); margin-bottom:clamp(1rem,3vw,1.5rem); }
.hero-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.hero-card{
  display:flex; align-items:center; gap:.9rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.2rem 1.3rem; box-shadow:var(--shadow-lg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-card:hover{ transform:translateY(-4px); box-shadow:0 34px 70px -24px rgba(20,32,58,.35); }
.hero-card__icon{
  flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-soft); color:var(--teal-d);
}
.hero-card__icon svg{ width:22px; height:22px; }
.hero-card h3{ font-size:1rem; margin:0; }

/* ---------- Hero mockup ---------- */
.hero-visual{ position:relative; }
.mock-browser{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.mock-bar{ display:flex; align-items:center; gap:.7rem; padding:.75rem .95rem; background:#F1F5FA; border-bottom:1px solid var(--line); }
.mock-dots{ display:inline-flex; gap:6px; }
.mock-dots i{ width:10px; height:10px; border-radius:50%; background:#D5DFEC; }
.mock-dots i:nth-child(1){ background:#FF8079; }
.mock-dots i:nth-child(2){ background:#FFC24B; }
.mock-dots i:nth-child(3){ background:#3ED0A6; }
.mock-url{ flex:1; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:.3rem .8rem; font-size:.76rem; color:var(--ink-soft); display:flex; align-items:center; gap:.4rem; }
.mock-url i{ width:8px; height:8px; border-radius:2px; background:var(--teal); }
.mock-screen{ padding:0; }
.mock-hero{ padding:1.6rem 1.4rem; background:var(--grad); color:#fff; }
.mock-hero .mh-eyebrow{ width:32%; height:8px; background:rgba(255,255,255,.5); border-radius:4px; }
.mock-hero .mh-title{ height:16px; background:rgba(255,255,255,.92); border-radius:5px; margin:.7rem 0 .5rem; width:82%; }
.mock-hero .mh-title.short{ width:55%; }
.mock-hero .mh-btn{ width:110px; height:26px; border-radius:var(--r-pill); background:#fff; margin-top:1rem; }
.mock-body{ padding:1.3rem 1.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.mock-card{ height:64px; border-radius:12px; background:#F1F5FA; border:1px solid var(--line); }
.mock-card:nth-child(2){ background:var(--grad-soft); }
.hero-chip{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:.7rem .95rem; display:flex; align-items:center; gap:.6rem;
  font-weight:700; color:var(--ink); font-size:.85rem;
}
.hero-chip svg{ width:26px; height:26px; padding:5px; border-radius:8px; background:var(--grad-soft); color:var(--teal-d); }
.hero-chip--tl{ top:6%; left:-6%; animation:floaty 6s ease-in-out infinite; }
.hero-chip--br{ bottom:8%; right:-5%; animation:floaty 8s ease-in-out infinite .6s; }
.hero-chip small{ display:block; font-weight:500; color:var(--ink-soft); font-size:.72rem; }

/* ================= LOGOS / STRIP ================= */
.strip{ border-block:1px solid var(--line); background:var(--bg-alt); }
.strip-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.4rem; padding:1.3rem 0 1.1rem; }
.strip-inner span{ color:var(--ink-soft); font-weight:600; font-size:.86rem; }
.strip-inner b{ color:var(--ink); }
.strip-integraciones{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.9rem 1.9rem; padding:1.05rem 0 1.3rem;
  border-top:1px solid var(--line);
}
.si-label{
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-d);
}
.si-item{
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--ink); font-weight:600; font-size:.88rem;
}
.si-item svg{ width:19px; height:19px; flex:none; }

/* ================= SERVICIOS / PAQUETES ================= */
.servicios{ padding:clamp(3.4rem,7vw,6rem) 0; }
.servicios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; align-items:stretch; }
.servicio{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:2rem 1.7rem; display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.servicio:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2); }
.servicio--featured{ border-color:transparent; background:var(--navy); color:var(--on-dark); box-shadow:var(--shadow); }
.servicio--featured::before{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1.5px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.servicio--featured h3{ color:#fff; }
.servicio__badge{ position:absolute; top:-13px; left:1.7rem; background:var(--grad); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.4em 1em; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); }
.servicio__icon{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--grad-soft); color:var(--teal-d); margin-bottom:1.1rem; }
.servicio--featured .servicio__icon{ background:rgba(255,255,255,.1); color:var(--teal); }
.servicio__icon svg{ width:26px; height:26px; }
.servicio__num{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-d); }
.servicio--featured .servicio__num{ color:var(--teal); }
.servicio h3{ font-size:1.5rem; margin:.3rem 0 .5rem; }
.servicio__tag{ color:var(--ink-2); font-size:.96rem; }
.servicio--featured .servicio__tag{ color:var(--on-dark-2); }
.servicio__price{ display:flex; align-items:baseline; gap:.35rem; margin:1.2rem 0 .2rem; }
.servicio__amount{ font-size:2.3rem; font-weight:800; color:var(--ink); font-feature-settings:"tnum"; letter-spacing:-.02em; }
.servicio--featured .servicio__amount{ color:#fff; }
.servicio__unit{ color:var(--ink-soft); font-size:.85rem; font-weight:600; }
.servicio__for{ font-size:.88rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.servicio--featured .servicio__for{ color:var(--on-dark-2); }
.servicio__list{ display:flex; flex-direction:column; gap:.65rem; margin:0 0 1.5rem; flex:1; }
.servicio__list li{ position:relative; padding-left:1.7rem; font-size:.9rem; color:var(--ink-2); }
.servicio--featured .servicio__list li{ color:var(--on-dark-2); }
.servicio__list li::before{
  content:""; position:absolute; left:0; top:.15em; width:18px; height:18px; border-radius:50%;
  background:var(--grad-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A9E99' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:11px, cover;
}
.servicio__list strong{ color:var(--ink); font-weight:700; }
.servicio--featured .servicio__list strong{ color:#fff; }
.servicio__cta{ margin-top:auto; }

/* ================= COMPARATIVA ================= */
.comparativa{ padding:clamp(1rem,4vw,2rem) 0 clamp(3.4rem,7vw,6rem); }

.compare-toggle{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin:2rem 0 1.6rem; font-size:.92rem; font-weight:600; color:var(--ink-2); }
.switch{ position:relative; display:inline-flex; width:44px; height:26px; flex:none; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.switch__track{ width:100%; height:100%; background:var(--line-2); border-radius:var(--r-pill); display:block; position:relative; transition:background .2s var(--ease); }
.switch__thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease); }
.switch input:checked + .switch__track{ background-image:var(--grad); }
.switch input:checked + .switch__track .switch__thumb{ transform:translateX(18px); }
.switch input:focus-visible + .switch__track{ outline:3px solid var(--teal); outline-offset:3px; }

.compare-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch; max-height:min(70vh,640px); overflow-y:auto;
  border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--line); background:var(--card);
}
.compare-table{ width:100%; min-width:640px; border-collapse:separate; border-spacing:0; }
.compare-th{ position:sticky; top:0; z-index:3; background:var(--card); text-align:left; padding:1.4rem 1.3rem 1.1rem; vertical-align:top; border-bottom:1px solid var(--line); }
.compare-th--feature{ width:32%; z-index:4; }
.compare-th__name{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-d); }
.compare-th__title{ display:block; font-size:1.15rem; font-weight:800; color:var(--ink); margin:.3rem 0 .4rem; }
.compare-th__price{ display:block; font-size:1.5rem; font-weight:800; color:var(--ink); font-feature-settings:"tnum"; }
.compare-th__price small{ font-size:.7rem; font-weight:600; color:var(--ink-soft); margin-left:.2em; }
.compare-th--basic{ background:rgba(15,190,184,.09); }
.compare-th--featured{ background:var(--navy); position:sticky; top:0; }
.compare-th--featured .compare-th__title, .compare-th--featured .compare-th__price{ color:#fff; }
.compare-th--featured .compare-th__name{ color:var(--teal); }
.compare-badge{ position:absolute; top:10px; right:1.3rem; background-image:var(--grad); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.4em .9em; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); }

.compare-table tbody td{ padding:1rem 1.3rem; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-2); transition:background .2s; }
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table tbody td:first-child{ font-weight:600; color:var(--ink); position:sticky; left:0; background:var(--card); z-index:1; box-shadow:1px 0 0 var(--line); }
.compare-table tbody tr:hover td:first-child{ background:var(--bg-alt); }
.compare-td--basic{ background:rgba(15,190,184,.05); }
.compare-td--featured{ background:var(--grad-soft); font-weight:700; color:var(--ink); text-align:center; }
.compare-table td:not(:first-child){ text-align:center; }
.compare-table tbody tr:hover td{ background:var(--bg-alt); }
.compare-table tbody tr:hover td.compare-td--basic{ background:rgba(15,190,184,.09); }
.compare-table tbody tr:hover td.compare-td--featured{ background:var(--grad-soft); }
.compare-row--price td{ font-size:1.05rem; font-weight:800; color:var(--ink); padding-top:1.3rem; padding-bottom:1.3rem; }
.compare-table td.no{ color:var(--ink-soft); }

.check-badge{
  display:inline-block; width:22px; height:22px; border-radius:50%; background:var(--grad-soft);
  background-image:var(--grad-soft), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A9E99' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:cover, 12px;
}

.compare-table.is-diffs-only tbody tr.is-same{ display:none; }

.compare-ctas{ display:flex; justify-content:center; gap:1rem; margin-top:2rem; flex-wrap:wrap; }

@media (max-width:640px){
  .compare-th__price{ font-size:1.2rem; }
  .compare-table tbody td, .compare-th{ padding-inline:1rem; }
}


/* ================= BENEFICIOS ================= */
.beneficios{ padding:clamp(3.4rem,7vw,5.5rem) 0; background:var(--bg-alt); border-block:1px solid var(--line); }
.beneficios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.beneficio{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 1.7rem; transition:transform .2s var(--ease), box-shadow .2s; }
.beneficio:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.beneficio__icon{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--grad); color:#fff; margin-bottom:1.2rem; box-shadow:0 12px 22px -12px rgba(23,120,180,.6); }
.beneficio__icon svg{ width:26px; height:26px; }
.beneficio h3{ font-size:1.3rem; margin-bottom:.5rem; }
.beneficio p{ color:var(--ink-2); font-size:.96rem; }

/* ================= PLANTILLAS ================= */
.plantillas{ padding:clamp(3.4rem,7vw,6rem) 0; }
.plantillas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.plantilla{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
a.plantilla:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2); }
a.plantilla:hover .plantilla__link{ color:var(--teal-d); }
.plantilla__preview{
  position:relative; aspect-ratio:16/8.5; padding:1.2rem 1.3rem;
  display:flex; flex-direction:column; justify-content:center; gap:.55rem;
}
.plantilla__preview--img{ padding:0; overflow:hidden; }
.plantilla__preview--img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center; display:block;
  transition:transform .35s var(--ease);
}
a.plantilla:hover .plantilla__preview--img img{ transform:scale(1.04); }
.plantilla__preview .pp-bar{ width:36%; height:7px; border-radius:4px; background:rgba(255,255,255,.55); }
.plantilla__preview .pp-title{ width:78%; height:15px; border-radius:5px; background:rgba(255,255,255,.92); }
.plantilla__preview .pp-btn{ width:96px; height:26px; border-radius:100px; margin-top:.45rem; }
.plantilla__preview--roofing{ background:linear-gradient(150deg,#1B2530,#2A3847); }
.plantilla__preview--roofing .pp-btn{ background:#F59E0B; }
.plantilla__preview--salud{ background:linear-gradient(150deg,#5C7A5E,#3E5940); }
.plantilla__preview--salud .pp-btn{ background:#FAF6EF; }
.plantilla__preview--taqueria{ background:linear-gradient(150deg,#C62828,#8E1B1B); }
.plantilla__preview--taqueria .pp-btn{ background:#F9A825; }
.plantilla__preview--mexicano{ background:linear-gradient(150deg,#A6402A,#3E2218); }
.plantilla__preview--mexicano .pp-btn{ background:#D9A036; }
.plantilla__preview--laundry{ background:linear-gradient(150deg,#1976D2,#0D47A1); }
.plantilla__preview--laundry .pp-btn{ background:#26C6DA; }
.plantilla__preview--tax{ background:linear-gradient(150deg,#0F2A43,#173B5C); }
.plantilla__preview--tax .pp-btn{ background:#1E7A46; }
.plantilla__body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.plantilla__body h3{ font-size:1.15rem; }
.plantilla__body p{ font-size:.92rem; color:var(--ink-2); }
.plantilla__link{ margin-top:.6rem; font-weight:700; font-size:.9rem; color:var(--teal-d); transition:color .2s; }
.plantilla--cta{ background:var(--grad-soft); border-style:dashed; justify-content:center; }
.plantilla--cta .plantilla__body{ align-items:flex-start; justify-content:center; gap:.6rem; }
.plantilla--cta .btn{ margin-top:.6rem; }
.plantillas-more{ text-align:center; margin-top:2.2rem; }

/* ================= PROCESO ================= */
.proceso{ padding:clamp(3.4rem,7vw,5.5rem) 0; }
.proceso-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.proceso-step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 1.6rem; }
.proceso-step__n{ display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:12px; background:var(--grad); color:#fff; font-weight:800; font-size:1.05rem; margin-bottom:1rem; }
.proceso-step h3{ font-size:1.25rem; margin-bottom:.4rem; }
.proceso-step p{ color:var(--ink-2); font-size:.95rem; }
.proceso-step__line{ display:none; }

/* ---------- Visita en persona ---------- */
.proceso-visita{
  margin-top:2.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem;
  background:var(--grad-soft); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.6rem 1.8rem;
}
.proceso-visita__icon{
  width:56px; height:56px; flex:none; border-radius:16px; display:grid; place-items:center;
  background:var(--grad); color:#fff; box-shadow:0 12px 22px -12px rgba(23,120,180,.6);
}
.proceso-visita__icon svg{ width:26px; height:26px; flex:none; }
.proceso-visita__copy{ flex:1 1 260px; min-width:260px; }
.proceso-visita h3{ font-size:1.25rem; margin-bottom:.3rem; }
.proceso-visita p{ color:var(--ink-2); font-size:.97rem; max-width:62ch; }
.proceso-visita p strong{ color:var(--ink); }
.proceso-visita .btn{ flex:none; }
.proceso-visita__map{ width:100%; margin:1.2rem 0; }
.proceso-visita__map iframe{ display:block; }
@media (max-width:760px){
  .proceso-visita{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ================= BLOG ================= */
.blog{ padding:clamp(3.4rem,7vw,6rem) 0; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.blog-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
a.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2); }
a.blog-card:hover .blog-card__link{ color:var(--teal-d); }
.blog-card__preview{ position:relative; aspect-ratio:16/9; display:grid; place-items:center; }
.blog-card__preview svg{ width:40px; height:40px; color:#fff; opacity:.92; }
.blog-card__preview--dominio{ background:linear-gradient(150deg,#3B4FE0,#2C3BC0); }
.blog-card__preview--senales{ background:linear-gradient(150deg,#0FBEB8,#0A9E99); }
.blog-card__preview--landing{ background:linear-gradient(150deg,#12203A,#0B1526); }
.blog-card__body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.blog-card__meta{ font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-d); }
.blog-card__body h3{ font-size:1.15rem; }
.blog-card__body p{ font-size:.92rem; color:var(--ink-2); }
.blog-card__link{ margin-top:.6rem; font-weight:700; font-size:.9rem; color:var(--teal-d); transition:color .2s; }

/* ---------- Artículo individual ---------- */
.article{ padding:clamp(2.4rem,6vw,4rem) 0 clamp(3.4rem,7vw,6rem); }
.article-wrap{ max-width:760px; margin-inline:auto; }
.article-back{ display:inline-flex; align-items:center; gap:.4em; color:var(--teal-d); font-weight:700; font-size:.9rem; margin-bottom:1.6rem; }
.article-meta{ display:flex; gap:1rem; align-items:center; margin-bottom:.6rem; }
.article h1{ font-size:clamp(1.9rem,4.2vw,2.6rem); margin-bottom:1.2rem; }
.article-body h2{ font-size:1.35rem; margin:2rem 0 .8rem; }
.article-body p{ color:var(--ink-2); font-size:1.02rem; margin-bottom:1.1rem; }
.article-body ul{ color:var(--ink-2); font-size:1.02rem; margin-bottom:1.1rem; padding-left:1.5rem; }
.article-body li{ margin-bottom:.5rem; list-style:disc; }
.article-body strong{ color:var(--ink); }
.article-cta{ margin-top:2.4rem; padding:1.6rem 1.8rem; border-radius:var(--r-lg); background:var(--grad-soft); border:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.article-cta p{ margin:0; font-weight:700; color:var(--ink); }
.article-related{ margin-top:2.8rem; padding-top:2rem; border-top:1px solid var(--line); }
.article-related h3{ font-size:1.1rem; margin-bottom:1rem; }
.article-related a{ display:block; color:var(--teal-d); font-weight:600; font-size:.95rem; padding:.4em 0; }

/* ================= FAQ ================= */
.faq{ padding:clamp(3.4rem,7vw,5.5rem) 0; background:var(--bg-alt); border-block:1px solid var(--line); }
.faq-list{ max-width:760px; margin:3rem auto 0; display:flex; flex-direction:column; gap:.8rem; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:0; text-align:left; padding:1.2rem 1.4rem; font-weight:700; font-size:1rem; color:var(--ink);
}
.faq-chevron{ width:20px; height:20px; flex:none; color:var(--teal-d); transition:transform .25s var(--ease); }
.faq-q[aria-expanded="true"] .faq-chevron{ transform:rotate(180deg); }
.faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s var(--ease); }
.faq-item.is-open .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a{ overflow:hidden; }
.faq-a p{ padding:0 1.4rem 1.3rem; color:var(--ink-2); font-size:.95rem; }

/* ================= ZONAS ================= */
.zonas{ padding:clamp(3.4rem,7vw,5rem) 0; background:var(--bg-alt); border-block:1px solid var(--line); }
.zonas-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin:2.4rem auto 0; max-width:940px; }
.zonas-grid li{ font-weight:600; color:var(--ink); font-size:.9rem; background:#fff; border:1px solid var(--line); padding:.5em 1.05em; border-radius:var(--r-pill); transition:border-color .2s, transform .2s var(--ease), color .2s; }
.zonas-grid li:hover{ border-color:var(--teal); color:var(--teal-d); transform:translateY(-2px); }
.zonas-nota{ text-align:center; margin-top:1.8rem; color:var(--ink-2); font-size:.95rem; }
.zonas-nota a{ color:var(--teal-d); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ================= COTIZACIÓN + CONTACTO ================= */
.contacto{ padding:clamp(3.4rem,7vw,6rem) 0; }
.contacto-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--navy); color:var(--on-dark); box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr 1.05fr;
}
.contacto-card::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(50% 60% at 0% 0%, rgba(59,79,224,.4), transparent 60%), radial-gradient(50% 60% at 100% 100%, rgba(15,209,196,.32), transparent 60%); }
.contacto-info{ position:relative; z-index:1; padding:clamp(2rem,4vw,3.2rem); }
.contacto-info .eyebrow{ color:var(--teal); }
.contacto-info .eyebrow::before{ background:var(--teal); }
.contacto-info h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); margin:.9rem 0; }
.contacto-info p{ color:var(--on-dark-2); max-width:42ch; }
.contacto-wa{ display:inline-flex; align-items:center; gap:.7rem; margin-top:1.6rem; background:#25D366; color:#04240f; font-weight:800; padding:.85em 1.4em; border-radius:var(--r-pill); box-shadow:0 14px 26px -12px rgba(37,211,102,.7); transition:transform .2s var(--ease); }
.contacto-wa:hover{ transform:translateY(-2px); }
.contacto-wa svg{ width:22px; height:22px; }
.contacto-points{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.9rem; }
.contacto-points li{ display:flex; align-items:flex-start; gap:.7rem; color:var(--on-dark); font-size:.95rem; }
.contacto-points svg{ width:20px; height:20px; color:var(--teal); flex:none; margin-top:.15em; }
.contacto-points a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.contacto-form{ position:relative; z-index:1; background:#fff; color:var(--ink-2); padding:clamp(1.6rem,3vw,2.4rem); border-radius:0 var(--r-lg) var(--r-lg) 0; }
.contacto-form h3{ font-size:1.35rem; margin-bottom:.3rem; }
.contacto-form .form-intro{ font-size:.92rem; color:var(--ink-soft); margin-bottom:1.4rem; }
.form-row{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.05rem; }
.form-row label{ font-size:.85rem; font-weight:700; color:var(--ink); }
.form-row .opt{ color:var(--ink-soft); font-weight:500; }
.form-row input,.form-row textarea,.form-row select{
  font:inherit; color:var(--ink); background:#fff; border:1.5px solid var(--line-2);
  border-radius:12px; padding:.75em .9em; width:100%; transition:border-color .2s, box-shadow .2s;
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,190,184,.18); }
.form-row textarea{ resize:vertical; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-status{ margin-top:1rem; font-size:.9rem; padding:.75em 1em; border-radius:10px; }
.form-status.ok{ background:rgba(15,190,184,.14); color:var(--teal-d); }
.form-status.err{ background:rgba(220,38,38,.1); color:#b91c1c; }
.form-consent{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1.05rem; }
.form-consent input[type=checkbox]{ margin-top:.2em; flex:none; width:1.1em; height:1.1em; accent-color:var(--teal); }
.form-consent label{ font-size:.85rem; color:var(--ink-2); }
.form-consent a{ color:var(--teal-d); text-decoration:underline; }

/* ================= FOOTER ================= */
.site-footer{ background:var(--navy); color:var(--on-dark-2); padding:clamp(2.8rem,5vw,3.6rem) 0 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .logo{ color:#fff; margin-bottom:.8rem; }
.footer-brand p{ max-width:34ch; font-size:.92rem; }
.footer-col h4{ color:#fff; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.9rem; }
.footer-col a{ display:block; color:var(--on-dark-2); font-size:.94rem; padding:.28em 0; }
.footer-col a:hover{ color:var(--teal); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding-top:1.5rem; font-size:.85rem; }
.footer-bottom a{ color:var(--on-dark-2); text-decoration:none; transition:color .2s; }
.footer-bottom a:hover{ color:var(--teal); text-decoration:underline; }

/* ================= WHATSAPP FLOTANTE ================= */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(37,211,102,.75); transition:transform .2s var(--ease); }
.wa-float:hover{ transform:scale(1.08); }

/* ================= RESPONSIVE ================= */
@media (max-width:1200px){
  .main-nav{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0; background:#fff;
    border-bottom:1px solid var(--line); padding:.5rem 6vw 1.3rem; transform:translateY(-130%);
    transition:transform .3s var(--ease); box-shadow:var(--shadow); z-index:45;
  }
  .main-nav.is-open{ transform:translateY(0); }
  .main-nav a{ padding:.9em 0; border-bottom:1px solid var(--line); width:100%; white-space:normal; }
  .nav-toggle{ display:block; order:3; }
  .header-cta{ display:none; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}
@media (max-width:940px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ max-width:520px; margin:0 auto; width:100%; }
  .hero-chip--tl{ left:2%; }
  .hero-chip--br{ right:2%; }
  .servicios-grid,.beneficios-grid,.proceso-grid,.plantillas-grid,.blog-grid,.hero-cards{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .hero-cards-wrap{ margin-top:clamp(-2.5rem,-6vw,-1.5rem); }
  .contacto-card{ grid-template-columns:1fr; }
  .contacto-form{ border-radius:0 0 var(--r-lg) var(--r-lg); }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .footer-top{ grid-template-columns:1fr; }
  .faq-q{ padding:1rem 1.1rem; font-size:.94rem; }
  .article-cta{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}