/* =========================================================
   iMarkketing v3 — Sistema visual "creative studio / neobrutalista"
   Paleta cálida (crema + violeta + rosa + menta + amarillo),
   tipografía Unbounded (titulares) + Manrope (cuerpo),
   bordes gruesos, sombras duras offset, bento-grid, marquee,
   nav flotante tipo pill, chips de ícono en forma de "sticker".
   Deliberadamente distinto del sistema visual de Sergrupot.
   ========================================================= */

:root{
  --cream:#FCF6EA;
  --cream-soft:#F5EBD8;
  --ink:#15110D;
  --violet:#6C4CFF;
  --violet-deep:#4B32D6;
  --pink:#FF3D6E;
  --mint:#00C98B;
  --yellow:#FFC93C;
  --white:#FFFFFF;

  --font-head:'Unbounded', sans-serif;
  --font-body:'Manrope', sans-serif;

  --border:3px solid var(--ink);
  --border-thin:2px solid var(--ink);
  --shadow-hard:6px 6px 0 var(--ink);
  --shadow-hard-sm:4px 4px 0 var(--ink);
  --shadow-hard-lg:9px 9px 0 var(--ink);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;

  --container:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.4rem,6vw,4.6rem);}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ---------- utilidades ---------- */
/* Etiqueta de sección estilo "post-it" con cinta adhesiva,
   en vez de la cápsula redondeada genérica. */
.tag{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:.72rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--yellow);color:var(--ink);
  border:var(--border-thin);border-radius:3px;
  padding:9px 16px 8px;transform:rotate(-2deg);
  box-shadow:var(--shadow-hard-sm);
  margin:14px 0 24px;
}
.tag::before{
  content:"";position:absolute;top:-11px;left:50%;
  width:52px;height:18px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(21,17,13,.18);
  transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 1px 2px rgba(21,17,13,.12);
}
.tag.tag-pink{background:var(--pink);color:var(--white);}
.tag.tag-mint{background:var(--mint);color:var(--ink);}
.tag.tag-violet{background:var(--violet);color:var(--white);}

.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.lead{font-size:1.15rem;color:#4a443c;max-width:620px;}
.center .lead{margin-left:auto;margin-right:auto;}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:500;font-size:.95rem;
  padding:14px 26px;border-radius:999px;border:var(--border);
  background:var(--ink);color:var(--cream);
  box-shadow:var(--shadow-hard);
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink);}
.btn-violet{background:var(--violet);color:var(--white);}
.btn-pink{background:var(--pink);color:var(--white);}
.btn-yellow{background:var(--yellow);color:var(--ink);}
.btn-outline{background:var(--cream);color:var(--ink);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:9px 18px;font-size:.82rem;box-shadow:var(--shadow-hard-sm);}
.btn svg{width:18px;height:18px;flex-shrink:0;}

/* ---------- header flotante tipo pill ---------- */
.site-header{
  position:sticky;top:14px;z-index:50;
  padding:0 20px;
  margin-bottom:-1px;
}
.nav-wrap{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--cream);
  border:var(--border);border-radius:999px;
  box-shadow:var(--shadow-hard);
  padding:9px 10px 9px 22px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:30px;width:auto;}
.main-nav{display:flex;align-items:center;gap:22px;}
.main-nav ul{display:flex;gap:20px;}
.nav-link{
  font-family:var(--font-head);font-size:.76rem;font-weight:500;
  padding:8px 14px;border-radius:999px;transition:background .18s ease, color .18s ease;
}
.nav-link:hover{background:var(--ink);color:var(--cream);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.menu-toggle{display:none;background:var(--cream);border:var(--border-thin);border-radius:999px;padding:8px 10px;cursor:pointer;}
.menu-toggle span{display:block;width:20px;height:2.5px;background:var(--ink);margin:4px 0;border-radius:2px;}

@media (max-width:900px){
  .main-nav{
    position:fixed;inset:78px 20px auto 20px;background:var(--cream);
    border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-hard);
    flex-direction:column;align-items:flex-start;padding:20px;gap:16px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.2s ease;
  }
  .main-nav.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .main-nav ul{flex-direction:column;gap:6px;width:100%;}
  .nav-link{display:block;width:100%;}
  .nav-actions{flex-direction:column;align-items:flex-start;width:100%;}
  .menu-toggle{display:block;}
}

