/* ============================================================
   Nicracan — Componentes compartidos entre landings
   (Adiestramiento, Peluquería...). Requiere brand.css antes.
   ============================================================ */

.wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:2;}
@media(min-width:700px){ .wrap{padding:0 48px;} }
section{position:relative; padding:96px 0;}
@media(min-width:900px){ section{padding:140px 0;} }
.ink-bg{background:var(--ink); color:var(--bone);}
.bone-bg{background:var(--bone); color:var(--ink);}

/* ---------- eyebrow / stamp badge ---------- */
.eyebrow{
  display:flex; align-items:center; gap:16px;
  margin-bottom:48px;
}
@media(min-width:900px){ .eyebrow{margin-bottom:64px; gap:18px;} }
.stamp{
  width:52px; height:52px; flex:none; position:relative;
}
@media(min-width:900px){ .stamp{width:64px; height:64px;} }
.stamp svg{width:100%; height:100%;}
.eyebrow-text{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.20em;
  font-size:12px; font-weight:500; opacity:0.75;
}
@media(min-width:900px){ .eyebrow-text{font-size:13px; letter-spacing:0.22em;} }
.eyebrow-text span{display:block; font-size:10px; letter-spacing:0.16em; opacity:0.6; margin-top:4px;}
@media(min-width:900px){ .eyebrow-text span{font-size:11px; letter-spacing:0.18em;} }

.rule{height:1px; background:var(--hair); width:100%; margin:40px 0;}
@media(min-width:900px){ .rule{margin:56px 0;} }
.ink-bg .rule{background:var(--hair-dark);}

.lead{font-size:17px; max-width:640px; opacity:0.85;}
@media(min-width:900px){ .lead{font-size:19px;} }

/* ---------- narrative tag ---------- */
.story-tag{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:19px; color:var(--gold-deep); margin-bottom:22px; letter-spacing:0.01em;
}
@media(min-width:900px){ .story-tag{font-size:23px; margin-bottom:28px;} }
.ink-bg .story-tag{color:var(--gold-light);}

/* ---------- scroll thread ---------- */
.scroll-thread{
  position:fixed; left:0; top:0; bottom:0; width:3px; z-index:80;
  background:rgba(140,132,120,0.16);
}
.scroll-thread-fill{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:linear-gradient(to bottom, var(--gold), var(--gold-deep));
  transform:scaleY(0); transform-origin:top;
  transition:transform .1s linear;
}

/* ---------- fluid blends between color sections ---------- */
.blend-from-ink::before, .blend-from-bone::before{
  content:''; position:absolute; top:0; left:0; right:0; height:100px; z-index:1;
  pointer-events:none;
}
@media(min-width:900px){ .blend-from-ink::before, .blend-from-bone::before{height:150px;} }
.blend-from-ink::before{background:linear-gradient(to bottom, var(--ink), transparent);}
.blend-from-bone::before{background:linear-gradient(to bottom, var(--bone), transparent);}

/* ---------- staggered children reveal ---------- */
.cards > .reveal, .pillars > .reveal, .diff-grid > .reveal, .reviews > .reveal{
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ================= hero (compartido entre landings) ================= */
.hero-inner > *{opacity:0;}
.hero-inner.loaded > *{ animation:heroIn .95s cubic-bezier(.16,.8,.28,1) forwards; }
.hero-inner.loaded > *:nth-child(1){animation-delay:.05s;}
.hero-inner.loaded > *:nth-child(2){animation-delay:.25s;}
.hero-inner.loaded > *:nth-child(3){animation-delay:.45s;}
.hero-inner.loaded > *:nth-child(4){animation-delay:.65s;}
.hero-inner.loaded > *:nth-child(5){animation-delay:.85s;}
.hero-inner.loaded > *:nth-child(6){animation-delay:1.05s;}
@keyframes heroIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }

