/* ============================================================
   SERENA SPA & WELLNESS — Punta del Este, Uruguay (DEMO)
   Modo blanco · Responsive fluido sin media queries (clamp + auto-fit)
   ============================================================ */

:root{
  --teal:#0d9488;
  --teal-light:#2dd4bf;
  --violet:#7c3aed;
  --violet-light:#a78bfa;
  --coral:#f43f5e;
  --coral-light:#fb7185;
  --amber:#f59e0b;
  --sky:#0ea5e9;
  --ink:#0f172a;
  --slate:#475569;
  --mist:#f1f5f9;
  --white:#ffffff;
  --grad-main:linear-gradient(120deg,var(--teal) 0%,var(--sky) 30%,var(--violet) 65%,var(--coral) 100%);
  --grad-soft:linear-gradient(120deg,#ccfbf1,#e0f2fe 35%,#ede9fe 70%,#ffe4e6);
  --shadow-sm:0 2px 10px rgba(15,23,42,.07);
  --shadow-md:0 10px 30px rgba(15,23,42,.10);
  --shadow-lg:0 24px 50px rgba(15,23,42,.16);
  --radius:18px;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scroll-padding-top:6rem}

body{
  font-family:var(--font);
  background:var(--white);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}

.container{width:min(1180px,92%);margin-inline:auto}

.icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.22em}