/* ---------- hero (bloque diagonal) ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--violet);
  color:var(--white);
  padding:76px 0 120px;
  clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
  margin-top:16px;
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.hero h1{color:var(--white);}
.hero .lead{color:#EDE7FF;font-size:1.2rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.hero-visual{position:relative;height:320px;}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero{clip-path:polygon(0 0,100% 0,100% 96%,0 100%);padding:56px 0 84px;}
  .hero-visual{height:220px;}
}

/* variantes de color para hero de páginas internas */
.hero.hero-pink{background:var(--pink);}
.hero.hero-mint{background:var(--mint);color:var(--ink);}
.hero.hero-mint h1{color:var(--ink);}
.hero.hero-mint .lead{color:#0b3d2e;}
.hero.hero-yellow{background:var(--yellow);color:var(--ink);}
.hero.hero-yellow h1{color:var(--ink);}
.hero.hero-yellow .lead{color:#4a3b05;}

.breadcrumb{font-size:.8rem;opacity:.85;margin-bottom:14px;}

/* ---------- marquee ---------- */
.marquee{
  background:var(--ink);color:var(--cream);
  border-top:var(--border);border-bottom:var(--border);
  padding:16px 0;overflow:hidden;white-space:nowrap;
}
.marquee-track{display:inline-flex;gap:40px;animation:marquee-scroll 26s linear infinite;}
.marquee-track span{
  font-family:var(--font-head);font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:16px;
}
.marquee-track span::after{content:"✦";color:var(--yellow);}
@keyframes marquee-scroll{
  from{transform:translateX(0);} to{transform:translateX(-50%);}
}

/* ---------- chip de ícono tipo "sticker" (reemplaza círculos genéricos) ---------- */
.icon-badge{
  width:54px;height:54px;flex-shrink:0;
  background:var(--yellow);
  border:2.5px solid var(--ink);
  clip-path:polygon(22% 2%,78% 0%,100% 24%,98% 76%,78% 100%,22% 98%,0% 76%,2% 22%);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-6deg);
}
.bento-card:nth-child(2n) .icon-badge,.card:nth-of-type(2n) .icon-badge,.plan-card:nth-of-type(2n) .icon-badge{transform:rotate(5deg);}
.bento-card:nth-child(3n) .icon-badge,.card:nth-of-type(3n) .icon-badge{transform:rotate(-2deg);}

/* ---------- bento grid de servicios ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;}
.bento-card{
  border:var(--border);border-radius:var(--radius-md);
  background:var(--white);padding:30px;
  box-shadow:var(--shadow-hard);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .15s ease;
}
.bento-card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-hard-lg);}
.bento-card.span-4{grid-column:span 4;}
.bento-card.span-2{grid-column:span 2;}
.bento-card.span-3{grid-column:span 3;}
.bento-card.c-violet{background:var(--violet);color:var(--white);}
.bento-card.c-pink{background:var(--pink);color:var(--white);}
.bento-card.c-mint{background:var(--mint);color:var(--ink);}
.bento-card.c-yellow{background:var(--yellow);color:var(--ink);}
.bento-card.c-violet .icon-badge,.bento-card.c-pink .icon-badge{background:var(--white);color:var(--ink);}
.bento-card h3{margin-bottom:4px;}
.bento-card p{margin:0;font-size:.95rem;opacity:.92;}
.bento-card a.card-link{margin-top:auto;font-family:var(--font-head);font-size:.8rem;display:inline-flex;align-items:center;gap:6px;}

@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .bento-card.span-4,.bento-card.span-3,.bento-card.span-2{grid-column:span 2;}
}

/* grid genérico (3 / 2 columnas) para páginas internas */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr;} }

.card{
  border:var(--border);border-radius:var(--radius-md);
  background:var(--white);padding:28px;
  box-shadow:var(--shadow-hard-sm);
}
.card .icon-badge{margin-bottom:14px;}
.card.c-violet{background:var(--violet);color:var(--white);}
.card.c-pink{background:var(--pink);color:var(--white);}
.card.c-mint{background:var(--mint);color:var(--ink);}
.card.c-yellow{background:var(--yellow);color:var(--ink);}
.card.c-violet .icon-badge,.card.c-pink .icon-badge{background:var(--white);}

