/* ============================================
   MUNDO MÁGICO — Animales de Fantasía
   Paleta: noche-violeta / magenta-hechizo / rosa-pétalo / oro-chispa
   ============================================ */

:root{
  --noche:        #241033;   /* fondo profundo, cielo nocturno mágico */
  --noche-2:      #34164a;   /* fondo secundario / tarjetas */
  --hechizo:      #9b3fc9;   /* violeta-magenta, color de acción */
  --hechizo-luz:  #c569e8;   /* violeta claro, hover */
  --petalo:       #ff8fd6;   /* rosa pétalo, acentos cálidos */
  --petalo-suave: #ffc4ec;   /* rosa muy claro, texto sobre oscuro */
  --chispa:       #ffd166;   /* oro-chispa, detalle mágico */
  --niebla:       #f6e9ff;   /* casi blanco lavanda, texto claro */
  --texto:        #f4e9ff;
  --texto-tenue:  #d9b8e8;
  --borde:        rgba(255,196,236,0.18);
  --sombra:       0 12px 40px rgba(20,4,36,0.55);
  --radio:        18px;

  --fuente-titulo: 'Baloo 2', 'Fredoka', sans-serif;
  --fuente-cuerpo: 'Nunito', sans-serif;
}

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

html{scroll-behavior:smooth;}

body{
  font-family: var(--fuente-cuerpo);
  color: var(--texto);
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255,143,214,0.20), transparent 45%),
    radial-gradient(ellipse at 90% 10%, rgba(155,63,201,0.35), transparent 50%),
    linear-gradient(180deg, var(--noche) 0%, #1a0a28 100%);
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
}

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

/* ---------- Chispas flotantes de fondo ---------- */
.chispas{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.chispa{
  position:absolute; bottom:-10%;
  width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, var(--chispa), transparent 70%);
  opacity:.75;
  animation: flotar linear infinite;
}
@keyframes flotar{
  0%{ transform:translateY(0) translateX(0) scale(1); opacity:0;}
  10%{opacity:.9;}
  100%{ transform:translateY(-115vh) translateX(30px) scale(.4); opacity:0;}
}

/* ============ ENCABEZADO / NAV ============ */
header.encabezado{
  position:sticky; top:0; z-index:50;
  background: rgba(28,12,44,0.75);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--borde);
}
.barra-nav{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  gap:16px;
}
.marca{
  display:flex; align-items:center; gap:10px;
  font-family:var(--fuente-titulo);
  font-size:1.4rem; font-weight:700;
  color: var(--niebla);
  letter-spacing:.3px;
}
.marca .icono-marca{
  font-size:1.6rem;
  filter: drop-shadow(0 0 8px rgba(255,143,214,.7));
  animation: destello 3s ease-in-out infinite;
}
@keyframes destello{
  0%,100%{transform:scale(1) rotate(0deg);}
  50%{transform:scale(1.12) rotate(-6deg);}
}

/* Botón de menú (hamburguesa) */
.btn-menu{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px;
  background: rgba(255,255,255,0.06);
  border:1px solid var(--borde);
  border-radius:12px;
  cursor:pointer;
}
.btn-menu span{
  display:block; height:2px; width:22px; margin:0 auto;
  background: var(--petalo-suave);
  border-radius:2px;
  transition: transform .3s ease, opacity .3s ease;
}
.btn-menu.activo span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.btn-menu.activo span:nth-child(2){opacity:0;}
.btn-menu.activo span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-enlaces{
  display:flex; align-items:center; gap:6px;
}
.nav-enlaces a{
  padding:9px 16px; border-radius:999px;
  font-weight:700; font-size:.95rem;
  color: var(--texto-tenue);
  transition: color .2s ease, background .2s ease;
}
.nav-enlaces a:hover, .nav-enlaces a.activo{
  color:var(--noche);
  background: linear-gradient(135deg, var(--petalo), var(--chispa));
}

.acciones-nav{display:flex; align-items:center; gap:10px;}

/* Botón de búsqueda */
.btn-buscar{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,0.07);
  border:1px solid var(--borde);
  color: var(--niebla);
  padding:9px 14px; border-radius:999px;
  cursor:pointer; font-weight:700; font-size:.9rem;
  transition: background .2s ease, border-color .2s ease;
}
.btn-buscar:hover{ background: rgba(255,255,255,0.14); border-color: var(--petalo); }

