/* =========================================================
   VARIABLES / RESET
========================================================= */
:root{
  --color-bg:#fff; --color-text:#000; --color-muted:#444;
  --color-card:#fff; --color-soft:#f7f7f8; --color-accent:#ff1e80;
  --shadow-1:0 4px 12px rgba(0,0,0,.08);
  --border:#e8e8e8; --danger:#ef4444; --success:#12b886;
}
.dark{
  --color-bg:#0b0b0c; --color-text:#f2f2f2; --color-muted:#cfcfcf;
  --color-card:#141417; --color-soft:#0f0f12; --border:#232323;
  --shadow-1:0 6px 14px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
section{scroll-margin-top:90px}

/* =========================================================
   HEADER / NAV
========================================================= */
header{
  position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  background:#000;padding:10px 16px 10px 50px;z-index:1000;
  box-shadow:0 0 20px rgba(255,30,128,.25);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-name{color:#fff;font-weight:800;letter-spacing:.03em;text-shadow:0 0 12px rgba(255,30,128,.18)}

.brand-logo{
  --logo-size:56px;
  --logo-tilt-x:0deg;
  --logo-tilt-y:0deg;
  position:relative;
  width:var(--logo-size);
  height:var(--logo-size);
  display:grid;
  place-items:center;
  flex-shrink:0;
  isolation:isolate;
  transform-style:preserve-3d;
}
.brand-logo--sm{--logo-size:48px}
.brand-logo img{
  width:calc(var(--logo-size) - 10px);
  height:calc(var(--logo-size) - 10px);
  border-radius:14px;
  object-fit:cover;
  background:#111;
  position:relative;
  z-index:2;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 10px 30px rgba(255,30,128,.28),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.15);
  transform:translateZ(14px) rotateX(var(--logo-tilt-x)) rotateY(var(--logo-tilt-y));
  animation:logoFloat 4.8s ease-in-out infinite, logoPulse 3.4s ease-in-out infinite;
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
.brand-logo::before,
.brand-logo::after,
.logo-halo,
.logo-orbit,
.logo-sheen{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none}
.brand-logo::before{
  inset:-4px;
  background:conic-gradient(from 0deg, rgba(255,30,128,.95), rgba(255,125,179,.55), rgba(255,255,255,.18), rgba(255,30,128,.95));
  filter:blur(10px);
  opacity:.65;
  z-index:0;
  animation:logoSpin 8s linear infinite;
}
.brand-logo::after{
  inset:-1px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), inset 0 0 16px rgba(255,255,255,.06);
  z-index:1;
}
.logo-halo{
  inset:-12px;
  border-radius:24px;
  background:radial-gradient(circle, rgba(255,30,128,.34) 0%, rgba(255,30,128,.12) 40%, rgba(255,30,128,0) 72%);
  filter:blur(10px);
  z-index:0;
  animation:logoHalo 3s ease-in-out infinite;
}
.logo-orbit{
  inset:auto;
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #ff64ad 65%, rgba(255,30,128,.15));
  box-shadow:0 0 16px rgba(255,77,153,.75);
  z-index:3;
}
.orbit-a{animation:logoOrbitA 6s linear infinite}
.orbit-b{animation:logoOrbitB 8s linear infinite reverse}
.logo-sheen{inset:5px;overflow:hidden;z-index:4}
.logo-sheen::before{
  content:"";
  position:absolute;
  top:-40%;left:-140%;
  width:60%;height:200%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.3), rgba(255,255,255,0));
  transform:rotate(24deg);
  animation:logoSheen 4.8s ease-in-out infinite;
}
.brand:hover .brand-logo img,
.brand-logo:hover img{
  filter:brightness(1.08) saturate(1.08);
  box-shadow:
    0 14px 38px rgba(255,30,128,.38),
    0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.2);
}
@keyframes logoFloat{
  0%,100%{transform:translateZ(14px) translateY(0) rotateX(var(--logo-tilt-x)) rotateY(var(--logo-tilt-y)) scale(1)}
  50%{transform:translateZ(14px) translateY(-4px) rotateX(var(--logo-tilt-x)) rotateY(var(--logo-tilt-y)) scale(1.03)}
}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(255,30,128,0))}50%{filter:drop-shadow(0 0 16px rgba(255,30,128,.45))}}
@keyframes logoSpin{to{transform:rotate(360deg)}}
@keyframes logoHalo{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes logoSheen{0%,18%{left:-140%}35%,100%{left:170%}}
@keyframes logoOrbitA{
  0%{transform:translate(8px,-4px)}
  25%{transform:translate(50px,6px)}
  50%{transform:translate(38px,48px)}
  75%{transform:translate(-4px,40px)}
  100%{transform:translate(8px,-4px)}
}
@keyframes logoOrbitB{
  0%{transform:translate(36px,-8px) scale(.9)}
  25%{transform:translate(54px,28px) scale(1)}
  50%{transform:translate(12px,50px) scale(.85)}
  75%{transform:translate(-8px,16px) scale(1)}
  100%{transform:translate(36px,-8px) scale(.9)}
}
nav ul{display:flex;gap:28px;list-style:none}
nav a{color:#fff;font-weight:700;position:relative}
nav a:after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--color-accent);transition:width .25s}
nav a:hover:after{width:100%}
.header-right{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;flex-direction:column;cursor:pointer}
.menu-toggle span{width:25px;height:3px;background:#fff;margin:4px 0}
@media(max-width:840px){
  nav ul{position:absolute;top:70px;right:0;width:240px;background:#000;border-left:1px solid #111;flex-direction:column;align-items:center;padding:18px;display:none}
  nav ul.active{display:flex}
  .menu-toggle{display:flex}
}
.theme-toggle{background:transparent;border:1px solid #333;color:#fff;padding:6px 10px;border-radius:22px;cursor:pointer;display:flex;align-items:center;gap:8px}
.theme-toggle .label{display:none}
@media(min-width:1024px){.theme-toggle .label{display:inline;font-weight:700}}
@media(max-width:560px){
  .brand-logo{--logo-size:50px}
  .brand-logo--sm{--logo-size:44px}
  .brand-name{font-size:.98rem}
}

/* =========================================================
   HERO con VIDEO
========================================================= */
.hero{position:relative;height:100vh;margin-top:70px}
.video-container{position:absolute;inset:0;z-index:-1}
.video-container video{width:100%;height:100%;object-fit:cover}
.hero .overlay{position:absolute;inset:0;background:rgba(0,0,0,.25);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:20px}
.hero h1{font-size:3rem;color:var(--color-accent)}

/* =========================================================
   QUIÉNES SOMOS / ELEGIRNOS
========================================================= */
.quienes{display:flex;flex-wrap:wrap;gap:40px;padding:60px 10%;align-items:center}
.quienes .media{flex:1 1 420px;min-width:280px;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.12), 0 10px 28px rgba(255,30,128,.10);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(135deg, rgba(255,30,128,.08), rgba(255,255,255,.04)), var(--color-card);border:1px solid rgba(255,30,128,.10);position:relative;isolation:isolate;transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.quienes .media::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 20% 20%, rgba(255,30,128,.18), transparent 36%), radial-gradient(circle at 80% 80%, rgba(0,138,255,.14), transparent 34%);opacity:.9;pointer-events:none;z-index:0;transition:transform .45s ease, opacity .35s ease}
.quienes .media img{width:100%;height:100%;max-height:100%;object-fit:contain;position:relative;z-index:1;border-radius:14px;transition:transform .45s ease, filter .45s ease;filter:drop-shadow(0 12px 22px rgba(0,0,0,.10))}
.quienes .media:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.16), 0 14px 30px rgba(255,30,128,.14);border-color:rgba(255,30,128,.22)}
.quienes .media:hover::before{transform:scale(1.06) rotate(2deg);opacity:1}
.quienes .media:hover img{transform:scale(1.03);filter:drop-shadow(0 16px 28px rgba(0,0,0,.14)) saturate(1.03)}
@media(max-width:768px){.quienes .media{aspect-ratio:auto;min-height:320px;padding:14px}.quienes .media img{height:auto;max-height:100%;object-fit:contain}}
.quienes .texto{flex:1 1 420px;min-width:280px}
.quienes h2{color:var(--color-accent);margin-bottom:14px}
.etapas{list-style:none;display:grid;gap:14px;margin-top:16px}
.etapas li{display:grid;grid-template-columns:36px 1fr;gap:12px;background:var(--color-card);padding:12px 14px;border-radius:10px;box-shadow:var(--shadow-1);border:1px solid var(--border)}
.etapas i{color:var(--color-accent)}

