/* =====================================================================
   Vanesa Nogués · Estilos personalizados (compartidos por todas las páginas)
   Solo lo que Tailwind no resuelve cómodamente: animaciones, acordeón,
   carrusel a igual altura, botón premium de WhatsApp, formularios y modal.
   Comentado y fácil de editar.
   ===================================================================== */

:root {
  --plum-deep: #2c0c49;
  --plum: #3a0a5f;
  --plum-mid: #5714a0;
  --violet-glow: #b85cff;
  --gold: #c6b377;
  --gold-soft: #d8bb6e;
}

/* Scroll suave y compensación por el header fijo */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Manchas de luz decorativas (blobs) ---------- */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Texto con degradado morado-violeta ---------- */
.text-gradient {
  background: linear-gradient(110deg, var(--plum-mid) 0%, var(--violet-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Revelado al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* ---------- Flotación suave (imágenes del hero) ---------- */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.animate-floaty { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.animate-floaty-slow { animation: floaty-slow 9s ease-in-out infinite; }

/* ---------- Acordeón FAQ ---------- */
.faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1); }
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.35s ease; }

/* ---------- Carrusel de testimonios ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Cada tarjeta ocupa un ancho fijo por breakpoint => alturas homogéneas */
.testi-slide { flex: 0 0 100%; }
@media (min-width: 640px)  { .testi-slide { flex-basis: 50%; } }   /* tablet: 2 */
@media (min-width: 1024px) { .testi-slide { flex-basis: 33.3333%; } } /* desktop: 3 */

/* Recorte elegante del texto para igualar alturas (sin "Leer más" se ve completo en el modal) */
.line-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Punto del slider activo */
.dot.is-active { width: 1.75rem; background-color: var(--gold-soft); }

/* ---------- Botón flotante de WhatsApp (premium, lila corporativo) ---------- */
.wa-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: 9999px;
  color: #fff;
  background: linear-gradient(135deg, var(--plum-mid) 0%, var(--violet-glow) 100%);
  box-shadow: 0 14px 40px -10px rgba(184, 92, 255, 0.6);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, padding 0.3s ease;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 20px 50px -8px rgba(184,92,255,0.75); }
.wa-fab:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
.wa-fab .wa-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}
@media (min-width: 768px) {
  .wa-fab:hover .wa-label { max-width: 14rem; opacity: 1; padding-right: 0.4rem; }
}
/* Anillo de pulso suave alrededor del icono */
.wa-fab .wa-pulse { position: relative; display: inline-flex; }
.wa-fab .wa-pulse::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: 9999px;
  background: rgba(184, 92, 255, 0.55);
  z-index: -1;
  animation: wa-ping 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes wa-ping {
  0% { transform: scale(0.85); opacity: 0.7; }
  75%, 100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Selector de idioma ---------- */
.lang-switch a { transition: color .25s ease, background-color .25s ease; }
.lang-switch a[aria-current="true"] { background-color: var(--plum-mid); color: #fff; }

/* ---------- Formularios ---------- */
.field-label { font-size: 0.85rem; font-weight: 600; color: var(--plum); margin-bottom: 0.35rem; display: block; }
.field-input,
.field-textarea,
.field-select {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(58,10,95,0.15);
  background-color: #fff;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: #303038;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field-input::placeholder,
.field-textarea::placeholder { color: rgba(48,48,56,0.45); }
.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  outline: none;
  border-color: var(--plum-mid);
  box-shadow: 0 0 0 4px rgba(87,20,160,0.12);
}
.field-input[aria-invalid="true"],
.field-textarea[aria-invalid="true"] { border-color: #c0353e; box-shadow: 0 0 0 4px rgba(192,53,62,0.12); }
.field-error { display: none; color: #b3303a; font-size: 0.8rem; margin-top: 0.3rem; }
.field-error.show { display: block; }

/* Honeypot: oculto para humanos, visible para bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Estado del formulario */
.form-status { display: none; border-radius: 1rem; padding: 0.9rem 1.1rem; font-size: 0.9rem; font-weight: 500; }
.form-status.show { display: block; }
.form-status.is-sending { background: #efe9fb; color: var(--plum-mid); }
.form-status.is-success { background: #e7f6ec; color: #1f7a44; }
.form-status.is-error   { background: #fbeaec; color: #b3303a; }

/* ---------- Modal de testimonio ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(44,12,73,0.55); backdrop-filter: blur(4px); }
.modal-card { position: relative; max-width: 36rem; width: 100%; max-height: 85vh; overflow-y: auto; }

/* ---------- Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-floaty, .animate-floaty-slow { animation: none; }
  .faq-panel { transition: none; }
  .wa-fab .wa-pulse::before { animation: none; }
  .wa-fab { transition: none; }
  .heart-beat { animation: none; }
}

/* ---------- Páginas legales (lectura cómoda) ---------- */
.legal { color:#4b4b55; }
.legal h2 { font-family:'Poppins',sans-serif; color:var(--plum); font-size:1.4rem; font-weight:700; line-height:1.25; margin:2.4rem 0 .7rem; }
.legal h3 { font-family:'Poppins',sans-serif; color:var(--plum); font-size:1.05rem; font-weight:600; margin:1.5rem 0 .4rem; }
.legal p { line-height:1.75; margin-bottom:.95rem; }
.legal ul { list-style:disc; padding-left:1.3rem; margin:.2rem 0 1.1rem; }
.legal li { margin-bottom:.45rem; line-height:1.65; }
.legal a { color:var(--plum-mid); text-decoration:underline; font-weight:600; }
.legal strong { color:var(--ink); font-weight:700; }
.legal .pending { background:#fbeaec; color:#b3303a; padding:.05rem .45rem; border-radius:.35rem; font-weight:600; font-size:.92em; }

/* ---------- Firma de Daimatics Agency (corazón parpadeante) ---------- */
.heart-beat { color: var(--violet-glow); display:inline-block; transform-origin:center; animation: heartbeat 1.4s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  20% { transform: scale(1.28); opacity: .85; }
  40% { transform: scale(.92); opacity: 1; }
  60% { transform: scale(1.16); opacity: .9; }
}