/* ===============================
   BASE SUAVE (dejamos lo visual)
   =============================== */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  /* Tipografía y colores ya los pone el bloque @layer base */
  background: linear-gradient(135deg, #0c0c0c 0%, #2e1a1a 50%, #3e1616 100%);
  overflow-x: hidden;
}

/* ===============================
   FONDO MÍSTICO (luces flotantes)
   =============================== */

.mystical-bg {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
}
.mystical-bg::before,
.mystical-bg::after {
  content: ''; position: absolute; border-radius: 50%;
}
.mystical-bg::before {
  width: 200px; height: 200px; top: 20%; left: 10%;
  background: radial-gradient(circle, rgba(226,43,43,.3) 0%, transparent 70%);
  animation: float 8s ease-in-out infinite;
}
.mystical-bg::after {
  width: 150px; height: 150px; top: 60%; right: 15%;
  background: radial-gradient(circle, rgba(130,0,0,.4) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite reverse;
}

/* =======================================
   HEADER (solo look: fondo/blur/borde)
   ======================================= */

header {
  background: rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(226,43,43,.3);
  transition: all .3s ease;
}
.logo {
  color: #dd4e4e;
  text-shadow: 0 0 10px rgba(221,78,78,.5);
}
.logo::before { content: none !important; }

.nav-links a {
  position: relative; text-decoration: none; color: #e0e0e0; transition: .3s;
}
.nav-links a:hover { color: #dd4e4e; text-shadow: 0 0 5px rgba(221,78,78,.5); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: linear-gradient(90deg, #dd4e4e, #ff7d7d);
  transition: width .3s ease;
}
.nav-links a:hover::after { width: 100%; }

/* ===============================
   HERO (fondo + partículas + copy)
   =============================== */

.hero {
  color: #fff; position: relative; overflow: hidden; text-align: center;
  background:
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.4)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="1200" height="800" fill="%23000"/><circle cx="200" cy="150" r="2" fill="%239d4edd" filter="url(%23glow)"><animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/></circle><circle cx="800" cy="100" r="1.5" fill="%23c77dff" filter="url(%23glow)"><animate attributeName="opacity" values="0.5;0.2;0.5" dur="4s" repeatCount="indefinite"/></circle><circle cx="400" cy="300" r="1" fill="%23e0aaff" filter="url(%23glow)"><animate attributeName="opacity" values="0.2;0.8;0.2" dur="5s" repeatCount="indefinite"/></circle><circle cx="1000" cy="250" r="2.5" fill="%239d4edd" filter="url(%23glow)"><animate attributeName="opacity" values="0.8;0.3;0.8" dur="6s" repeatCount="indefinite"/></circle><circle cx="100" cy="500" r="1.8" fill=\"%23c77dff\" filter=\"url(%23glow)\"><animate attributeName=\"opacity\" values=\"0.4;0.9;0.4\" dur=\"2s\" repeatCount=\"indefinite\"/></circle></svg>');
  background-size: cover; background-position: center;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.8) 100%);
}
.particles { position: absolute; inset: 0; overflow: hidden; }
.particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #dd4e4e; box-shadow: 0 0 10px #dd4e4e;
  animation: particle 15s linear infinite;
}
.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4rem);
  margin-bottom: 1rem;
  text-shadow: 0 0 20px rgba(221,78,78,.8);
  background: linear-gradient(45deg, #db3434, #f56060, #fc9191);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero .subtitle {
  font-size: 1.1rem; margin-bottom: 2rem; opacity: .9;
  text-shadow: 0 0 10px rgba(224,224,224,.5);
}

/* Efecto brillo del CTA (base del botón está en @apply) */
.cta-button::before {
  content: ''; position: absolute; inset: 0; left: -100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s;
}
.cta-button:hover::before { left: 100%; }

/* =================================
   SERVICIOS (look + hover especial)
   ================================= */

.services {
  position: relative;
  background: linear-gradient(135deg, #230f0f 0%, #2e1a1a 100%);
}
.services::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #dd4e4e, transparent);
}