.etapas-premium{position:relative}
.etapas-premium li{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,30,128,.06), transparent 58%), var(--color-card);
  border-left:4px solid rgba(255,30,128,.58);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.etapas-premium li::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.22) 48%, transparent 62% 100%);
  transform:translateX(-130%);
  transition:transform .65s ease;
  pointer-events:none;
}
.etapas-premium li:hover{
  transform:translateY(-6px) scale(1.01);
  border-left-color:var(--color-accent);
  box-shadow:0 18px 38px rgba(255,30,128,.12), var(--shadow-1);
}
.etapas-premium li:hover::before{transform:translateX(130%)}
.etapas-premium li i{
  font-size:1.15rem;
  display:grid;
  place-items:center;
  width:36px;height:36px;
  border-radius:10px;
  background:rgba(255,30,128,.1);
  box-shadow:inset 0 0 0 1px rgba(255,30,128,.12);
  animation:etapaPulse 3s ease-in-out infinite;
}
.etapas-premium li strong{color:var(--color-text)}
@keyframes etapaPulse{
  0%,100%{transform:scale(1); box-shadow:inset 0 0 0 1px rgba(255,30,128,.12), 0 0 0 rgba(255,30,128,0)}
  50%{transform:scale(1.06); box-shadow:inset 0 0 0 1px rgba(255,30,128,.18), 0 0 20px rgba(255,30,128,.16)}
}

