/* ===========================
   Foto Fiesta Divina — Neon
=========================== */
:root{
  --bg:#0b0b12;
  --ink:#eef0ff;
  --muted:#a1a4c1;

  --neon:#ff4bd7;
  --violet:#9b6dff;
  --cyan:#00e7c6;

  --line:rgba(255,255,255,.12);
  --soft:rgba(255,255,255,.05);

  --radius-lg:26px;
  --shadow:0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);

  --h1:clamp(34px,6vw,68px);
  --h2:clamp(22px,3.5vw,40px);
  --speed:.55s;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Skip link accesible */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;z-index:2001;background:#000;color:#fff;padding:8px 12px;border-radius:8px}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* BG animado */
.bg{position:fixed;inset:0;pointer-events:none;z-index:-2}
.fx-1{
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(255,75,215,.20), transparent 60%),
    radial-gradient(700px 400px at 10% 0%, rgba(0,231,198,.18), transparent 60%),
    radial-gradient(600px 360px at 50% 110%, rgba(155,109,255,.18), transparent 60%);
  filter:saturate(120%);
}
.fx-2::before{
  content:""; position:absolute; left:8%; bottom:8%;
  width:42vmax; height:42vmax; border-radius:50%;
  background:conic-gradient(from 180deg, rgba(255,75,215,.12), rgba(0,231,198,.12), transparent 30%);
  filter:blur(60px); animation:spin 26s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}
.scanlines{position:fixed;inset:0;background:repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);mix-blend-mode:overlay;pointer-events:none;z-index:-1}

/* Layout base */
.container{width:min(1200px,92%);margin-inline:auto}
.glass{backdrop-filter:saturate(160%) blur(12px); background:rgba(10,10,18,.55)}
.stroke{color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.55)}
.accent{background:linear-gradient(135deg,var(--cyan),var(--neon) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}

/* Header */
header{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center}
.logo-small{height: clamp(28px, 5.5vw, 56px);width:auto;object-fit:contain;filter: drop-shadow(0 0 6px rgba(255,75,215,.35));transition: transform .25s ease, filter .25s ease}
@media (hover:hover){
  .brand:hover .logo-small{transform: translateY(-1px) scale(1.03);filter: drop-shadow(0 0 12px rgba(255,75,215,.6))}
}

/* Navbar */
.menu{display:flex;gap:16px;align-items:center}
.menu a{font-weight:700;color:transparent;background:linear-gradient(90deg, var(--neon), var(--violet));-webkit-background-clip:text;background-clip:text;position:relative;transition: filter .2s ease, text-shadow .2s ease}
.menu a:hover,.menu a:focus{ text-shadow:0 0 6px rgba(255,75,215,.55), 0 0 16px rgba(155,109,255,.45); filter:saturate(120%) }
.menu a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--neon), var(--cyan)); box-shadow:0 0 10px rgba(255,75,215,.6); transition: width .25s ease}
.menu a:hover::after{ width:100% }
.pill{padding:8px 12px;border-radius:999px;border:1px solid var(--line)}
.menu-toggle{display:none;position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--soft)}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:18px;height:2px;background:#fff;border-radius:2px;transition:var(--speed) ease}
.menu-toggle span::before{translate:-50% calc(-50% - 6px)}
.menu-toggle span::after{translate:-50% calc(-50% + 6px)}
.menu-toggle.open span{background:transparent}
.menu-toggle.open span::before{transform:rotate(45deg) translate(3px,-3px)}
.menu-toggle.open span::after{transform:rotate(-45deg) translate(3px,3px)}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:#fff;font-weight:800;transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background: radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,.08), transparent 40%), linear-gradient(135deg,var(--neon),#ff7be2); border:0; box-shadow:0 12px 34px rgba(255,75,215,.45), 0 0 22px rgba(255,75,215,.55), inset 0 0 12px rgba(255,255,255,.15); animation:btnPulse 3.2s ease-in-out infinite}
.btn-ghost{background:transparent;border:1px solid var(--line)}
@keyframes btnPulse{50%{box-shadow:0 12px 34px rgba(255,75,215,.35), 0 0 30px rgba(255,75,215,.55), inset 0 0 18px rgba(255,255,255,.22)}}

