:root{
  --bg-deep:#0f0d14;
  --surface:#17141f;
  --ink:#ECE5DB;
  --ink-dim:#C9C3BC;
  --brand:#D82B83;   /* magenta */
  --brand-2:#6D8873; /* salvia */
  --line:rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background: #020024;background: linear-gradient(0deg, rgb(1 0 22) 0%, rgb(14 0 32) 35%, rgb(25 0 39) 100%); color:var(--ink); font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--brand);text-decoration:none}
a:hover{filter:brightness(1.08)}

.container{max-width:1120px;margin:0 auto;padding:24px}
.space-xl{padding:64px 24px}

.header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg, rgba(23,20,31,.92), rgba(23,20,31,.6));backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header .inner{display:flex;align-items:center;gap:14px;padding:12px 24px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:40px;height:40px;background:#fff;border-radius:8px;object-fit:contain;padding:4px}
.brand{font-weight:800;letter-spacing:.3px;color:#F4D1E0}
nav{margin-left:auto;display:flex;gap:18px;align-items:center}
nav a{color:#eae6f2;font-weight:700;opacity:.9}
.btn{display:inline-block;border:0;border-radius:999px;padding:12px 16px;font-weight:800}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 12px 28px rgba(216,43,131,.25)}
.btn-ghost{background:#221f2a;border:1px solid var(--line);color:#fff}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;padding:64px 24px}
@media(max-width:980px){.hero{grid-template-columns:1fr}}
.hero h1{font-family:Raleway,system-ui;font-weight:900;font-size:46px;letter-spacing:.2px;margin:0 0 10px}
.hero p{color:var(--ink-dim);font-size:18px;line-height:1.6;max-width:620px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.hero-card{background:radial-gradient(1000px 450px at 90% 0%, rgba(216,43,131,.12), transparent 55%), var(--surface); border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.35)}
.meta{color:#16191f;opacity:.95;font-size:14px}
.badge{margin-top:10px;color:#bfc6ce;opacity:.9}

.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:center}
.split img{border-radius:16px;width:100%;height:auto;object-fit:cover;box-shadow:0 30px 70px rgba(0,0,0,.35)}
@media(max-width:980px){.split{grid-template-columns:1fr}}

h2{font-family:Raleway,system-ui;font-weight:900;font-size:32px;margin:0 0 10px}
.text-dim{color:var(--ink-dim)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}

.service{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.service h3{margin:6px 0 8px}
.service .price{color:#A9E8DA;font-weight:900;margin:6px 0 10px}
.service .actions .btn{width:100%}

.card{background:#f3f3f3;border-radius:18px;overflow:hidden}
.card .pad{padding:16px 18px}
.card img.cover{width:100%;height:220px;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.card h3{margin:6px 0 10px;font-size:20px}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.blog-grid{grid-template-columns:1fr}}
.post-hero img{width:100%;max-height:360px;object-fit:cover;border-radius:16px}
.post-content{max-width:780px;margin:0 auto}
.post-content p{font-size:18px;line-height:1.8;color:var(--ink-dim)}
.post-content h1{font-size:36px;margin:10px 0}
.post-content h2{font-size:24px;margin:20px 0 8px}
.post-content h3{font-size:20px;margin:14px 0 6px}
hr.sep{border:none;border-top:1px solid var(--line);margin:24px 0}

.testimonios{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.testimonios figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.75rem}
.testimonios img{width:100%;height:auto;border-radius:12px;display:block}

.footer{padding:38px 24px;border-top:1px solid var(--line);color:#b7bdc9;margin-top:42px;display:grid;gap:8px}
.fab-wa{position:fixed;right:18px;bottom:18px;background:#25D366;color:#0b1a10;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 28px rgba(37,211,102,.45)}


/* Gradient CTA (magenta→salvia) */
.btn-gradient{background:linear-gradient(90deg, #D82B83, #6D8873); color:#fff; border:0;}
.btn-gradient:hover{filter:brightness(1.08)}


/* Testimonials harmonized */
.testimonios{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.testimonios figure{margin:0;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px}
.testi-media{height:260px;border-radius:16px;border:1px solid rgba(255,245,235,.14);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px;margin:0;}
.testi-media img{max-width:100%;max-height:100%;object-fit:contain}
.testimonios figcaption{color:#C9C3BC;font-size:.9rem;margin-top:6px}


/* Subtle breathing logo */
.logo-breathe-wrap{display:flex;justify-content:flex-start;margin-bottom:6px}
.logo-breathe{width: 75%;margin:0 auto;background:#fff;border-radius:8px;padding:4px;animation:breath 7s ease-in-out infinite;opacity:.95}
@keyframes breath{0%{transform:scale(1);opacity:.95}50%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:.95}}


/* Blog organic cream watercolor borders */
.card.blog-card{position:relative;border:1px solid rgba(236,229,219,.85);border-radius:16px;overflow:hidden}
.card.blog-card::before{
  content:""; position:absolute; inset:-6px;
  pointer-events:none;
  background:radial-gradient(120% 70% at 50% -10%, rgba(236,229,219,.38), transparent 45%),
             radial-gradient(80% 50% at -10% 110%, rgba(236,229,219,.22), transparent 50%),
             radial-gradient(80% 50% at 110% 110%, rgba(236,229,219,.22), transparent 50%);
  border-radius:22px; mix-blend-mode:soft-light; opacity:.75;
}
.card.blog-card img.cover{max-height:200px;object-fit:cover}

/* Testimonials grid */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}

.testi-card {
    background: #f3f3f3;
    border-radius: 5px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 245, 235, .06);
}

.testi-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.testi-title{color:#f6efe8;font-size:14px;font-weight:600}
.testi-stars{color:#D82B83;font-size:14px}

.testi-foot{margin-top:12px;color:rgba(246,239,232,.9);font-size:12px}

/* WhatsApp cream button with magenta border */
.btn-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;
  background:#FFF7F0;color:#D82B83;font-weight:600;border-radius:28px;border:2px solid #D82B83;
  font-size:15px;letter-spacing:.3px;transition:all .28s ease}
.btn-whatsapp:hover{background:#FCE8F2;border-color:#C32475;color:#C32475;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(216,43,131,0.18)}


  /* ===== Carrusel Testimonios ===== */
.testi-carousel{ position:relative; --gap:28px; }
.tc-viewport{ overflow:hidden; }
.tc-track{ display:flex; gap:var(--gap); transition:transform .45s ease; will-change:transform; }

.testi-card{ min-width:280px; border-radius:12px; overflow:hidden; } /* base, el JS ajusta el ancho real */

.tc-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.06);
  color:#fff; font-size:26px; font-weight:800; line-height:0;
  display:grid; place-items:center; cursor:pointer; z-index:2;
  transition:filter .2s ease, transform .1s ease;
}
.tc-arrow:hover{ filter:brightness(1.15); }
.tc-arrow:active{ transform:translateY(-50%) scale(.96); }
.tc-arrow.prev{ left:-50px; }
.tc-arrow.next{ right:-50px; }

.tc-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.tc-dots button{
  width:8px; height:8px; border-radius:50%;
  border:0; background:rgba(255,255,255,.22);
  cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.tc-dots button[aria-current="true"]{
  background: linear-gradient(90deg, #D82B83, #6D8873);
  transform:scale(1.4);
}

/* Responsivo: 1–2–3 por vista (el JS calcula anchuras, esto solo cuida flechas) */
@media (max-width: 700px){
  .tc-arrow.prev{ left:2px; } .tc-arrow.next{ right:2px; }
}


  /* ====== NAV MÓVIL (HAMBURGUESA) ====== */
.nav-toggle{
  display:none; /* se muestra en móvil */
  background:transparent;
  border:0;
  width:42px;height:42px;
  border-radius:10px;
  margin-left:auto;
  position:relative;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px; width:22px;
  background:#ECE5DB; /* crema */
  border-radius:2px;
  margin:5px auto;
  transition:transform .25s ease, opacity .2s ease, width .25s ease;
}

/* Layout de nav de escritorio ya lo tienes; ahora definimos móvil */
@media (max-width: 980px){
  .nav-toggle{ display:block; }

  /* El nav se vuelve panel plegable bajo el header */
  .header .inner{ gap:10px; }
  nav#primary-nav{
    position: fixed;
    top:64px; /* aprox alto de header; ajusta si lo necesitas */
    left:0; right:0;
    background: var(--surface);
    border-top:1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    display: grid;
    gap: 10px;
    padding: 0 18px;
    transition: max-height .28s ease, padding .28s ease;
    z-index: 9;
  }
  /* Al abrir, el panel “respira” */
  body.nav-open nav#primary-nav{
    max-height: 80vh;
    padding: 14px 18px 18px;
  }

  /* En móvil, los links ocupan todo el ancho y son más táctiles */
  nav#primary-nav a{
    padding:12px 6px;
    font-size:16px;
    border-radius:10px;
  }
  nav#primary-nav a.btn{
    width:100%;
    text-align:center;
    margin-top:6px;
  }

  /* Oculta la fila de nav de escritorio para que no duplique */
  .header nav{ margin-left: 0; }
}

/* Animación del ícono hamburguesa cuando está abierto */
body.nav-open .nav-toggle span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2){
  opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* Mejora: evita salto de contenido bajo header pegajoso en móvil */
@media (max-width: 980px){
  .header{ position: sticky; top:0; z-index: 10; }
}