.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 80px;
  background:var(--ink);
  color:var(--bone);
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:-15%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, rgba(199,174,106,0.20), transparent 55%);
  transform:translate(var(--mx,0px), var(--my,0px));
  transition:transform .3s ease-out;
}
.hero-inner{max-width:760px; position:relative; z-index:1;}
.hero .kicker{
  font-family:'Oswald',sans-serif; letter-spacing:0.32em; font-size:11px;
  color:var(--gold); opacity:0.9; margin-bottom:36px; font-weight:500;
}
@media(min-width:900px){ .hero .kicker{font-size:13px; letter-spacing:0.36em; margin-bottom:44px;} }
.hero h1{
  font-size:34px; letter-spacing:0.02em; color:var(--white); line-height:1.18;
}
@media(min-width:600px){ .hero h1{font-size:46px;} }
@media(min-width:900px){ .hero h1{font-size:58px; letter-spacing:0.01em;} }
.hero .tagline{
  font-size:20px; margin-top:36px; color:var(--gold-light); max-width:520px;
  margin-left:auto; margin-right:auto; line-height:1.5;
}
@media(min-width:900px){ .hero .tagline{font-size:25px; margin-top:44px;} }
.hero .sub{
  font-family:'Jost',sans-serif; font-size:15px;
  color:var(--bone); opacity:0.62; margin-top:28px; font-weight:300; line-height:1.6;
  max-width:460px; margin-left:auto; margin-right:auto;
}
.scroll-cue{
  margin-top:64px; display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--bone); opacity:0.55; text-decoration:none;
}
.scroll-cue svg{width:14px; height:20px; animation:bob 2.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ================= accordion cards (problemas / servicios) ================= */
.cards{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:56px;
}
@media(min-width:640px){ .cards{grid-template-columns:1fr 1fr; gap:20px;} }
@media(min-width:1020px){ .cards{grid-template-columns:1fr 1fr 1fr; gap:22px;} }

.card{
  background:var(--white);
  border:1px solid rgba(13,13,13,0.08);
  border-radius:2px;
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.card[open]{box-shadow:0 18px 40px -18px rgba(13,13,13,0.28);}
.card:hover{transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(13,13,13,0.22);}
.card > summary{
  list-style:none; cursor:pointer;
  padding:26px 24px;
  display:flex; align-items:flex-start; gap:16px;
}
.card > summary::-webkit-details-marker{display:none;}
.card-icon{
  width:44px; height:44px; flex:none; position:relative;
}
.card-icon svg, .card-icon img{width:100%; height:100%;}
.card-head{flex:1;}
.card-head h3{
  font-size:16px; letter-spacing:0.03em; margin-bottom:6px;
}
.card-head p{
  font-size:14.5px; color:var(--graphite); opacity:0.8; line-height:1.5;
}
.card-toggle{
  flex:none; width:22px; height:22px; margin-top:4px;
  color:var(--gold-deep);
  transition:transform .3s ease;
}
.card[open] .card-toggle{transform:rotate(45deg);}
.card-body{
  padding:0 24px 30px 84px;
  font-size:14.5px;
}
@media(max-width:420px){ .card-body{padding:0 20px 26px 20px;} }
.card-body .sintoma{color:var(--graphite); line-height:1.65; margin-bottom:16px;}
.card-body .causa{
  padding:16px 18px; background:var(--bone); border-left:2px solid var(--gold);
  font-size:14px; line-height:1.6; color:var(--ink); margin-bottom:18px;
}
.card-body .causa b{
  display:block; font-family:'Oswald',sans-serif; font-size:10.5px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:6px;
}
.quote{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px;
  line-height:1.5; color:var(--ink);
}
.quote-attr{
  margin-top:10px; font-family:'Jost',sans-serif; font-style:normal; font-size:12.5px;
  color:var(--stone); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.quote-attr a{
  color:var(--gold-deep); text-decoration:none; border-bottom:1px solid var(--hair);
}
.quote-attr a:hover{border-color:var(--gold-deep);}
.stars{color:var(--gold); letter-spacing:1px; font-size:12px;}

/* ================= prueba social: rating + reviews ================= */
.rating-badge{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px; border:1px solid rgba(13,13,13,0.12);
  background:var(--white); margin-bottom:44px; text-decoration:none;
}
.rating-badge .num{font-family:'Oswald'; font-size:22px; font-weight:600;}
.rating-badge .meta{font-size:12.5px; color:var(--stone); line-height:1.3;}
.rating-badge .meta b{color:var(--ink);}

.reviews{
  display:grid; grid-template-columns:1fr; gap:18px;
}
@media(min-width:680px){ .reviews{grid-template-columns:1fr 1fr; gap:20px;} }
@media(min-width:1020px){ .reviews{grid-template-columns:repeat(3,1fr);} }
.review{
  background:var(--white); border:1px solid rgba(13,13,13,0.08);
  padding:24px; font-size:14px; line-height:1.6; color:var(--graphite);
}
.review .stars{display:block; margin-bottom:10px;}
.review .who{
  margin-top:14px; font-family:'Oswald'; font-size:11.5px; letter-spacing:0.06em;
  color:var(--ink); text-transform:none; font-weight:500;
}

.see-all{
  position:relative; display:inline-block; margin-top:36px; font-size:13.5px;
  text-decoration:none; color:var(--ink); padding-bottom:4px;
}
.see-all::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-deep); transform:scaleX(.3); transform-origin:left; opacity:.5;
  transition:transform .35s cubic-bezier(.16,.8,.28,1), opacity .35s ease;
}
.see-all:hover::after{transform:scaleX(1); opacity:1;}

/* ================= diferenciación ================= */
.diff-grid{
  display:grid; grid-template-columns:1fr; gap:20px; margin-top:56px;
}
@media(min-width:760px){ .diff-grid{grid-template-columns:1fr 1fr; gap:22px;} }
.diff-item{
  position:relative; overflow:hidden;
  padding:32px 28px; border-radius:2px;
  background:rgba(243,239,230,0.035);
  border:1px solid rgba(199,174,106,0.16);
  transition:transform .35s cubic-bezier(.16,.8,.28,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.diff-item::before{
  content:''; position:absolute; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  transition:width .7s cubic-bezier(.16,.8,.28,1);
}
.diff-item.in::before{ width:100%; transition-delay:calc(var(--i, 0) * 90ms + .25s); }
.diff-item::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(199,174,106,0.10), transparent);
  transform:skewX(-15deg); transition:left .75s ease; pointer-events:none;
}
.diff-item:hover{
  transform:translateY(-4px);
  border-color:rgba(199,174,106,0.42);
  background:rgba(243,239,230,0.06);
  box-shadow:0 18px 36px -22px rgba(0,0,0,0.5);
}
.diff-item:hover::after{ left:130%; }
.diff-item h3{font-size:15.5px; letter-spacing:0.02em; margin-bottom:10px; text-transform:none; font-family:'Oswald'; font-weight:600;}
.diff-item p{font-size:14.5px; color:var(--graphite); opacity:0.85; line-height:1.6;}

/* ================= CTA final ================= */
.cta-section{
  text-align:center; background:var(--ink); color:var(--bone);
  background-image:radial-gradient(ellipse at 50% 120%, rgba(199,174,106,0.14), transparent 55%);
}
.cta-inner{max-width:600px; margin:0 auto;}
.cta-section h2{color:var(--white); font-size:30px;}
@media(min-width:900px){ .cta-section h2{font-size:40px;} }
.cta-section .accent{
  display:block; margin-top:26px; font-size:19px; color:var(--gold-light);
}
@media(min-width:900px){ .cta-section .accent{font-size:23px;} }
.trust-bar{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px; margin-top:38px;
  font-family:'Oswald'; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold-light); opacity:.85;
}
@media(min-width:900px){ .trust-bar{font-size:12.5px; gap:18px;} }
.trust-divider{ width:1px; height:14px; background:var(--hair-dark); }
.whatsapp-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  margin-top:48px; padding:18px 36px;
  background:var(--gold); color:var(--ink);
  text-decoration:none; font-family:'Oswald'; font-size:14px;
  letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  border-radius:2px; transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.whatsapp-btn:hover{background:var(--gold-light); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(199,174,106,0.6);}