/* ---------- Barra demo superior ---------- */
.demo-bar{
  background:var(--grad-main);
  background-size:300% 300%;
  animation:gradFlow 10s ease infinite;
  color:#fff;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
  padding:.45rem 1rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  text-align:center;
}
.demo-bar a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(15,23,42,.06);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:var(--shadow-md)}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.9rem 1.5rem;
  flex-wrap:wrap;
  padding:.85rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1.3rem;
  font-weight:800;
}
.brand-mark{
  width:2.4rem;
  height:2.4rem;
  border-radius:12px;
  background:var(--grad-main);
  background-size:200% 200%;
  animation:gradFlow 8s ease infinite;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 6px 16px rgba(124,58,237,.35);
  transition:transform .35s ease;
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.brand-name{
  background:var(--grad-main);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:.2rem .35rem;
  flex-wrap:wrap;
  justify-content:center;
}
.nav-links a{
  font-size:.92rem;
  font-weight:600;
  color:var(--slate);
  padding:.45rem .75rem;
  border-radius:999px;
  position:relative;
  transition:color .25s ease,background .25s ease,transform .25s ease;
}
.nav-links a:hover{
  color:var(--violet);
  background:#f5f3ff;
  transform:translateY(-2px);
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:var(--grad-main);
  background-size:200% 200%;
  color:#fff !important;
  padding:.55rem 1.15rem !important;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(244,63,94,.30);
  transition:transform .25s ease,box-shadow .25s ease,background-position .5s ease;
}
.nav-cta:hover{
  background-position:100% 50%;
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 26px rgba(124,58,237,.40);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--font);
  font-size:1rem;
  font-weight:700;
  padding:.9rem 1.8rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.btn:hover::after{transform:translateX(120%)}
.btn-primary{
  background:var(--grad-main);
  background-size:200% 200%;
  animation:gradFlow 9s ease infinite;
  color:#fff;
  box-shadow:0 12px 28px rgba(244,63,94,.35);
}
.btn-primary:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 38px rgba(124,58,237,.45)}
.btn-ghost{
  background:#fff;
  color:var(--violet);
  border:2px solid var(--violet-light);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{
  transform:translateY(-4px);
  background:#f5f3ff;
  border-color:var(--violet);
  box-shadow:var(--shadow-md);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);
  overflow:hidden;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  z-index:-1;
  animation:blobFloat 14s ease-in-out infinite alternate;
}
.blob-1{width:420px;height:420px;background:#99f6e4;top:-120px;left:-120px}
.blob-2{width:380px;height:380px;background:#ddd6fe;top:20%;right:-140px;animation-delay:-4s}
.blob-3{width:320px;height:320px;background:#fecdd3;bottom:-100px;left:30%;animation-delay:-8s}

.hero-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:#fff;
  border:1px solid #ede9fe;
  color:var(--violet);
  font-size:.85rem;
  font-weight:700;
  padding:.45rem 1rem;
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  animation:floatY 5s ease-in-out infinite;
}
.hero h1{
  font-size:clamp(2.3rem,5.5vw,4rem);
  line-height:1.12;
  font-weight:800;
  margin:1.1rem 0 1.2rem;
  letter-spacing:-.02em;
}
.grad-text{
  background:var(--grad-main);
  background-size:200% 200%;
  animation:gradFlow 7s ease infinite;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  color:var(--slate);
  font-size:clamp(1rem,1.4vw,1.15rem);
  max-width:34rem;
  margin-bottom:1.8rem;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem}

.hero-stats{
  display:flex;
  gap:clamp(1.2rem,3vw,2.5rem);
  flex-wrap:wrap;
}
.stat b{
  display:block;
  font-size:clamp(1.5rem,2.5vw,2rem);
  background:var(--grad-main);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat span{font-size:.85rem;color:var(--slate);font-weight:600}

.hero-visual{position:relative;justify-self:center;width:min(100%,480px)}
.hero-img-wrap{
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  position:relative;
  transform:rotate(2deg);
  transition:transform .5s ease;
}
.hero-visual:hover .hero-img-wrap{transform:rotate(0) scale(1.02)}
.hero-img-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,rgba(13,148,136,.18),transparent 45%,rgba(244,63,94,.16));
  z-index:1;
  pointer-events:none;
}
.float-card{
  position:absolute;
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:.8rem 1.1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.85rem;
  font-weight:700;
  animation:floatY 6s ease-in-out infinite;
  z-index:2;
}
.float-card small{display:block;font-weight:500;color:var(--slate)}
.fc-1{top:8%;left:-4%;color:var(--amber)}
.fc-2{bottom:6%;right:-4%;animation-delay:-3s;color:var(--teal)}
.fc-icon{
  width:2.3rem;height:2.3rem;border-radius:12px;
  display:grid;place-items:center;color:#fff;flex:none;
}
.fc-1 .fc-icon{background:linear-gradient(135deg,var(--amber),var(--coral))}
.fc-2 .fc-icon{background:linear-gradient(135deg,var(--teal),var(--sky))}

/* ---------- Cinta marquee ---------- */
.ribbon{
  background:var(--grad-main);
  background-size:300% 300%;
  animation:gradFlow 12s ease infinite;
  color:#fff;
  overflow:hidden;
  padding:.85rem 0;
  transform:rotate(-1deg) scale(1.02);
  box-shadow:var(--shadow-md);
}
.ribbon-track{
  display:flex;
  align-items:center;
  gap:2.8rem;
  width:max-content;
  animation:marquee 26s linear infinite;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.85rem;
  white-space:nowrap;
}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-track span{display:inline-flex;align-items:center;gap:.6rem}

/* ---------- Secciones ---------- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-alt{background:linear-gradient(180deg,#fff, #f8fafc 20%, #f8fafc 80%, #fff)}
.section-head{text-align:center;max-width:44rem;margin:0 auto clamp(2.2rem,5vw,3.5rem)}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  background:#f0fdfa;
  border:1px solid #ccfbf1;
  padding:.4rem 1rem;
  border-radius:999px;
  margin-bottom:1rem;
}
.section-head h2{
  font-size:clamp(1.8rem,3.6vw,2.7rem);
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:.8rem;
}
.section-head p{color:var(--slate)}

/* ---------- Servicios ---------- */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1.6rem;
}
.service-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid #f1f5f9;
  transition:transform .4s ease,box-shadow .4s ease;
  display:flex;
  flex-direction:column;
}
.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.service-media{position:relative;overflow:hidden;aspect-ratio:3/2}
.service-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.service-card:hover .service-media img{transform:scale(1.1) rotate(1deg)}
.service-icon{
  position:absolute;
  bottom:-1.3rem;
  left:1.3rem;
  width:3.2rem;
  height:3.2rem;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:var(--shadow-md);
  z-index:2;
  transition:transform .4s ease;
}
.service-card:hover .service-icon{transform:rotate(-10deg) scale(1.12)}
.si-teal{background:linear-gradient(135deg,var(--teal),var(--teal-light))}
.si-violet{background:linear-gradient(135deg,var(--violet),var(--violet-light))}
.si-coral{background:linear-gradient(135deg,var(--coral),var(--coral-light))}
.si-amber{background:linear-gradient(135deg,var(--amber),#fbbf24)}
.si-sky{background:linear-gradient(135deg,var(--sky),#7dd3fc)}
.si-rose{background:linear-gradient(135deg,#db2777,#f472b6)}
.service-body{padding:2.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.service-body h3{font-size:1.15rem}
.service-body p{color:var(--slate);font-size:.93rem;flex:1}
.service-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:700;
  font-size:.9rem;
  color:var(--violet);
  transition:gap .3s ease,color .3s ease;
}
.service-link:hover{gap:.8rem;color:var(--coral)}

/* ---------- Nosotros ---------- */
.about-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.about-visual{position:relative;width:min(100%,470px);justify-self:center}
.about-visual::before{
  content:"";
  position:absolute;
  inset:-1rem 1.5rem 1.5rem -1rem;
  background:var(--grad-soft);
  border-radius:28px;
  z-index:-1;
  transition:transform .5s ease;
}
.about-visual:hover::before{transform:rotate(-3deg)}
.about-visual img{border-radius:24px;box-shadow:var(--shadow-lg);width:100%}
.about-badge{
  position:absolute;
  bottom:-1.2rem;
  right:-.8rem;
  background:var(--grad-main);
  background-size:200% 200%;
  animation:gradFlow 8s ease infinite;
  color:#fff;
  border-radius:18px;
  padding:1rem 1.4rem;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.about-badge b{display:block;font-size:1.9rem;line-height:1.1}
.about-badge span{font-size:.8rem;font-weight:600}
.about-copy h2{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.02em;margin:.9rem 0 1rem;line-height:1.18}
.about-copy>p{color:var(--slate);margin-bottom:1.4rem}
.check-list{display:grid;gap:.85rem;margin-bottom:1.8rem}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  font-weight:600;
  color:var(--ink);
  transition:transform .3s ease;
}
.check-list li:hover{transform:translateX(6px)}
.check-ico{
  width:1.5rem;height:1.5rem;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--teal),var(--sky));
  color:#fff;display:grid;place-items:center;margin-top:.15rem;
}

/* ---------- Galería ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1.1rem;
}
.gallery-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:1/1;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery-item:hover img{transform:scale(1.12) rotate(-1deg)}
.gallery-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(15,23,42,.75));
  opacity:0;
  transition:opacity .4s ease;
  display:flex;
  align-items:flex-end;
  padding:1.1rem;
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  gap:.5rem;
}
.gallery-item:hover .gallery-overlay{opacity:1}

/* ---------- Precios ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:1.6rem;
  align-items:stretch;
}
.price-card{
  background:#fff;
  border-radius:22px;
  padding:2.2rem 1.8rem;
  border:2px solid #f1f5f9;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  position:relative;
  transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.price-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--violet-light)}
.price-card.popular{
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad-main) border-box;
  box-shadow:var(--shadow-md);
}
.popular-tag{
  position:absolute;
  top:-1rem;
  left:50%;
  transform:translateX(-50%);
  background:var(--grad-main);
  background-size:200% 200%;
  animation:gradFlow 6s ease infinite;
  color:#fff;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.4rem 1.1rem;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(244,63,94,.35);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  white-space:nowrap;
}
.price-card h3{font-size:1.2rem}
.price-value{font-size:2.4rem;font-weight:800;letter-spacing:-.03em}
.price-value small{font-size:.95rem;font-weight:600;color:var(--slate)}
.price-features{display:grid;gap:.7rem;flex:1}
.price-features li{display:flex;gap:.6rem;align-items:flex-start;color:var(--slate);font-size:.93rem}
.price-features .check-ico{width:1.3rem;height:1.3rem;margin-top:.2rem}

/* ---------- Testimonios ---------- */
.testi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1.6rem;
}
.testi-card{
  background:#fff;
  border-radius:var(--radius);
  padding:1.8rem;
  box-shadow:var(--shadow-sm);
  border:1px solid #f1f5f9;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
  transition:transform .4s ease,box-shadow .4s ease;
}
.testi-card:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:var(--shadow-lg)}
.stars{display:flex;gap:.2rem;color:var(--amber)}
.testi-card blockquote{color:var(--slate);font-size:.95rem;font-style:italic;flex:1}
.testi-author{display:flex;align-items:center;gap:.8rem}
.testi-author img{width:3rem;height:3rem;border-radius:50%;object-fit:cover;border:2px solid var(--violet-light)}
.testi-author b{display:block;font-size:.95rem}
.testi-author span{font-size:.8rem;color:var(--slate)}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--grad-main);
  background-size:300% 300%;
  animation:gradFlow 12s ease infinite;
  border-radius:28px;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem);
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.cta-banner::before,
.cta-banner::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}
.cta-banner::before{width:260px;height:260px;top:-110px;left:-80px;animation:floatY 8s ease-in-out infinite}
.cta-banner::after{width:200px;height:200px;bottom:-90px;right:-60px;animation:floatY 9s ease-in-out infinite reverse}
.cta-banner h2{font-size:clamp(1.7rem,3.5vw,2.6rem);margin-bottom:.8rem;letter-spacing:-.02em}
.cta-banner p{opacity:.92;max-width:36rem;margin:0 auto 1.8rem}
.btn-white{
  background:#fff;
  color:var(--violet);
  box-shadow:0 14px 30px rgba(15,23,42,.25);
}
.btn-white:hover{transform:translateY(-4px) scale(1.04);color:var(--coral)}

