/* =====================================================================
   LUCÉLIA CONTABILIDADE — Upgrade premium & animaciones
   Mantiene la paleta de la marca:
   · Rojo #c3001b / #b50018 / #8a0012   · Crema #fbfaf9 #f6f4f2
   · Rosa #ffc1c9 #ffe9ec                · Verde WhatsApp #25d366
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --lc-red:#c3001b;
  --lc-red-2:#b50018;
  --lc-red-dark:#8a0012;
  --lc-soft:#e54b5f;
  --lc-pink:#ffc1c9;
  --lc-pink-bg:#ffe9ec;
  --lc-cream:#fbfaf9;
  --lc-cream-2:#f6f4f2;
  --lc-cream-3:#f5f1ef;
  --lc-sand:#e8e3df;
  --lc-line:#d7d1cd;
  --lc-ink:#111113;
  --lc-wa:#25d366;
  --lc-ease:cubic-bezier(.22,.65,.3,1);
}

/* ---------- Base / global ---------- */
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

::selection{background:rgba(181,0,24,.16)}
::-moz-selection{background:rgba(181,0,24,.16)}

::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--lc-cream-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c3001b 0%,#b50018 60%,#8a0012 100%);border-radius:8px;border:2px solid var(--lc-cream-2)}
::-webkit-scrollbar-thumb:hover{filter:brightness(1.15)}
*{scrollbar-width:thin;scrollbar-color:#b50018 #f6f4f2}

/* ---------- Sistema reveal (JS agrega [data-reveal] y .in-view) ---------- */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(30px) translateZ(0);
  transition:opacity .85s var(--lc-ease), transform .85s var(--lc-ease);
  will-change:opacity,transform;
}
html.js [data-reveal].in-view{opacity:1;transform:none}

/* ---------- Navegación / header ---------- */
.nav-wrap{height:84px;background:rgba(251,250,249,.80);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(215,209,205,.5)}
.nav-wrap::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;z-index:3;
  background:linear-gradient(90deg,#c3001b,#b50018,#8a0012);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--lc-ease);
}
.nav-wrap.scrolled::after{transform:scaleX(1)}
.nav-wrap.scrolled{box-shadow:0 12px 32px rgba(17,17,19,.14),0 1px 0 rgba(215,209,205,.5)}
.nav-wrap.scrolled nav>a{line-height:1}
.nav-wrap nav a{position:relative;padding:.4em 0;transition:color .25s}
.nav-wrap nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.1em;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#c3001b,#e54b5f);
  transform:scaleX(0);transform-origin:center;transition:transform .3s var(--lc-ease);
}
.nav-wrap nav a:hover{color:var(--lc-red-dark)}
.nav-wrap nav a:hover::after{transform:scaleX(1)}
.nav-wrap nav a:active::after{transform:scaleX(1);opacity:.6}
.nav-wrap .brand img{transition:transform .45s var(--lc-ease)}
.nav-wrap .brand:hover img{transform:scale(1.06) rotate(4deg)}
.nav-wrap .brand strong{color:var(--lc-ink);font-weight:800}
.nav-wrap .brand small{color:var(--lc-red-2);font-weight:700}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(140deg,#fbfaf9 0%,#f6f4f2 45%,#f5f1ef 100%)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,193,201,.16) 0%, transparent 55%),
    radial-gradient(circle at 6% 88%, rgba(233,227,223,.7) 0%, transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 78% 30%, rgba(197,0,27,.05) 0%, transparent 45%);
}
.hero-copy{z-index:2}
/* entrada escalonada al cargar */
.hero-copy>*{animation:hero-in .8s var(--lc-ease) both}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.18s}
.hero-copy>*:nth-child(3){animation-delay:.32s}
.hero-copy>*:nth-child(4){animation-delay:.48s}
.hero-copy>*:nth-child(5){animation-delay:.64s}
.hero-actions>*{animation:hero-in .7s var(--lc-ease) both}
.hero-actions>*:nth-child(1){animation-delay:.4s}
.hero-actions>*:nth-child(2){animation-delay:.55s}
.hero-visual{animation:hero-in 1.1s var(--lc-ease) both}
@keyframes hero-in{from{opacity:0;transform:translateY(28px) translateZ(0)}to{opacity:1;transform:none}}
@keyframes hero-in-left{from{opacity:0;transform:translateX(36px) translateZ(0)}to{opacity:1;transform:none}}