/* La base de la card la da @apply; aquí dejamos “brillos” */
.service-card {
  background: linear-gradient(135deg, rgba(221,78,78,.1) 0%, rgba(255,125,125,.05) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; inset: -2px; border-radius: 20px; z-index: -1; opacity: 0;
  background: linear-gradient(45deg, #650707, #de2f2f, #ff7171);
  transition: opacity .3s ease;
}
.service-card:hover::before { opacity: 1; }
.service-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 50px rgba(192,10,10,.694);
}

/* Imagen circular con halo */
.service-image {
  width: 100%; height: 220px; margin: 0 auto 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10%; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(157,78,221,.2), rgba(199,125,255,.1));
  border: 2px solid rgb(255, 3, 3);
}
.service-image img { width: 100%; height: 100%; object-fit: cover; }
.service-image::before {
  content: ''; position: absolute; inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="mystical" cx="50%" cy="50%"><stop offset="0%" stop-color="rgba(157,78,221,0.3)"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs><circle cx="50" cy="50" r="40" fill="url(%23mystical)"/></svg>');
  animation: pulse 2s ease-in-out infinite;
}

/* ===============================
   SOBRE MÍ (fondos + retrato)
   =============================== */

.about {
  position: relative;
  background: linear-gradient(135deg, #0c0c0c 0%, #2e1a1a 100%);
}
.about::before {
  content: ''; position: absolute; inset: 0; opacity: .3;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="mysticalPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(157,78,221,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23mysticalPattern)"/></svg>');
}
.mystical-portrait {
  width: 300px; height: 300px; margin: 0 auto;
  border-radius: 50%; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(221,78,78,.3), rgba(255,125,125,.2));
  border: 3px solid rgba(221,78,78,.5);
  box-shadow: 0 0 50px rgba(221,78,78,.3);
  animation: float 4s ease-in-out infinite;
}
.mystical-portrait::before {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(221,78,78,.2), transparent);
  animation: rotate 8s linear infinite;
}
.mystical-portrait::after {
  content: ''; position: absolute; inset: 10px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(12,12,12,.8), rgba(46,26,26,.6));
}
.mystical-portrait .chaman-avatar {
  position: relative; z-index: 3; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; transition: transform .4s ease;
}
.mystical-portrait .chaman-avatar:hover { transform: scale(1.05); }