.elegirnos{background:var(--color-soft);padding:60px 10%;text-align:center}
.elegirnos h2{color:var(--color-accent);margin-bottom:26px}
.razones{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.razon{background:var(--color-card);padding:22px;border-radius:12px;box-shadow:var(--shadow-1)}

/* =========================================================
   TESTIMONIOS (centrado y 1 por vez)
========================================================= */
.testimonios{padding:60px 10%;text-align:center}
.testimonios h2{color:var(--color-accent);margin-bottom:24px}

/* contenedor más angosto y centrado */
.testi-wrapper{
  position:relative;
  max-width:720px;           /* ancho cómodo y centrado */
  margin:0 auto;
}
.testi-viewport{
  overflow:hidden;
  width:100%;
}

/* ¡sin gap! para que el translateX(-N*100%) alinee exacto */
.testi-track{
  display:flex;
  gap:0;                      /* <— clave para 1 por vez */
  transition:transform .45s ease;
  will-change:transform;
}

.testimonio{
  flex:0 0 100%;              /* cada slide ocupa 100% del viewport */
  background:var(--color-card);
  padding:24px;
  border-radius:12px;
  box-shadow:var(--shadow-1);
  color:var(--color-muted);
  text-align:left;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:14px;
  align-items:start;
  min-height:170px;
  margin:0 auto;
}

.avatar{
  width:64px;height:64px;border-radius:50%;
  overflow:hidden;box-shadow:0 0 0 3px rgba(255,20,147,.2)
}
.avatar img{width:100%;height:100%;object-fit:cover}

.testi-content h4{color:var(--color-text);margin-bottom:6px}
.stars{color:#FFC107;margin-bottom:8px;font-size:1rem}

.testi-controls{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:12px
}
.testi-btn{
  background:#000;color:#fff;border:none;border-radius:999px;padding:10px 14px;cursor:pointer;transition:.2s
}
.testi-btn:hover{background:var(--color-accent)}
.testi-dots{display:flex;gap:8px;align-items:center}
.testi-dot{width:8px;height:8px;border-radius:50%;background:#bbb;opacity:.6;transition:.25s}
.testi-dot.active{background:var(--color-accent);opacity:1;transform:scale(1.2)}

/* En móviles, centra contenido dentro de la tarjeta */
@media (max-width:560px){
  .testimonio{grid-template-columns:1fr;text-align:center}
  .avatar{margin:0 auto 8px}
}

/* =========================================================
   SERVICIOS (ANIMADO)
========================================================= */
.servicios{
  position:relative;padding:80px 10%;text-align:center;overflow:hidden;
  background:fixed center/cover,var(--color-soft);
  background-image:
    linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='600' height='600' fill='%23ffffff'/%3E%3Cg stroke='%23008aff' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M0 60 H600 M0 120 H600 M0 180 H600 M0 240 H600 M0 300 H600 M0 360 H600 M0 420 H600 M0 480 H600 M0 540 H600'/%3E%3Cpath d='M60 0 V600 M120 0 V600 M180 0 V600 M240 0 V600 M300 0 V600 M360 0 V600 M420 0 V600 M480 0 V600 M540 0 V600'/%3E%3C/g%3E%3C/svg%3E");
}
.dark .servicios{background-image:
  linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)),
  url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='600' height='600' fill='%230b0b0c'/%3E%3Cg stroke='%234ea1ff' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M0 60 H600 M0 120 H600 M0 180 H600 M0 240 H600 M0 300 H600 M0 360 H600 M0 420 H600 M0 480 H600 M0 540 H600'/%3E%3Cpath d='M60 0 V600 M120 0 V600 M180 0 V600 M240 0 V600 M300 0 V600 M360 0 V600 M420 0 V600 M480 0 V600 M540 0 V600'/%3E%3C/g%3E%3C/svg%3E")}
.servicios:before{
  content:"";position:absolute;inset:-200% -50% auto -50%;height:400%;
  background:linear-gradient(120deg,transparent 0 40%,rgba(255,30,128,.08) 48%,transparent 56% 100%);
  transform:rotate(3deg);animation:shimmer 8s linear infinite
}
@keyframes shimmer{from{transform:translateX(-20%) rotate(3deg)}to{transform:translateX(20%) rotate(3deg)}}
.servicios h2{color:var(--color-accent);margin-bottom:36px;position:relative;z-index:1}
.servicios-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.servicio{
  background:linear-gradient(180deg,var(--color-card),transparent),var(--color-card);
  padding:20px;border-radius:16px;box-shadow:var(--shadow-1);border:1px solid var(--border);
  transform:translateY(28px) scale(.98);opacity:0;filter:blur(6px);
  transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .4s, filter .6s, opacity .6s;
  transform-origin:50% 80%;
}
.servicio.in-view{ transform:translateY(0) scale(1);opacity:1;filter:blur(0) }
.servicio:hover{box-shadow:0 14px 40px rgba(0,0,0,.2)}
.servicio h3{margin:14px 0 8px;color:var(--color-text)}
.img-box{overflow:hidden;border-radius:12px;transform:translateZ(0)}
.img-box img{
  width:100%;height:190px;object-fit:cover;border-radius:12px;cursor:zoom-in;
  transform:scale(1.04);filter:contrast(.96) saturate(1) brightness(.98);
  transition:transform 1.2s ease, filter .8s ease;
}
.servicio:hover .img-box img{transform:scale(1.16) rotate(.3deg);filter:contrast(1.05) saturate(1.05) brightness(1.03)}
.servicio.tilt{transform-style:preserve-3d;perspective:800px}
.servicio.tilt:hover{transform:translateY(-4px)}
.servicio.tilt .img-box{transition:transform .15s}
.servicio.tilt:hover .img-box{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* =========================================================
   PORTAFOLIO — Galería con filtros
========================================================= */
.portafolio{padding:60px 10%;text-align:center}
.portafolio h2{color:var(--color-accent);margin-bottom:18px}

.filtros{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px
}
.filtro-btn{
  background:#000;color:#fff;border:none;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:700;
  transition:transform .15s, background .2s, opacity .2s
}
.filtro-btn:hover{transform:translateY(-1px)}
.filtro-btn.active{background:var(--color-accent)}

.galeria-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
@media(max-width:1200px){.galeria-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.galeria-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.galeria-grid{grid-template-columns:1fr}}

.gal-item{
  position:relative;
  background:var(--color-card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.gal-item img{
  width:100%; height:240px; object-fit:cover;
  display:block;
  transition:transform .8s ease, filter .4s ease;
}
.gal-item:hover img{ transform:scale(1.06); filter:brightness(1.05) }

.gal-item .overlay{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));
  padding:12px;
  transform:translateY(40%); opacity:.0; transition:.28s ease;
}
.gal-item:hover .overlay{ transform:translateY(0%); opacity:1 }

.btn-primary, .btn-light{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:8px; font-weight:700; border:none; cursor:pointer;
  text-decoration:none;
}
.btn-primary{ background:var(--color-accent); color:#fff }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-light{ background:#fff; color:#000 }
.btn-light:hover{ filter:brightness(.95) }

/* ocultar items por filtro */
.gal-item.hidden{ display:none !important }

/* =========================================================
   CONTACTO (completo)
========================================================= */
.contacto{padding:60px 10%;background:var(--color-soft)}
.contacto h2{color:var(--color-accent);text-align:center;margin-bottom:28px}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
@media(max-width:960px){.contact-grid{grid-template-columns:1fr}}
.card{background:var(--color-card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-1)}
.contact-form{padding:20px}
.field{display:flex;flex-direction:column;margin-bottom:14px}
.field label{font-weight:600;margin-bottom:6px}
.field input,.field textarea{padding:12px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--color-text)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.privacy{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--color-muted);margin:8px 0}
.btn-primary[type="submit"]{margin-top:4px}
.form-status{margin-top:10px;font-weight:600}
.contact-info{padding:20px;display:grid;gap:12px}
.info-item{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.info-item i{color:var(--color-accent);font-size:1.1rem;line-height:1;margin-top:3px}
.map{margin-top:20px;height:380px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.wa-inline{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:10px 12px;background:#25D366;color:#fff;border-radius:8px;font-weight:700}

/* =========================================================
   FOOTER
========================================================= */
footer{background:#0a0a0a;color:#eaeaea;padding:40px 10% 24px}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px}
@media(max-width:900px){.footer-top{grid-template-columns:1fr}}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{color:#cfcfcf}
.footer-links a:hover{color:#fff}
.footer-social{display:flex;gap:12px;margin-top:8px}
.footer-social a{display:inline-flex;width:38px;height:38px;border-radius:50%;background:#111;color:#fff;align-items:center;justify-content:center}
.footer-bottom{border-top:1px solid var(--border);margin-top:18px;padding-top:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#bdbdbd}

/* =========================================================
   LIGHTBOX / WHATSAPP
========================================================= */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1200px,95vw);max-height:85vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.lightbox .close{position:absolute;top:16px;right:20px;font-size:2rem;color:#fff;cursor:pointer;line-height:1}

.whatsapp-float{position:fixed;right:20px;bottom:90px;z-index:2400;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px rgba(0,0,0,.25)}
.whatsapp-float i{font-size:28px}



/* =========================================================
   HERO
========================================================= */
.hero{position:relative;height:68vh;margin-top:70px;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.45)),url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221920%22 height=%221080%22%3E%3Crect width=%221920%22 height=%221080%22 fill=%23eaf6ff/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 fill=%23008aff%22 font-size=%2260%22 text-anchor=%22middle%22 font-family=%22Segoe UI, Arial%22%3ETur%C3%ADstico%3C/text%3E%3C/svg%3E') center/cover}
.hero .content{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;text-align:center;color:#fff;padding:20px}
.hero h1{font-size:3rem;color:var(--color-accent)}
.hero p{opacity:.95;max-width:900px

  /* Botones del hero */
.hero .content { text-align:center; }
.hero .cta-group{
  margin-top:18px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Si no tienes estas clases, descomenta este bloque básico
.btn-primary, .btn-light{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none;
}
.btn-primary{ background:var(--color-accent); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-light{ background:#fff; color:#000; }
.btn-light:hover{ filter:brightness(.95); }
*/




/* =========================================================
   MOTION FX — CARDS EN TODA LA PÁGINA
========================================================= */
.fx-card{
  --card-rx:0deg;
  --card-ry:0deg;
  --mx:50%;
  --my:50%;
  position:relative;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease,
    filter .35s ease;
  will-change:transform;
}
.fx-card::before,
.fx-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.fx-card::before{
  background:radial-gradient(circle at var(--mx) var(--my), rgba(255,30,128,.18), transparent 44%);
  opacity:0;
  transition:opacity .28s ease;
}
.fx-card::after{
  inset:0;
  border:1px solid rgba(255,30,128,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  opacity:.95;
  transition:opacity .28s ease, border-color .28s ease;
}
.fx-card:hover{
  transform:perspective(1100px) translateY(-10px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) scale(1.01);
  box-shadow:
    0 18px 38px rgba(0,0,0,.16),
    0 10px 24px rgba(255,30,128,.12);
  filter:saturate(1.03);
}
.fx-card:hover::before{opacity:1}
.fx-card:hover::after{border-color:rgba(255,30,128,.22)}
.dark .fx-card:hover{
  box-shadow:
    0 18px 38px rgba(0,0,0,.36),
    0 10px 24px rgba(255,30,128,.16);
}

.fx-reveal{
  opacity:0;
  filter:blur(6px);
  transform:translateY(28px) scale(.985);
  transition:
    opacity .65s ease,
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}
.fx-reveal.is-visible{
  opacity:1;
  filter:blur(0);
  transform:translateY(0) scale(1);
}

/* Afinación por tipo de card */
.etapas li.fx-card,
.razon.fx-card,
.testimonio.fx-card,
.gal-item.fx-card,
.card.fx-card{
  overflow:hidden;
}
.etapas li.fx-card:hover{transform:perspective(1100px) translateY(-8px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) scale(1.01)}
.razon.fx-card:hover,
.testimonio.fx-card:hover,
.card.fx-card:hover,
.gal-item.fx-card:hover{transform:perspective(1100px) translateY(-10px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) scale(1.012)}

/* Servicios ya tenían motion; solo se potencian */
.servicio.fx-card:hover{
  box-shadow:
    0 20px 44px rgba(0,0,0,.18),
    0 12px 26px rgba(255,30,128,.12);
}

/* Microinteracciones extra para reforzar el look general */
.btn-primary,
.btn-light,
.filtro-btn,
.wa-inline,
.footer-social a,
.whatsapp-float{
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease;
}
.btn-primary:hover,
.btn-light:hover,
.filtro-btn:hover,
.wa-inline:hover,
.footer-social a:hover,
.whatsapp-float:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

@media (prefers-reduced-motion: reduce){
  .fx-card,
  .fx-reveal,
  .fx-card::before,
  .fx-card::after,
  .btn-primary,
  .btn-light,
  .filtro-btn,
  .wa-inline,
  .footer-social a,
  .whatsapp-float{
    transition:none !important;
    animation:none !important;
  }
  .fx-reveal{opacity:1;filter:none;transform:none}
  .fx-card:hover{transform:none}
}