/* headline con degradado animado */
.hero-copy h1 em{
  font-style:italic;background:linear-gradient(135deg,#c3001b 0%,#b50018 40%,#e54b5f 70%,#c3001b 100%);
  background-size:220% 220%;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding-bottom:.06em;
}

/* órbita decorativa flotando */
.red-orbit{
  border-color:rgba(181,0,24,.42);
}
.red-orbit::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(255,193,201,.5);
}

/* foto del hero flotando suavemente + parallax leve */
.hero-visual>img{will-change:transform}

/* tarjeta flotante tipo glass */
.floating-card{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(246,244,242,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(20,0,0,.22), 0 2px 10px rgba(0,0,0,.08);
}

/* fila de confianza */
.trust-row span{transition:transform .3s var(--lc-ease)}
.trust-row span:hover{transform:translateY(-2px)}
.trust-row svg{transition:transform .35s var(--lc-ease)}
.trust-row span:hover svg{transform:scale(1.2)}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.hero-copy>*>*,.hero-visual,.red-orbit,.hero-visual>img,.floating-card{animation:none}
  .hero-copy h1 em,.statement strong{animation:none}
}

/* ---------- Botones premium (mantienen el rojo de marca) ---------- */
.button{
  position:relative;overflow:hidden;border:0;border-radius:12px;
  transition:transform .3s var(--lc-ease), box-shadow .3s var(--lc-ease), background .3s, color .3s, filter .3s;
}
.button::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 22%, rgba(255,255,255,.16) 48%, transparent 74%);
  transform:translateX(-130%);animation:sheen 3.2s ease-in-out infinite;
}
.button.primary{
  color:#fff;background:linear-gradient(135deg,#c3001b 0%,#b50018 55%,#8a0012 100%);
  box-shadow:0 10px 26px rgba(138,0,18,.35), inset 0 1px 0 rgba(255,255,255,.16);
}
.button.primary:hover{transform:translateY(-3px);filter:brightness(1.07);box-shadow:0 16px 34px rgba(138,0,18,.5)}
.button.primary:active{transform:translateY(0);filter:brightness(.96)}
.button.secondary{
  color:var(--lc-red-2);border:2px solid rgba(181,0,24,.45);
  background:rgba(255,233,236,.35);
}
.button.secondary:hover{background:rgba(255,233,236,.85);color:var(--lc-red-dark);transform:translateY(-2px)}
.button.secondary::after{display:none}
.button.white{
  color:var(--lc-red);background:#fff;border:0;border-radius:12px;
  box-shadow:0 12px 30px rgba(20,0,0,.25), inset 0 1px 0 rgba(255,255,255,.8);
}
.button.white::after{
  background:linear-gradient(115deg, transparent 22%, rgba(255,255,255,.85) 48%, transparent 74%);
}
.button.white:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(20,0,0,.32)}
.button:focus-visible{outline:3px solid rgba(255,193,201,.9);outline-offset:2px}
@keyframes sheen{0%{transform:translateX(-130%)}55%{transform:translateX(130%)}100%{transform:translateX(160%)}}
@media (prefers-reduced-motion:reduce){.button::after,.nav-cta::before{animation:none}}

