/* ==========================================================================
   Consulting Quan S.A.C. — animaciones
   Regla: solo transform y opacity. Todo se anula bajo prefers-reduced-motion.
   ========================================================================== */

/* --- Revelado al scroll --- */
.js .revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
  will-change: opacity, transform;
}
.js .revelar.es-visible { opacity: 1; transform: none; }

.js .revelar[data-retraso="1"] { transition-delay: 0.09s; }
.js .revelar[data-retraso="2"] { transition-delay: 0.18s; }
.js .revelar[data-retraso="3"] { transition-delay: 0.27s; }
.js .revelar[data-retraso="4"] { transition-delay: 0.36s; }
.js .revelar[data-retraso="5"] { transition-delay: 0.45s; }
.js .revelar[data-retraso="6"] { transition-delay: 0.54s; }

.js .revelar--escalonado > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
}
.js .revelar--escalonado.es-visible > * { opacity: 1; transform: none; }
.js .revelar--escalonado.es-visible > *:nth-child(1) { transition-delay: 0.05s; }
.js .revelar--escalonado.es-visible > *:nth-child(2) { transition-delay: 0.14s; }
.js .revelar--escalonado.es-visible > *:nth-child(3) { transition-delay: 0.23s; }
.js .revelar--escalonado.es-visible > *:nth-child(4) { transition-delay: 0.32s; }
.js .revelar--escalonado.es-visible > *:nth-child(5) { transition-delay: 0.41s; }
.js .revelar--escalonado.es-visible > *:nth-child(6) { transition-delay: 0.50s; }

/* --- Entrada de portada, al cargar la pagina --- */
@keyframes subir {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aparecer-sello {
  from { opacity: 0; transform: scale(0.86) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes trazar {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.js .entrada-portada {
  opacity: 0;
  animation: subir 0.9s var(--curva) forwards;
}
.js .entrada-portada[data-retraso="1"] { animation-delay: 0.12s; }
.js .entrada-portada[data-retraso="2"] { animation-delay: 0.24s; }
.js .entrada-portada[data-retraso="3"] { animation-delay: 0.36s; }
.js .entrada-portada[data-retraso="4"] { animation-delay: 0.48s; }
.js .entrada-portada[data-retraso="5"] { animation-delay: 0.60s; }

.js .sello-portada {
  opacity: 0;
  animation: aparecer-sello 1.1s var(--curva) 0.1s forwards;
}
.js .sello-portada img { animation: trazar 1.4s var(--curva) 0.3s both; }

/* --- Transicion de salida entre paginas --- */
body { opacity: 1; transition: opacity 0.28s ease; }
body.esta-saliendo { opacity: 0; }

/* --- Ripple en botones --- */
.onda {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: expandir-onda 0.6s var(--curva) forwards;
  pointer-events: none;
}
.boton--fantasma .onda { background: rgba(20, 20, 20, 0.14); }
@keyframes expandir-onda {
  to { transform: scale(2.6); opacity: 0; }
}

/* --- Acordeon --- */
.acordeon {
  border-bottom: 1px solid var(--borde);
}
.acordeon__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  padding: var(--e4) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  transition: color 0.25s var(--curva);
}
.acordeon__boton:hover { color: var(--terracota); }
.acordeon__boton::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--terracota);
  border-bottom: 2px solid var(--terracota);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.35s var(--curva);
}
.acordeon__boton[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.acordeon__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--curva);
}
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel > div > p { padding-bottom: var(--e4); font-size: 0.9375rem; }
.js .acordeon__boton[aria-expanded="false"] + .acordeon__panel { grid-template-rows: 0fr; }

/* --- Estados del formulario --- */
.form-aviso {
  display: none;
  padding: var(--e3) var(--e4);
  margin-top: var(--e4);
  border-radius: var(--radio-chico);
  font-size: 0.9375rem;
}
.form-aviso.es-visible { display: block; animation: subir 0.4s var(--curva); }
.form-aviso--exito { background: #E7F4EC; color: #1B5E33; }
.form-aviso--error { background: #FBE9E7; color: #A32E1C; }
.campo__error {
  display: none;
  margin-top: var(--e1);
  font-size: 0.8125rem;
  color: #A32E1C;
}
.campo.tiene-error .campo__error { display: block; }
.campo.tiene-error input,
.campo.tiene-error select,
.campo.tiene-error textarea { border-color: #A32E1C; }

/* ==========================================================================
   Respeto por quien desactiva las animaciones
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .revelar, .js .revelar--escalonado > * { opacity: 1; transform: none; }
  .js .entrada-portada, .js .sello-portada { opacity: 1; animation: none; }
  .js .sello-portada img { animation: none; clip-path: none; }
  body.esta-saliendo { opacity: 1; }
}