.whatsapp-btn::after{
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
  transform:skewX(-18deg); transition:left .65s ease;
}
.whatsapp-btn:hover::after{left:130%;}
.whatsapp-btn svg{width:20px; height:20px;}
.cta-fineprint{
  margin-top:24px; font-size:12.5px; opacity:0.5; max-width:380px; margin-left:auto; margin-right:auto;
}

/* ================= footer ================= */
footer{
  background:var(--ink); color:var(--stone); text-align:center;
  padding:48px 24px 40px; font-size:12.5px; border-top:1px solid var(--hair-dark);
}
footer .fname{
  font-family:'Oswald'; letter-spacing:0.1em; font-size:13px; color:var(--bone); margin-bottom:8px;
}
footer .footer-logo{
  display:block; height:34px; width:auto; margin:0 auto 14px;
}
footer .footer-links{
  margin-top:18px; display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap; font-size:12px;
}
footer .footer-links a{
  color:var(--stone); text-decoration:none; letter-spacing:0.04em;
  border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
}
footer .footer-links a:hover{ color:var(--gold-light); border-color:var(--hair-dark); }
footer .footer-links .footer-divider{ width:1px; height:11px; background:var(--hair-dark); }

/* ================= navegación rápida (galería, blog, contacto) ================= */
.site-nav{
  position:fixed; top:18px; left:18px; z-index:95;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:5px 14px; max-width:calc(100vw - 36px);
  padding:6px 18px 6px 6px; border-radius:20px;
  background:rgba(13,13,13,0.82); border:1px solid var(--hair-dark);
  backdrop-filter:blur(6px);
  transition:border-color .3s ease, background .3s ease;
}
@media(min-width:900px){ .site-nav{ top:24px; left:24px; padding:7px 22px 7px 7px; gap:6px 18px; border-radius:24px; } }
.site-nav:hover{ border-color:var(--gold); background:rgba(13,13,13,0.92); }