/* ---------- Contacto ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(2rem,4vw,3rem);
  align-items:start;
}
.info-cards{display:grid;gap:1rem}
.info-card{
  display:flex;
  align-items:center;
  gap:1rem;
  background:#fff;
  border:1px solid #f1f5f9;
  border-radius:16px;
  padding:1.1rem 1.3rem;
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
}
.info-card:hover{transform:translateX(8px);box-shadow:var(--shadow-md)}
.info-card b{display:block;font-size:.95rem}
.info-card span{color:var(--slate);font-size:.88rem}
.info-ico{
  width:3rem;height:3rem;border-radius:14px;flex:none;
  display:grid;place-items:center;color:#fff;
}
.contact-form{
  background:#fff;
  border-radius:22px;
  padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow-md);
  border:1px solid #f1f5f9;
  display:grid;
  gap:1rem;
}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1rem}
.contact-form label{font-weight:700;font-size:.85rem;display:grid;gap:.4rem}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:var(--font);
  font-size:.95rem;
  padding:.8rem 1rem;
  border-radius:12px;
  border:2px solid #e2e8f0;
  background:#f8fafc;
  color:var(--ink);
  width:100%;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.contact-form textarea{resize:vertical;min-height:7rem}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--violet);
  background:#fff;
  box-shadow:0 0 0 4px rgba(124,58,237,.14);
}
.form-note{font-size:.8rem;color:var(--slate);display:flex;gap:.5rem;align-items:flex-start}
.form-ok{
  display:none;
  background:#f0fdfa;
  border:1px solid var(--teal-light);
  color:var(--teal);
  font-weight:700;
  border-radius:12px;
  padding:.9rem 1.1rem;
  align-items:center;
  gap:.6rem;
}
.form-ok.show{display:flex}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:clamp(2rem,5vw,4rem);
  background:#f8fafc;
  border-top:4px solid transparent;
  border-image:var(--grad-main) 1;
  padding:clamp(2.5rem,5vw,4rem) 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:2rem;
  padding-bottom:2.5rem;
}
.footer-grid h4{font-size:1rem;margin-bottom:1rem}
.footer-grid p{color:var(--slate);font-size:.9rem}
.footer-links{display:grid;gap:.55rem}
.footer-links a{
  color:var(--slate);
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:color .25s ease,transform .25s ease;
}
.footer-links a:hover{color:var(--violet);transform:translateX(5px)}
.social-row{display:flex;gap:.7rem;margin-top:1.1rem}
.social-row a{
  width:2.5rem;height:2.5rem;border-radius:12px;
  display:grid;place-items:center;
  background:#fff;color:var(--slate);
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease,color .3s ease,box-shadow .3s ease;
}
.social-row a:hover{transform:translateY(-5px) rotate(-6deg);color:var(--coral);box-shadow:var(--shadow-md)}
.footer-bottom{
  border-top:1px solid #e2e8f0;
  padding:1.2rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem 1.5rem;
  flex-wrap:wrap;
  font-size:.85rem;
  color:var(--slate);
}
.made-by{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--ink)}
.made-by .icon{color:var(--coral);animation:heartBeat 1.6s ease infinite}

/* ---------- Páginas legales ---------- */
.legal-hero{
  background:var(--grad-soft);
  padding:clamp(2.5rem,6vw,4.5rem) 0;
  text-align:center;
}
.legal-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.02em}
.legal-hero p{color:var(--slate);margin-top:.6rem}
.legal-body{padding:clamp(2.5rem,5vw,4rem) 0;max-width:52rem;margin-inline:auto}
.legal-body h2{font-size:1.35rem;margin:2rem 0 .7rem;color:var(--ink)}
.legal-body p,.legal-body li{color:var(--slate);font-size:.97rem;margin-bottom:.7rem}
.legal-body ul{list-style:disc;padding-left:1.4rem}
.demo-alert{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  background:#fffbeb;
  border:2px solid #fde68a;
  border-radius:16px;
  padding:1.2rem 1.4rem;
  margin-bottom:2rem;
}
.demo-alert .icon{color:var(--amber);width:1.6em;height:1.6em;margin-top:.1rem}
.demo-alert p{margin:0;color:#92400e;font-weight:600;font-size:.95rem}

/* ---------- Animaciones de entrada (scroll reveal) ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease,transform .7s ease;
}
.js .reveal.in{opacity:1;transform:none}
.js .reveal:nth-child(2){transition-delay:.1s}
.js .reveal:nth-child(3){transition-delay:.2s}
.js .reveal:nth-child(4){transition-delay:.3s}
.js .reveal:nth-child(5){transition-delay:.15s}
.js .reveal:nth-child(6){transition-delay:.25s}

/* ---------- Keyframes ---------- */
@keyframes gradFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes blobFloat{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(40px,-30px) scale(1.15)}
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes heartBeat{
  0%,100%{transform:scale(1)}
  25%{transform:scale(1.25)}
  40%{transform:scale(1)}
  60%{transform:scale(1.18)}
}