/* Hero */
.hero{padding:clamp(70px,8vw,100px) 0 40px}
.grid-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.kicker{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);padding:8px 12px;border-radius:999px;color:var(--cyan);background:rgba(0,231,198,.08);font-weight:700}
.title{font-size:var(--h1);line-height:1.02;margin:16px 0 12px;font-weight:800;letter-spacing:-.6px}
.lead{color:var(--muted);font-size:clamp(15px,2vw,18px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.ticks{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0 0;color:var(--muted);padding:0}
.ticks li{list-style:none}
.hero-media{display:grid;place-items:center}
.hero-logo{width:86%;height:auto;filter: drop-shadow(0 0 16px rgba(255,75,215,.55)) drop-shadow(0 0 36px rgba(155,109,255,.35))}

/* Secciones */
section{padding:70px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.section-title{font-size:var(--h2);margin:0}
.section-sub{color:var(--muted);max-width:760px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:auto -20% -36% -20%;height:220px;background:radial-gradient(60% 50% at 50% 50%, rgba(255,75,215,.28), transparent 60%);filter:blur(38px)}
.card h3{margin:8px 0 6px}
.tag{font-size:12px;border:0;background:linear-gradient(135deg,var(--cyan),var(--neon));padding:4px 10px;border-radius:999px;color:#fff;display:inline-block;margin-bottom:8px}

/* Imágenes de cards */
.card-media{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;display:block;border-radius:16px;border:1px solid var(--line);background:#0d0d14}

/* Incluye */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{padding:16px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line);position:relative;overflow:hidden}
.feature .ico{width:28px;height:28px;border-radius:10px;margin-bottom:8px;background:linear-gradient(135deg,var(--cyan),var(--neon));box-shadow:0 8px 20px rgba(255,75,215,.35)}

/* LED */
.led{position:relative}
.neon-underline{position:relative}
.neon-underline::after{content:"";position:absolute;left:0;bottom:-8px;height:3px;width:min(220px,40vw);border-radius:3px;background:linear-gradient(90deg,var(--neon),var(--cyan));box-shadow:0 0 18px rgba(255,75,215,.55)}
.led-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.led-card{padding:18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:var(--shadow)}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:20px}
.marquee .track{display:flex;gap:40px;white-space:nowrap;animation:scroll 22s linear infinite;color:#fff;padding:10px 0;background:linear-gradient(90deg, rgba(255,75,215,.22), rgba(0,231,198,.18))}
.marquee span{font-weight:800;letter-spacing:.2em;text-transform:uppercase}
@keyframes scroll{to{transform:translateX(-50%)}}

/* FAQ */
.faq details{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:14px}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:700;list-style:none}

/* Contacto */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card form{display:grid;gap:10px}
input, textarea, select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;outline:none}
input:focus, textarea:focus, select:focus{border-color:rgba(0,231,198,.45);box-shadow:0 0 0 4px rgba(0,231,198,.12)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.list{padding-left:18px}

/* Vista previa contacto */
.preview-card{margin-top:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:14px}
.preview-card h3{margin:0 0 6px}
.preview-card .muted{margin-top:0}
.preview-card pre{white-space:pre-wrap;font-family:inherit;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:12px;border-radius:12px}
.preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Footer */
footer{padding:26px 0;border-top:1px solid var(--line);color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.foot-links{display:flex;gap:12px}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* WhatsApp flotante */
.wapp{position:fixed;right:18px;bottom:18px;z-index:2000}
.wapp a{position:relative;display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:12px 16px;border-radius:999px;font-weight:800;box-shadow:0 10px 24px rgba(37,211,102,.35)}
.pulse{position:absolute;inset:auto 6px 6px auto;width:14px;height:14px;border-radius:50%;background:#fff;opacity:.9;animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.8}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}

/* Responsive */
@media (max-width:1060px){
  .cards,.features,.led-wrap{grid-template-columns:1fr 1fr}
  .grid-hero{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu{display:none}
  .menu.open{
    display:flex;flex-direction:column;gap:12px;
    position:absolute;top:64px;right:4%;
    background:rgba(20,20,30,.96);border:1px solid var(--line);border-radius:16px;padding:12px 14px;
    box-shadow:0 12px 40px rgba(0,0,0,.5);
  }
  .menu-toggle{display:inline-block}
  .cards,.contact{grid-template-columns:1fr}
  .hero{padding-top:72px}
}

/* Utilidad: solo lectores de pantalla */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* === Servicios: responsive específico === */
#servicios .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
#servicios .card{ background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); overflow:hidden }
#servicios .card h3{ margin:8px 0 6px }
@media (max-width:1060px){ #servicios .cards{ grid-template-columns:1fr 1fr } }
@media (max-width:760px){ #servicios .cards{ grid-template-columns:1fr } }















/* 0) Previene cualquier scroll horizontal accidental */
html, body {
  overflow-x: hidden;
}

/* 1) Si algún elemento usa 100vw, lo limita a la pantalla real (sin contar la barra de scroll) */
:root {
  --vw: 100vw;
}
*,
*::before,
*::after {
  box-sizing: border-box;       /* evita cálculos que se pasan de ancho */
}

/* 2) Las imágenes y SVG nunca se salen */
img, svg {
  max-width: 100%;
  height: auto;
}

/* 3) Ajuste seguro de la posición de los flotantes (respeta notch/seguridad) */
.float-actions{
  position: fixed;
  right: max(12px, env(safe-area-inset-right));   /* iPhone notch safe */
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2000;
  /* Evita que sombras o animaciones generen “layout” lateral */
  contain: layout paint style;
}

/* 4) Botones: sombras contenidas y sin outline que empuje en móvil */
.btn{
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.btn:focus{ outline: none; }
.btn:focus-visible{ outline: 2px solid #ffffff55; outline-offset: 2px; }

/* 5) En pantallas chicas, reducimos tamaño y eliminamos el “pulse” del WA por si estuviera empujando */
@media (max-width: 560px){
  .btn{ padding: 12px; }
  .btn span{ display: none; }       /* solo íconos en móvil (ya lo tenías) */
  .btn--wa::after{ display: none; } /* quita la burbujita animada en mobile */
  .float-actions{ right: 12px; bottom: 12px; gap: 10px; }
}

/* 6) (Opcional) Si tenés un wrapper principal con transform, fijate:
   - NO le pongas transform/translateZ/scale al contenedor padre de .float-actions
   - O mové .float-actions como hijo directo de <body> */






















.float-actions{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;           /* separación uniforme entre botones */
  z-index: 2000;
}

/* Botón base */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: 3px solid #ffffff55; outline-offset: 2px; }

/* Iconos dentro del botón */
.btn svg, .btn .icon{ width: 20px; height: 20px; flex: none; }

/* Variantes */
.btn--wa{ background: #25D366; }
.btn--ig{
  background: linear-gradient(45deg,#F58529,#FEDA77,#DD2A7B,#8134AF,#515BD4);
}

/* Burbujita/pulse opcional SOLO para WA (si te gusta) */
.btn--wa::after{
  content:"";
  position:absolute;
  right: 8px; bottom: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background:#fff; opacity:.9;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ transform: scale(.9); opacity:.8 }
  70%{ transform: scale(1.6); opacity:0 }
  100%{ opacity:0 }
}

/* Responsive: en pantallas chicas ocultamos el texto y dejamos solo iconos */
@media (max-width: 560px){
  .float-actions{ right: 12px; bottom: 12px; gap: 10px; }
  .btn{ padding: 12px; }
  .btn span{ display: none; }   /* oculta “Instagram” / “WhatsApp” */
}