/* ---------- Statement ---------- */
.statement{position:relative;overflow:hidden;background:linear-gradient(135deg,#0d0d0f,#111113)}
.statement::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%, rgba(229,75,95,.14) 0%, transparent 60%),
             radial-gradient(circle at 15% 100%, rgba(37,211,102,.07) 0%, transparent 45%);
}
.statement p{max-width:38em;margin:0 auto;padding:40px 8vw}
.statement strong{
  background:linear-gradient(135deg,#e54b5f 0%,#ffc1c9 45%,#e54b5f 100%);
  background-size:220% 220%;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:grad-shift 6s ease-in-out infinite;
}

/* ---------- Servicios ---------- */
.section-heading .kicker,.section-heading h2{transition:transform .5s var(--lc-ease)}
.service-grid{gap:12px}
.service-card{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;
  box-shadow:0 8px 30px rgba(20,0,0,.04);
  transition:transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .5s var(--lc-ease), background .4s, color .3s, border-color .3s;
}
.service-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,#c3001b,#e54b5f,#ffc1c9);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--lc-ease);
}
.service-card:hover{
  background:linear-gradient(150deg,#c3001b 0%,#b50018 55%,#8a0012 100%);
  color:#fff;
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 24px 48px rgba(138,0,18,.4), 0 8px 18px rgba(138,0,18,.22), inset 0 1px 0 rgba(255,255,255,.2);
  border-color:transparent;
}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{transition:transform .4s var(--lc-ease), color .3s}
.service-card:hover .service-icon{transform:scale(1.18) rotate(-7deg);color:#ffc1c9}
.service-number{
  font-weight:800;letter-spacing:.08em;
  background:linear-gradient(135deg,#c3001b,#e54b5f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:color .3s;
}
.service-card:hover .service-number{background:none;color:rgba(255,255,255,.85)}
.service-card h3{transition:color .3s}
.service-card p{transition:color .3s}
.service-card a{position:relative;transition:gap .3s, color .3s}
.service-card a svg{transition:transform .3s var(--lc-ease)}
.service-card:hover a svg{transform:translateX(4px)}
/* fondo decorativo sutil en hover */
.service-card::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.service-card:hover::after{opacity:1}

/* ---------- Sobre ---------- */
.about-photo{position:relative}
.about-photo::before{
  content:"";position:absolute;inset:18px 14px 18px 14px;border-radius:18px;
  background:linear-gradient(135deg,#f6f4f2,#e8e3df);
  transform:rotate(-2.5deg);z-index:0;
}
.about-photo .photo-frame{position:relative;z-index:1;transition:transform .5s var(--lc-ease)}
.about-photo:hover .photo-frame{transform:rotate(.6deg)}
.about-photo .photo-frame img{transition:transform 1.4s var(--lc-ease)}
.about-photo:hover .photo-frame img{transform:scale(1.05)}
.about-seal{
  box-shadow:0 18px 40px rgba(138,0,18,.35);
  transition:transform .4s var(--lc-ease);
  z-index:2;
}
.about-seal::after{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  border:2px dashed rgba(255,193,201,.75);
  animation:seal-spin 22s linear infinite;pointer-events:none;
}
.about-seal:hover{transform:scale(1.06)}
@keyframes seal-spin{to{transform:rotate(360deg)}}
.principles>div{transition:transform .35s var(--lc-ease)}
.principles>div:hover{transform:translateX(6px)}
.principles svg{transition:transform .35s var(--lc-ease), color .3s}
.principles>div:hover svg{transform:scale(1.2) rotate(-8deg);color:var(--lc-red-dark)}
.text-link{position:relative;transition:color .3s}
.text-link svg{transition:transform .3s var(--lc-ease)}
.text-link:hover{color:var(--lc-red-dark)}
.text-link:hover svg{transform:translateX(5px)}
.text-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#c3001b,#e54b5f);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--lc-ease);
}
.text-link:hover::after{transform:scaleX(1)}

/* ---------- Contato ---------- */
.contact{position:relative}
.contact::before{
  content:"";position:absolute;top:10%;left:-110px;width:460px;height:460px;border-radius:50%;
  border:1px solid rgba(255,193,201,.35);
  background:radial-gradient(circle, rgba(255,193,201,.10) 0%, transparent 68%);
  pointer-events:none;z-index:1;
}
.contact-copy,.contact-info{z-index:2}
.contact-info>div{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:18px 22px;backdrop-filter:blur(6px);
  transition:transform .35s var(--lc-ease), background .3s, box-shadow .3s;
}
.contact-info>div:hover{transform:translateY(-4px);background:rgba(255,255,255,.13);box-shadow:0 14px 30px rgba(20,0,0,.18)}
.contact-info svg{transition:transform .35s var(--lc-ease)}
.contact-info>div:hover svg{transform:scale(1.15)}

/* ---------- Footer ---------- */
footer{position:relative}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#c3001b,#e54b5f,#ffc1c9);
}
.footer-brand img{transition:transform .4s var(--lc-ease)}
.footer-brand:hover img{transform:scale(1.06) rotate(4deg)}
footer>small{letter-spacing:.12em}

/* ---------- Botão flutuante WhatsApp (a estrela) ---------- */
.whatsapp-float{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #3be477 0%, #25d366 45%, #1fae55 100%);
  box-shadow:0 12px 30px rgba(20,20,20,.30), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(24px) scale(.5);pointer-events:none;
  transition:opacity .45s var(--lc-ease), transform .55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s;
  animation: wa-pulse 2.5s infinite;
}
.whatsapp-float.is-visible{opacity:1;transform:none;pointer-events:auto}
/* logo real de WhatsApp via CSS (ocultamos el ícono interno del template) */
.whatsapp-float svg{display:none}
.whatsapp-float::before{
  content:"";position:absolute;inset:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23fff'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zM223.9 414.7c-32 0-64-8.6-92-25.1l-6.6-3.9-68.1 17.8 18.3-66.4-4.3-6.9c-17.5-27.1-27-58.8-27-91.4 0-103.5 84.3-187.8 187.8-187.8 50.1 0 97.2 19.5 132.7 55s55 82.5 55 132.6c0 103.5-84.3 187.8-187.7 187.8zm102.8-140.2c-5.6-2.8-33.3-16.4-38.5-18.3-5.2-1.9-9-2.8-12.8 2.8-3.8 5.6-14.6 18.3-17.9 22.1-3.3 3.8-6.6 4.3-12.2 1.4-5.6-2.8-23.7-8.7-45.2-27.9-16.8-15-28.1-33.5-31.4-39.1-3.3-5.6-.4-8.6 2.4-11.4 2.5-2.5 5.6-6.6 8.5-9.9 2.8-3.3 3.8-5.6 5.6-9.4 1.9-3.8 .9-7.1-.5-9.9-1.4-2.8-12.8-30.9-17.6-42.3-4.6-11.1-9.3-9.6-12.8-9.8-3.3-.2-7.1-.2-10.9-.2-3.8 0-10 1.4-15.2 7.1-5.2 5.6-19.9 19.5-19.9 47.4s20.4 54.9 23.2 58.6c2.8 3.8 40 61.1 96.9 85.6 13.5 5.8 24.1 9.3 32.3 11.9 13.6 4.3 26 3.7 35.8 2.2 11.1-1.7 33.3-13.6 38-26.7 4.7-13.1 4.7-24.4 3.3-26.7-1.4-2.3-5.2-3.8-10.8-6.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation:wa-in 1s var(--lc-ease) both;
}
/* anillo de pulso */
.whatsapp-float::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;z-index:-1;
  background:rgba(37,211,102,.55);
  animation:wa-ring 2.6s var(--lc-ease) infinite;
}
.whatsapp-float:hover{
  transform:translateY(-6px) scale(1.08) !important;
  box-shadow:0 18px 40px rgba(31,174,85,.6), 0 0 24px rgba(37,211,102,.4);
  animation-play-state: paused;
}
.whatsapp-float:focus-visible{outline:3px solid rgba(37,211,102,.6);outline-offset:3px}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 0 0 20px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes wa-ring{
  0%{transform:scale(.85);opacity:.8}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
@keyframes wa-in{
  from{opacity:0;transform:scale(.4) rotate(-20deg)}
  to{opacity:1;transform:none}
}
/* tooltip */
.wa-tip{
  position:absolute;right:calc(100% + 16px);top:50%;transform:translateY(-50%) translateX(12px);
  background:rgba(255,255,255,.94);color:#111;font-size:14px;font-weight:700;white-space:nowrap;
  padding:10px 16px;border-radius:12px;
  box-shadow:0 12px 28px rgba(20,20,20,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6);
  opacity:0;pointer-events:none;transition:opacity .4s var(--lc-ease), transform .4s var(--lc-ease);
}
.wa-tip::after{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:rgba(255,255,255,.94);
}
.whatsapp-float:hover .wa-tip,.whatsapp-float.tip-once .wa-tip{
  opacity:1;transform:translateY(-50%) translateX(0);
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-float,.whatsapp-float::after,.whatsapp-float::before{animation:none}
}

/* ---------- Stagger (retraso en cascada) ---------- */
html.js .service-card[data-reveal]:nth-child(2){transition-delay:.08s}
html.js .service-card[data-reveal]:nth-child(3){transition-delay:.16s}
html.js .service-card[data-reveal]:nth-child(4){transition-delay:.24s}
html.js .service-card[data-reveal]:nth-child(5){transition-delay:.32s}
html.js .service-card[data-reveal]:nth-child(6){transition-delay:.40s}
html.js .service-card[data-reveal]:nth-child(7){transition-delay:.48s}
html.js .service-card[data-reveal]:nth-child(8){transition-delay:.56s}
html.js .principles>div[data-reveal]:nth-child(2){transition-delay:.12s}
html.js .principles>div[data-reveal]:nth-child(3){transition-delay:.24s}
html.js .contact-info>div[data-reveal]:nth-child(2){transition-delay:.14s}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .whatsapp-float{width:56px;height:56px;right:18px;bottom:18px}
  .wa-tip{display:none}
  .hero-copy>*{animation-duration:.6s}
  .service-card{border-radius:16px}
  .button,.nav-cta{border-radius:10px}
  .contact-info>div{padding:14px 16px}
}
@media (max-width:560px){
  .whatsapp-float{width:54px;height:54px}
  .hero-copy{padding-top:70px}
}