/* Estilos de marca Zona 3D que complementan a Tailwind */

[x-cloak] { display: none !important; }

.font-display { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }

/* Botones */
.btn-primary,
.btn-secondary {
  display: inline-block;
  border-radius: 0.5rem;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background-color .15s, color .15s, border-color .15s;
  cursor: pointer;
}
.btn-primary { background: #206eea; color: #fff; border: 1px solid #206eea; }
.btn-primary:hover { background: #1857c0; border-color: #1857c0; }
.btn-secondary { background: #fff; color: #0b1c3a; border: 1px solid #cbd5e1; }
.btn-secondary:hover { border-color: #0b1c3a; }

/* Formularios: aplica a los formularios propios y a los de django-allauth */
.zform p,
.zform .field { margin-bottom: 1rem; }
.zform label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; color: #0b1c3a; }
.zform input[type="text"],
.zform input[type="email"],
.zform input[type="password"],
.zform input[type="tel"],
.zform input[type="number"],
.zform select,
.zform textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  background: #fff;
}
.zform input:focus,
.zform select:focus,
.zform textarea:focus { outline: 2px solid #206eea; outline-offset: 0; border-color: #206eea; }
.zform input[type="checkbox"] { margin-right: 0.4rem; }
.zform label:has(input[type="checkbox"]),
.zform label:has(input[type="radio"]) { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; }
.zform input[type="radio"] { margin-right: 0.2rem; }
.zform fieldset legend { font-size: 1.05rem; }
.zform .helptext,
.zform .help-text,
.zform span.helptext { display: block; font-size: 0.8rem; color: #64748b; margin-top: 0.3rem; }
.zform .helptext ul { padding-left: 1rem; list-style: disc; }
.zform .errorlist { color: #b91c1c; font-size: 0.85rem; margin: 0.3rem 0; list-style: none; padding: 0; }
.zform button[type="submit"] {
  width: 100%;
  background: #206eea;
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.7rem 1rem;
  font-weight: 600;
  cursor: pointer;
}
.zform button[type="submit"]:hover { background: #1857c0; }

/* Contenido de páginas de cuenta que no tienen plantilla propia */
.auth-content h1 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.6rem; color: #0b1c3a; margin-bottom: 1rem; }
.auth-content p { margin-bottom: 0.9rem; }
.auth-content a { color: #206eea; }
.auth-content form { margin-top: 1rem; }

/* ---------- Animaciones ---------- */
@keyframes z-pop {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes z-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Entrada escalonada del mosaico y del texto de la portada */
.z-tile { animation: z-pop .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 70ms + 150ms); }
.z-hero-text > * { animation: z-pop .7s cubic-bezier(.2, .7, .2, 1) both; }
.z-hero-text > *:nth-child(2) { animation-delay: .08s; }
.z-hero-text > *:nth-child(3) { animation-delay: .16s; }
.z-hero-text > *:nth-child(4) { animation-delay: .24s; }

/* Entrada de tarjetas de la galería (también cuando HTMX trae resultados nuevos) */
.z-enter { animation: z-pop .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(min(var(--d, 0), 12) * 45ms); }

/* Carrusel de diseños en la portada: se ve solo la diapositiva activa */
.z-slide { opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.z-slide.is-on { opacity: 1; pointer-events: auto; }

/* Íconos que flotan suavemente */
.z-float { animation: z-float 4s ease-in-out infinite; }
.z-tile:nth-child(even) .z-float { animation-delay: -2s; }

/* Aparece al bajar con la rueda (lo activa un script en base.html) */
.js .z-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--d, 0) * 120ms); }
.js .z-reveal.is-visible { opacity: 1; transform: none; }

/* Tarjetas que se elevan al pasar el mouse */
.z-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .6s ease; }
.z-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgba(11, 28, 58, .35); }

/* Respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  .z-tile, .z-hero-text > *, .z-float, .z-enter { animation: none !important; }
  .js .z-reveal { opacity: 1; transform: none; transition: none; }
  .z-card:hover { transform: none; }
}

/* Textos largos (términos, privacidad, preguntas frecuentes) */
.z-prose { color: #334155; line-height: 1.7; }
.z-prose h2 { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-weight: 800; color: #0b1c3a;
              font-size: 1.25rem; margin: 2rem 0 .5rem; }
.z-prose p { margin: 0 0 .9rem; }
.z-prose ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 .9rem; }
.z-prose li { margin-bottom: .3rem; }
.z-prose a { color: #206eea; text-decoration: underline; }
.z-prose strong { color: #0b1c3a; }
.z-pending { background: #fef3c7; color: #92400e; border-radius: .25rem; padding: 0 .3rem; }