.site-nav-home{
  display:flex; align-items:center; gap:9px; text-decoration:none; flex:none;
}
.site-nav-home img{
  width:30px; height:30px; border-radius:50%; flex:none;
  transition:transform .4s cubic-bezier(.16,.8,.28,1);
}
@media(min-width:900px){ .site-nav-home img{ width:34px; height:34px; } }
.site-nav-home:hover img, .site-nav-home:focus-visible img{ transform:rotate(-10deg) scale(1.06); }

.site-nav-divider{ width:1px; height:12px; background:var(--hair-dark); flex:none; }

.site-nav a{
  font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase;
  font-weight:500; color:var(--bone); opacity:.8; text-decoration:none; white-space:nowrap;
  transition:color .25s ease, opacity .25s ease;
}
@media(min-width:900px){ .site-nav a{ font-size:11.5px; letter-spacing:0.16em; } }
.site-nav a:hover, .site-nav a:focus-visible{ color:var(--gold-light); opacity:1; }

@media (prefers-reduced-motion: reduce){
  .site-nav, .site-nav-home img, .site-nav a{ transition:none; }
  .site-nav-home:hover img{ transform:none; }
}

/* ================= floating WhatsApp ================= */
.floating-wa{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:56px; height:56px; border-radius:50%;
  background:var(--ink); border:1.4px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; opacity:0; pointer-events:none;
  transform:translateY(12px);
  transition:opacity .35s ease, transform .35s ease;
}
.floating-wa.show{opacity:1; pointer-events:auto; transform:translateY(0); animation:waPulse 2.8s ease-in-out infinite;}
@keyframes waPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(199,174,106,0.38);}
  50%{box-shadow:0 0 0 9px rgba(199,174,106,0);}
}
.floating-wa svg{width:26px; height:26px; color:var(--gold);}

/* ================= reveal on scroll ================= */
.reveal{
  opacity:0; transform:translateY(24px) scale(.98);
  transition:opacity .85s cubic-bezier(.16,.8,.28,1), transform .85s cubic-bezier(.16,.8,.28,1);
}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .whatsapp-btn:hover{transform:none;}
  .whatsapp-btn::after{display:none;}
  .floating-wa.show{animation:none;}
  .scroll-thread{display:none;}
  .diff-item::before{width:100% !important; transition:none !important;}
  .diff-item::after{display:none;}
  .diff-item:hover{transform:none;}
  .scroll-cue svg{animation:none;}
  .hero-inner > *{opacity:1; animation:none;}
  .hero::before{transition:none;}
}