/* ---------- franja de estadísticas ---------- */
.stat-band{background:var(--ink);color:var(--cream);padding:64px 0;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat-grid div strong{
  display:block;font-family:var(--font-head);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--yellow);
}
.stat-grid div span{font-size:.85rem;opacity:.8;}
@media (max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- testimonios ---------- */
.testimonial{
  border:var(--border);border-radius:var(--radius-md);background:var(--white);
  padding:32px;box-shadow:var(--shadow-hard-sm);position:relative;
}
.testimonial::before{
  content:"\201C";font-family:var(--font-head);font-size:3.5rem;color:var(--pink);
  position:absolute;top:6px;left:20px;line-height:1;
}
.testimonial p{padding-top:24px;font-size:1.05rem;}
.testimonial:nth-child(even){transform:rotate(.6deg);}
.testimonial:nth-child(odd){transform:rotate(-.6deg);}

/* ---------- cómo trabajamos: timeline con línea conectora ---------- */
/* Reemplaza el grid de cuadros numerados 01-04 (look de Sergrupot)
   por una línea de tiempo vertical con puntos de color alternados. */
.timeline{position:relative;padding-left:44px;max-width:720px;}
.timeline::before{
  content:"";position:absolute;left:10px;top:8px;bottom:8px;width:3px;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 8px,transparent 8px 15px);
}
.timeline-item{position:relative;padding-bottom:40px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";position:absolute;left:-44px;top:2px;
  width:23px;height:23px;border-radius:50%;
  background:var(--dot,var(--pink));border:3px solid var(--ink);
}
.timeline-item:nth-child(4n+1){--dot:var(--pink);}
.timeline-item:nth-child(4n+2){--dot:var(--yellow);}
.timeline-item:nth-child(4n+3){--dot:var(--mint);}
.timeline-item:nth-child(4n+4){--dot:var(--violet);}
.timeline-item h3{margin-bottom:6px;}
.timeline-item p{margin:0;font-size:.96rem;color:#4a443c;max-width:560px;}

/* ---------- planes hosting ---------- */
.plan-card{
  border:var(--border);border-radius:var(--radius-md);background:var(--white);
  padding:32px;box-shadow:var(--shadow-hard);display:flex;flex-direction:column;gap:16px;
}
.plan-card.featured{background:var(--violet);color:var(--white);}
.plan-card .icon-badge{background:var(--cream);}
.plan-card.featured .icon-badge{background:var(--white);}
.plan-card ul{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px;}
.plan-card li{display:flex;align-items:center;gap:10px;font-size:.94rem;}
.plan-card li svg{width:18px;height:18px;flex-shrink:0;color:var(--pink);}
.plan-card.featured li svg{color:var(--yellow);}
.plan-note{font-size:.82rem;opacity:.75;}

/* ---------- cta band ---------- */
.cta-band{
  border:var(--border);border-radius:var(--radius-lg);
  background:var(--pink);color:var(--white);
  padding:56px;text-align:center;box-shadow:var(--shadow-hard-lg);
  position:relative;overflow:hidden;
}
.cta-band h2{color:var(--white);}
.cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:18px;}
@media (max-width:640px){.cta-band{padding:36px 22px;}}

/* ---------- formulario de contacto ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-family:var(--font-head);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.form-row input,.form-row textarea{
  width:100%;border:var(--border-thin);border-radius:12px;padding:13px 16px;
  font-family:var(--font-body);font-size:.95rem;background:var(--cream);color:var(--ink);
}
.form-row input:focus,.form-row textarea:focus{outline:3px solid var(--violet);outline-offset:1px;}
.form-status{margin-top:14px;font-size:.9rem;font-weight:600;min-height:1.2em;}
.form-status.ok{color:#0a7a4d;}
.form-status.err{color:#c22b4d;}
.form-note{font-size:.85rem;color:#6b6459;}
.form-note.center{text-align:center;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--cream);padding:0 0 32px;overflow:hidden;}
.footer-top{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:64px 0 48px;border-bottom:var(--border-thin);border-color:#3a352d;
}
.footer-top h2{color:var(--white);max-width:560px;margin:0;}
.footer-social{display:flex;justify-content:center;padding:36px 0;}
.social-row{display:flex;gap:16px;}
.social-row a{
  width:46px;height:46px;border-radius:50%;border:2px solid var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.social-row a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:translateY(-3px);}
.footer-mega{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(3rem,11vw,8.5rem);line-height:.85;
  color:transparent;-webkit-text-stroke:1.5px var(--cream);
  text-align:center;margin:8px 0 28px;white-space:nowrap;overflow:hidden;
}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;border-top:var(--border-thin);border-color:#3a352d;font-size:.8rem;opacity:.7;}

/* ---------- accesibilidad ---------- */
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}