/* Panel de búsqueda desplegable */
.panel-busqueda{
  max-width:1180px; margin:0 auto;
  padding: 0 24px;
  max-height:0; overflow:hidden;
  transition: max-height .35s ease, padding .35s ease;
}
.panel-busqueda.abierto{ max-height:90px; padding:14px 24px 18px;}
.panel-busqueda input{
  width:100%; padding:12px 18px;
  border-radius:999px; border:1px solid var(--borde);
  background: rgba(255,255,255,0.06);
  color:var(--niebla); font-size:1rem;
  outline:none;
}
.panel-busqueda input::placeholder{color:var(--texto-tenue);}
.panel-busqueda input:focus{ border-color: var(--petalo); box-shadow:0 0 0 3px rgba(255,143,214,.2);}

/* ============ BOTONES GENERALES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius:999px;
  font-family:var(--fuente-cuerpo); font-weight:800; font-size:1rem;
  cursor:pointer; border:none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primario{
  background: linear-gradient(135deg, var(--hechizo), var(--petalo));
  color:#fff;
  box-shadow: 0 10px 25px rgba(155,63,201,0.45);
}
.btn-primario:hover{ transform:translateY(-3px); filter:brightness(1.08); box-shadow:0 14px 32px rgba(155,63,201,.55);}
.btn-secundario{
  background: transparent; color:var(--niebla);
  border:1.5px solid var(--petalo-suave);
}
.btn-secundario:hover{ background: rgba(255,255,255,0.08); transform:translateY(-2px);}

/* ============ HERO ============ */
.hero{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  padding: 72px 24px 60px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center;
}
.hero-texto .eyebrow{
  display:inline-block; padding:6px 16px; border-radius:999px;
  background: rgba(255,143,214,0.15); border:1px solid var(--borde);
  color: var(--petalo-suave); font-weight:800; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px;
}
.hero-texto h1{
  font-family:var(--fuente-titulo);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height:1.08; color:var(--niebla);
  margin-bottom:18px;
}
.hero-texto h1 span{
  background: linear-gradient(135deg, var(--petalo), var(--chispa));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-texto p{ color:var(--texto-tenue); font-size:1.08rem; max-width:48ch; margin-bottom:28px;}
.hero-botones{display:flex; gap:14px; flex-wrap:wrap;}

.hero-orbe{
  position:relative; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--hechizo-luz), var(--hechizo) 55%, var(--noche-2) 100%);
  box-shadow: 0 0 90px rgba(197,105,232,.45), inset 0 0 60px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  animation: flotar-orbe 6s ease-in-out infinite;
}
.hero-orbe .criatura{ font-size:6.5rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4));}
@keyframes flotar-orbe{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} }
.anillo{
  position:absolute; inset:-14px; border-radius:50%;
  border:1.5px dashed rgba(255,209,102,.5);
  animation: girar 22s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg);}}

/* ============ SECCIONES ============ */
.seccion{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding: 70px 24px;}
.titulo-seccion{ text-align:center; margin-bottom:48px;}
.titulo-seccion .eyebrow{
  color:var(--chispa); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem;
}
.titulo-seccion h2{
  font-family:var(--fuente-titulo); font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color:var(--niebla); margin-top:10px;
}
.titulo-seccion p{ color:var(--texto-tenue); max-width:56ch; margin:14px auto 0;}