/* Badges y CTA de “sobre mí” (colores/hover especiales) */
.about .love-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.about .love-subtitle { margin: 1rem 0 .5rem; color: #ff4c4c; font-size: 1.15rem; }
.about .love-services { list-style: none; margin: 0 0 1rem 0; padding: 0; }
.about .love-services li { margin: .4rem 0; color: #f0dada; line-height: 1.45; }
.about .love-cta { margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.about .btn-love {
  text-decoration: none; font-weight: 700; color: #fff; border-radius: 10px;
  border: 1px solid rgb(79,255,76); background: rgb(9,255,0);
  padding: .75rem 1.1rem; transition: .2s ease transform, .2s ease box-shadow, .2s ease background;
}
.about .btn-love:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgb(21,255,0); background: rgb(30,255,0); }
.about .love-note { color: #ccc; font-size: .8rem; opacity: .9; }

/* ===============================
   TESTIMONIOS (look + hover)
   =============================== */

.testimonials {
  padding: 5rem 0; text-align: center;
  background: rgba(20,0,0,.7); color: #f0f0f0;
}
.testimonials .section-title { color: #ff4c4c; text-shadow: 0 0 15px rgba(221,78,78,.3); }
.testimonials .hidden { display: none !important; }

.testimonial-card {
  background: rgba(255,0,0,.08);
  border: 1px solid rgba(255,76,76,.3);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 20px rgba(255,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 30px rgba(255,0,0,.2);
}
.testimonial-header { display: flex; align-items: center; margin-bottom: 1rem; }
.testimonial-header img {
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid #ff4c4c; margin-right: 1rem;
}
.user-info h4 { margin: 0; font-size: 1rem; color: #ff4c4c; }
.user-info span { font-size: .8rem; color: #ccc; }
.testimonial-card p { color: #f0dada; line-height: 1.4; }

/* ===============================
   BOTÓN FLOTANTE WHATSAPP + TIP
   =============================== */

.whatsapp-float {
  position: fixed; right: 30px; bottom: 40px;
  width: 70px; height: 70px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #20ff20, #0ccb2c);
  border: 3px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 25px rgba(37,211,102,.6);
  z-index: 9999; transition: all .3s ease;
  animation: whatsappPulse 2s infinite;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #128c14, #25D366);
  box-shadow: 0 12px 35px rgba(26,255,41,.88);
}
.whatsapp-float::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: linear-gradient(45deg, #25d325, #128c31, #25D366);
  z-index: -1; opacity: 0; transition: opacity .3s ease;
}
.whatsapp-float:hover::before { opacity: 1; animation: rotate 2s linear infinite; }
.whatsapp-icon { width: 40px; height: 40px; fill: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }

/* Tooltip */
.whatsapp-tooltip {
  position: absolute; top: 50%; right: calc(100% + 15px); transform: translateY(-50%);
  background: rgba(0,0,0,.9); color: #fff; border-radius: 25px;
  padding: 12px 18px; font-size: 14px; font-weight: 500; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 10000;
  border: 1px solid rgba(157,78,221,.3); backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0,0,0,.3);
  transition: opacity .3s ease, transform .3s ease;
}
.whatsapp-tooltip::before {
  content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 8px solid transparent; border-left-color: rgba(0,0,0,.9);
}
.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1; visibility: visible; transform: translateY(-50%) translateX(-5px);
}

/* ===============================
   MODAL WHATSAPP
   =============================== */

.whatsapp-modal {
  display: none; position: fixed; inset: 0; z-index: 11000;
  background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  justify-content: center; align-items: center; transition: opacity .5s ease;
}
.whatsapp-modal.active { display: flex !important; animation: flickerIn 1s ease; }
.whatsapp-modal-content {
  max-width: 400px; width: 90%;
  position: relative; text-align: center; border-radius: 20px;
  color: #fff; padding: 2rem;
  background: linear-gradient(145deg, #1c1c1c, #2b0032);
  border: 3px solid #800080; box-shadow: 0 0 25px #a000ff;
  animation: pulseGlow 4s infinite alternate;
  font-family: 'Georgia', serif;
}
.whatsapp-modal-content h2 { font-size: 1.7rem; margin-bottom: 1rem; text-shadow: 0 0 8px #f0f; }
.whatsapp-modal-content p { font-size: 1.1rem; margin-bottom: 1.5rem; color: #f5f5f5; }
.whatsapp-contact-btn {
  background: #25D366; color: #fff; border: 0; border-radius: 30px;
  padding: .8rem 2rem; font-size: 1.2rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 0 15px #25D366; animation: heartbeat 2s infinite;
  transition: transform .2s ease;
}
.whatsapp-contact-btn:hover { transform: scale(1.05); background: #1ebe57; }
.close-btn {
  position: absolute; top: 10px; right: 15px; font-size: 2rem;
  background: none; color: #ff5e5e; border: none; cursor: pointer; text-shadow: 0 0 6px #f00;
}

/* ===============================
   FOOTER (sello e íconos)
   =============================== */

.footer {
  position: relative; overflow: hidden; color: #eee;
  background:
    radial-gradient(1200px 400px at 50% 120%, rgba(233,30,99,.08), transparent),
    linear-gradient(180deg, #0a0a0a, #0d0d0f);
  padding: 40px 0 50px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-seal {
  display: inline-flex; gap: 18px; padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  margin-bottom: 16px;
  box-shadow: 0 0 40px rgba(233,30,99,.08), inset 0 0 20px rgba(255,255,255,.03);
}
.footer-icon {
  width: 22px; height: 22px; fill: #f5c6d6; opacity: .95;
  filter: drop-shadow(0 0 6px rgba(245,198,214,.4));
  transition: transform .25s ease, opacity .25s ease;
}
.footer-icon:hover { transform: scale(1.08); opacity: 1; }
.footer-brand { font-weight: 600; letter-spacing: .3px; margin: 10px 0 6px; color: #f2e9ef; }
.footer-phrase { color: #d9c6cf; font-size: .98rem; max-width: 720px; margin: 0 auto 10px; line-height: 1.6; }
.footer-whatsapp {
  display: inline-block; margin-top: 14px; padding: 10px 18px; border-radius: 10px;
  background: #25D366; color: #0b2716; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 18px rgba(37,211,102,.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.footer-whatsapp:hover { background: #1ebe57; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,211,102,.45); }

/* ===============================
   SCROLLBAR
   =============================== */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0c0c0c; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff0000, #5d0505);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff7d7d, #ffaaaa);
}

/* ===============================
   ANIMACIONES (necesarias aquí)
   (otras ya están en tailwind.config)
   =============================== */

@keyframes pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes whatsappPulse {
  0%,100% { box-shadow: 0 8px 25px rgba(37,211,102,.4); }
  50% { box-shadow: 0 8px 25px rgba(37,211,102,.8), 0 0 0 10px rgba(37,211,102,.1); }
}

/* ===============================
   RESPONSIVE (lo estrictamente útil)
   =============================== */

@media (max-width: 768px) {
  .mystical-portrait { width: 200px; height: 200px; }
  .service-image { height: 200px; }
  .whatsapp-float { bottom: 80px; width: 60px; height: 60px; }
  .whatsapp-icon { width: 35px; height: 35px; }
  .whatsapp-tooltip { display: none; } /* Es mejor ocultarlo en móvil */
}
@media (max-width: 480px) {
  .footer { padding: 30px 0 40px; }
  .footer-icon { width: 20px; height: 20px; }
}

/* ===============================
   ACCESIBILIDAD (reduce motion)
   =============================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Tooltip por defecto: pegado a la IZQUIERDA del botón */
.whatsapp-tooltip {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px); /* 👈 a la izquierda del botón */
  left: auto;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px 18px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(157, 78, 221, 0.3);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 10000;
}

/* Flechita apuntando al botón (lado derecho del tooltip) */
.whatsapp-tooltip::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.9);
}

/* Mostrar por hover (como ya tenías) */
.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(-5px);
}

/* Mostrar “forzado” por JS (cada 30s) */
.whatsapp-tooltip.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(-5px) !important;
}

/* === MÓVIL: tooltip a la IZQUIERDA del botón, multilínea y estable === */
@media (max-width: 640px) {
  /* Oculto por defecto en móvil (como ya lo tenías) */
  .whatsapp-tooltip { 
    display: none; 
  }

  /* Visible cuando JS lo activa cada X segundos */
  .whatsapp-tooltip.is-active {
    display: block !important;

    /* A la IZQUIERDA del botón y centrado vertical del botón */
    top: 50%;
    bottom: auto;
    right: calc(100% + 10px); /* sale hacia la izquierda del botón */
    left: auto;
    transform: translateY(-50%) translateX(-4px) !important;

    /* Multilínea y sin desbordes */
    max-width: min(85vw, 320px);
    white-space: normal;
    line-height: 1.35;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 12px;
  }

  /* Flechita apuntando al botón (lado derecho del tooltip) */
  .whatsapp-tooltip::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.9);
  }
}

/* Contenedor de partículas (debajo del copy) */
.particles{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* no bloquea clics */
}

/* Partículas */
.particle{
  position: absolute;
  width: 4px;
  height: 4px;
  background: #dd4e4e;
  border-radius: 50%;
  box-shadow: 0 0 10px #dd4e4e;
  animation: particle-float 15s linear infinite;
  will-change: transform, opacity;
}

@keyframes particle-float{
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* Accesibilidad: respeta "reducir movimiento" */
@media (prefers-reduced-motion: reduce){
  .particle{ animation: none; }
}