
:root{--purple:#a85bd4;--purple-dark:#70208f;--pink:#efa8ce;--cream:#fff3dc;--ink:#4c3157;--soft:#fff9f3;--accent:#d56ae5}
html,body{overflow-x:hidden} body{background:#fffdf9;color:var(--ink)}
header{background:rgba(255,249,243,.94)!important;border-bottom:1px solid rgba(168,91,212,.15)}
.logo img{width:min(190px,42vw)!important;height:auto!important;max-height:100px!important;object-fit:contain!important}
.links a:hover,.links a.active{color:var(--purple-dark)!important}.pill,.btn.primary,.btn.solid{background:linear-gradient(135deg,var(--purple),var(--pink))!important;color:#fff!important;border-color:transparent!important}
.kicker,.kicker.purple{color:var(--purple-dark)!important}.soft{background:linear-gradient(180deg,#fff9f3,#fff1f8)!important}
.contact,.stat-strip{background:linear-gradient(135deg,var(--purple-dark),var(--purple),var(--pink))!important}
.hero .shade{background:linear-gradient(90deg,rgba(65,29,76,.78),rgba(65,29,76,.22))!important}
.brand-showcase{padding:28px 0;background:linear-gradient(135deg,#fff8ef,#fff0f7,#f8efff)}
.brand-showcase img{display:block;width:100%;max-width:1500px;margin:auto;border-radius:32px;box-shadow:0 18px 55px rgba(112,32,143,.16)}
.card,.cards article,.social-card,.testimonial-card{border-color:rgba(168,91,212,.16)!important;box-shadow:0 16px 36px rgba(112,32,143,.09)!important}
footer{background:#4c3157!important}.wa{background:#25d366!important}
@media(max-width:900px){.logo img{width:145px!important}.hero-copy h1{font-size:clamp(2.2rem,10vw,4.2rem)!important}.brand-showcase{padding:14px}.brand-showcase img{border-radius:20px}}

/* Inicio V2: logo protagonista y navegación adaptable */
.home-page header nav{min-height:142px}
.home-page .logo img{width:min(340px,34vw)!important;max-height:132px!important}
@media(max-width:900px){.home-page header nav{min-height:112px}.home-page .logo img{width:min(245px,58vw)!important;max-height:102px!important}.home-page .links{top:112px}}
@media(max-width:520px){.home-page header nav{min-height:96px}.home-page .logo img{width:min(205px,62vw)!important;max-height:88px!important}.home-page .links{top:96px}}

/* MASKOTIZATE V3 PREMIUM */
.home-page .hero{min-height:calc(100vh - 142px);isolation:isolate}
.home-page .hero video{opacity:1;filter:saturate(.88) brightness(.8)}
.home-page .hero .shade{background:linear-gradient(90deg,rgba(57,24,68,.82) 0%,rgba(75,37,86,.5) 46%,rgba(75,37,86,.16) 100%)!important}
.home-page .hero-copy{padding:54px 0 70px;display:flex;flex-direction:column;align-items:flex-start}
.hero-brand-logo{width:min(520px,46vw)!important;height:auto!important;max-height:none!important;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(40,13,48,.3));margin:0 0 12px -24px}
.home-page .hero-copy h1{max-width:800px;font-family:'Fredoka',sans-serif;font-size:clamp(2.8rem,5.3vw,5.5rem);font-weight:700;letter-spacing:-.04em;text-wrap:balance}
.home-page .hero-copy p{max-width:650px;font-size:clamp(1.05rem,1.7vw,1.35rem)}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.care-card{background:rgba(255,255,255,.86);border:1px solid rgba(168,91,212,.16);border-radius:34px;padding:34px;text-align:center;box-shadow:0 18px 45px rgba(112,32,143,.1);transition:transform .3s ease,box-shadow .3s ease}
.care-card:hover{transform:translateY(-8px);box-shadow:0 24px 54px rgba(112,32,143,.16)}
.care-icon{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 18px;border-radius:50%;font-size:38px;background:linear-gradient(135deg,#fff3dc,#f9d8eb,#ead7f7)}
.care-card h3{font-family:'Fredoka',sans-serif;color:var(--purple-dark);margin:0 0 12px}.care-card p{color:#6d5574;line-height:1.7;margin:0}
.logo img,.footer-logo,.loader-logo{background:transparent!important;border-radius:0!important;box-shadow:none!important}
.footer-logo{object-fit:contain!important}
@media(max-width:900px){.home-page .hero{min-height:720px}.hero-brand-logo{width:min(430px,78vw)!important;margin-left:-12px}.care-grid{grid-template-columns:1fr}.home-page .hero-copy{padding:44px 0 62px}}
@media(max-width:520px){.home-page .hero{min-height:690px}.hero-brand-logo{width:min(360px,88vw)!important;margin-left:-8px}.home-page .hero-copy h1{font-size:clamp(2.35rem,11vw,3.4rem)}.home-page .hero .shade{background:linear-gradient(180deg,rgba(57,24,68,.58),rgba(57,24,68,.82))!important}}

/* MASKOTIZATE V4 PREMIUM: logo limpio + fondo animado */
.logo img,.hero-brand-logo,.footer-logo,.loader-logo{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.home-page .hero-brand-logo{
  width:min(560px,49vw)!important;
  margin:0 0 12px -18px!important;
  filter:drop-shadow(0 14px 18px rgba(34,10,40,.28))!important;
}
.maskotizate-floaters{
  position:fixed;
  inset:0;
  z-index:8;
  pointer-events:none;
  overflow:hidden;
}
.maskotizate-floater{
  position:absolute;
  bottom:-15vh;
  opacity:0;
  filter:drop-shadow(0 5px 8px rgba(111,53,181,.12));
  animation:maskotizateRise var(--duration) linear var(--delay) infinite;
  will-change:transform,opacity;
  user-select:none;
}
.maskotizate-floater.bubble{
  width:var(--size);height:var(--size);border-radius:50%;
  border:2px solid rgba(239,168,206,.38);
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.7),rgba(234,215,247,.15) 45%,rgba(168,91,212,.08));
  backdrop-filter:blur(1px);
}
.maskotizate-floater.heart,.maskotizate-floater.paw{
  font-size:var(--size);line-height:1;color:rgba(213,106,229,.3);
}
.maskotizate-floater.paw{color:rgba(168,91,212,.28)}
@keyframes maskotizateRise{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(.75);opacity:0}
  10%{opacity:.72}
  55%{transform:translate3d(var(--drift),-58vh,0) rotate(150deg) scale(1)}
  90%{opacity:.5}
  100%{transform:translate3d(calc(var(--drift) * -0.45),-125vh,0) rotate(310deg) scale(1.15);opacity:0}
}
@media(max-width:900px){
  .home-page .hero-brand-logo{width:min(470px,82vw)!important;margin-left:-8px!important}
  .maskotizate-floater:nth-child(n+17){display:none}
}
@media(max-width:520px){
  .home-page .hero-brand-logo{width:min(390px,92vw)!important;margin-left:-4px!important}
  .maskotizate-floater:nth-child(n+13){display:none}
}
@media(prefers-reduced-motion:reduce){.maskotizate-floaters{display:none}}


/* MASKOTIZATE V5 CEO PREMIUM: hero compacto + logo marca de agua */
.home-page .hero{
  min-height:560px!important;
  height:70vh!important;
  max-height:680px!important;
  position:relative;
}
.home-page .hero video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
}
.home-page .hero-copy{
  position:relative;
  z-index:3;
  padding:48px 0 56px!important;
}
.home-page .hero-watermark{
  position:absolute;
  z-index:2;
  left:clamp(28px,8vw,150px);
  top:50%;
  width:min(720px,58vw);
  max-height:86%;
  object-fit:contain;
  transform:translateY(-50%);
  opacity:.11;
  filter:grayscale(1) brightness(2.3) contrast(.65);
  mix-blend-mode:screen;
  pointer-events:none;
  user-select:none;
}
.home-page .hero .shade{
  z-index:1;
  background:linear-gradient(90deg,rgba(57,24,68,.76) 0%,rgba(75,37,86,.43) 48%,rgba(75,37,86,.13) 100%)!important;
}
.home-page .hero-copy .kicker,
.home-page .hero-copy h1,
.home-page .hero-copy p,
.home-page .hero-copy .actions{position:relative;z-index:4}
@media(max-width:900px){
  .home-page .hero{height:68vh!important;min-height:570px!important;max-height:640px!important}
  .home-page .hero-watermark{left:50%;top:43%;width:min(650px,86vw);transform:translate(-50%,-50%);opacity:.09}
  .home-page .hero-copy{padding:42px 0 48px!important}
}
@media(max-width:520px){
  .home-page .hero{height:auto!important;min-height:560px!important;max-height:none!important}
  .home-page .hero-watermark{left:50%;top:37%;width:96vw;opacity:.075}
  .home-page .hero-copy{padding:44px 0 46px!important}
}

/* MASKOTIZATE V5.6 CEO PREMIUM: identidad visual de fotografias */
.paw-photo-frame{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:32px;
  isolation:isolate;
  box-shadow:0 22px 58px rgba(75,37,86,.16);
  transition:transform .38s ease,box-shadow .38s ease;
}
.paw-photo-frame img{
  width:100%;
  height:100%;
  min-height:420px;
  max-height:620px;
  object-fit:cover;
  object-position:center 38%;
  border-radius:inherit!important;
  box-shadow:none!important;
  transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .4s ease;
}
.paw-photo-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(168,91,212,.22);
  box-shadow:inset 0 0 0 7px rgba(255,250,253,.16);
  pointer-events:none;
  z-index:2;
}
.photo-paw{
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  color:#a85bd4;
  font-size:31px;
  line-height:1;
  opacity:.74;
  filter:drop-shadow(0 5px 8px rgba(71,27,91,.18));
  transition:transform .4s ease,opacity .4s ease;
  pointer-events:none;
}
.photo-paw-tl{top:13px;left:13px;transform:rotate(-24deg)}
.photo-paw-tr{top:13px;right:13px;transform:rotate(24deg)}
.photo-paw-bl{bottom:13px;left:13px;transform:rotate(-154deg)}
.photo-paw-br{bottom:13px;right:13px;transform:rotate(154deg)}
.paw-photo-frame:hover{transform:translateY(-7px);box-shadow:0 30px 68px rgba(75,37,86,.23)}
.paw-photo-frame:hover img{transform:scale(1.045);filter:saturate(1.04)}
.paw-photo-frame:hover .photo-paw{opacity:.95;animation:maskotizatePawBounce .8s ease both}
@keyframes maskotizatePawBounce{0%,100%{margin-top:0}45%{margin-top:-7px}70%{margin-top:2px}}
.reveal-photo{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .75s ease,transform .75s ease,box-shadow .38s ease}
.reveal-photo.photo-visible{opacity:1;transform:none}

/* Huellas corporativas en galerias y portafolio existentes */
.portfolio-card::before,.portfolio-card::after,.item::before{
  position:absolute;
  z-index:5;
  color:rgba(238,215,247,.88);
  font-size:28px;
  line-height:1;
  filter:drop-shadow(0 4px 7px rgba(42,15,54,.28));
  pointer-events:none;
  transition:transform .38s ease,opacity .38s ease;
}
.portfolio-card::before{content:"🐾";top:13px;left:13px;transform:rotate(-24deg)}
.portfolio-card::after{content:"🐾";right:13px;bottom:13px;transform:rotate(155deg)}
.portfolio-card:hover::before{transform:rotate(-12deg) scale(1.13)}
.portfolio-card:hover::after{transform:rotate(168deg) scale(1.13)}
.item::before{content:"🐾";top:13px;right:13px;transform:rotate(25deg)}

/* Clase reutilizable para futuras fotografias: envolver la imagen en .paw-photo-frame */
@media(max-width:700px){
  .paw-photo-frame{border-radius:25px}
  .paw-photo-frame img{min-height:360px;max-height:520px}
  .photo-paw{width:42px;height:42px;font-size:25px}
  .photo-paw-tl,.photo-paw-tr{top:9px}.photo-paw-bl,.photo-paw-br{bottom:9px}
  .photo-paw-tl,.photo-paw-bl{left:9px}.photo-paw-tr,.photo-paw-br{right:9px}
}
@media(prefers-reduced-motion:reduce){
  .reveal-photo{opacity:1;transform:none}
  .paw-photo-frame:hover{transform:none}
  .paw-photo-frame:hover img{transform:none}
  .paw-photo-frame:hover .photo-paw{animation:none}
}