/* ---------- Grid de servicios (tarjetas) ---------- */
.grid-servicios{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:24px;
}
.tarjeta-servicio{
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border:1px solid var(--borde); border-radius: var(--radio);
  padding: 30px 26px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tarjeta-servicio:hover{
  transform: translateY(-6px);
  border-color: var(--petalo);
  box-shadow: var(--sombra);
}
.tarjeta-servicio .emoji{
  font-size:2.2rem; margin-bottom:14px; display:inline-block;
}
.tarjeta-servicio h3{ font-family:var(--fuente-titulo); font-size:1.25rem; color:var(--niebla); margin-bottom:10px;}
.tarjeta-servicio p{ color:var(--texto-tenue); font-size:.95rem;}
.tarjeta-servicio .precio{
  display:inline-block; margin-top:16px; padding:5px 14px; border-radius:999px;
  background: rgba(255,209,102,0.14); color:var(--chispa); font-weight:800; font-size:.85rem;
}
.tarjeta-servicio[hidden]{ display:none; }

/* ---------- Zona de subir criatura ---------- */
.panel-subida{
  background: linear-gradient(160deg, rgba(155,63,201,0.16), rgba(255,143,214,0.06));
  border:1px solid var(--borde); border-radius: 24px;
  padding: 42px; display:grid; grid-template-columns: 1fr 1fr; gap:36px; align-items:center;
}
.zona-arrastre{
  border:2px dashed rgba(255,196,236,.4); border-radius:18px;
  padding: 36px 20px; text-align:center; cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
  background: rgba(0,0,0,0.12);
}
.zona-arrastre:hover, .zona-arrastre.sobre{
  border-color: var(--petalo); background: rgba(255,143,214,0.08);
}
.zona-arrastre .icono-subir{ font-size:2.6rem; margin-bottom:10px;}
.zona-arrastre p{ color:var(--texto-tenue); font-size:.92rem;}
.zona-arrastre strong{ color:var(--petalo-suave);}
#entrada-archivo{ display:none;}
.lista-previa{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px;}
.lista-previa .miniatura{
  width:64px; height:64px; border-radius:12px; overflow:hidden;
  border:1px solid var(--borde); position:relative;
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.mensaje-subida{ margin-top:14px; font-size:.88rem; color: var(--chispa); min-height:1.2em;}

.panel-subida-texto h3{ font-family:var(--fuente-titulo); color:var(--niebla); font-size:1.5rem; margin-bottom:12px;}
.panel-subida-texto p{ color:var(--texto-tenue); margin-bottom:18px;}
.panel-subida-texto ul{ display:flex; flex-direction:column; gap:8px;}
.panel-subida-texto li{ color:var(--texto-tenue); font-size:.92rem; display:flex; gap:8px;}
.panel-subida-texto li::before{ content:"✦"; color:var(--chispa);}

/* ============ CONDICIONES / TÉRMINOS ============ */
.documento{
  background: rgba(255,255,255,0.04); border:1px solid var(--borde);
  border-radius: var(--radio); padding: 40px;
}
.documento h2{ font-family:var(--fuente-titulo); color:var(--petalo-suave); font-size:1.3rem; margin:28px 0 12px;}
.documento h2:first-child{ margin-top:0;}
.documento p, .documento li{ color:var(--texto-tenue); font-size:.98rem; margin-bottom:10px;}
.documento ul{ padding-left:20px; list-style:disc;}
.documento .fecha{ color:var(--chispa); font-size:.85rem; font-weight:700;}

/* ============ PIE DE PÁGINA ============ */
footer.pie{
  position:relative; z-index:1;
  border-top:1px solid var(--borde);
  margin-top:60px; padding: 44px 24px 30px;
  background: rgba(20,8,32,0.6);
}
.pie-contenido{
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.pie-marca{ font-family:var(--fuente-titulo); color:var(--niebla); font-size:1.1rem;}
.pie-enlaces{ display:flex; gap:22px; flex-wrap:wrap;}
.pie-enlaces a{ color:var(--texto-tenue); font-size:.92rem;}
.pie-enlaces a:hover{ color:var(--petalo);}
.pie-copy{
  max-width:1180px; margin:26px auto 0; padding-top:18px;
  border-top:1px solid var(--borde);
  color:var(--texto-tenue); font-size:.82rem; text-align:center;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; text-align:center; padding-top:44px;}
  .hero-botones{ justify-content:center;}
  .hero-orbe{ width:220px; margin:0 auto;}
  .panel-subida{ grid-template-columns:1fr;}
}

@media (max-width: 720px){
  .btn-menu{ display:flex;}
  .nav-enlaces{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background: rgba(24,10,38,0.98);
    border-bottom:1px solid var(--borde);
    padding: 10px 16px 16px;
    max-height:0; overflow:hidden;
    transition: max-height .3s ease;
  }
  .nav-enlaces.abierto{ max-height:340px; padding:14px 16px 18px;}
  .nav-enlaces a{ text-align:center;}
  .acciones-nav .texto-buscar{ display:none;}
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

:focus-visible{ outline:2px solid var(--chispa); outline-offset:3px;}