/* ============================================================
   Reservaria — Marketing site: transiciones y efectos
   (Complementa styles.css; no lo modifica.)
   ============================================================ */

/* ------------------------------------------------------------
   1. Transición entre páginas (View Transitions API · MPA)
   Navegadores compatibles (Chromium) hacen un cross-fade nativo
   al navegar entre páginas del mismo origen.
   ------------------------------------------------------------ */
/* Reserva el hueco de la barra de scroll siempre, para que no haya salto
   horizontal entre páginas con y sin scroll (se percibe como desplazamiento). */
html { scrollbar-gutter: stable; }

@view-transition { navigation: auto; }

/* Cross-fade puro: solo opacidad, sin desplazamiento (nada se "mueve"). */
@keyframes rv-fade-out { to   { opacity: 0; } }
@keyframes rv-fade-in  { from { opacity: 0; } }

::view-transition-old(root) { animation: rv-fade-out .22s linear both; }
::view-transition-new(root) { animation: rv-fade-in  .30s linear both; }

/* Fallback: fade-in suave en cada carga donde NO hay View Transitions. */
@supports not (view-transition-name: none) {
  body { animation: rv-fade-in .35s ease both; }
}

/* ------------------------------------------------------------
   2. Scroll reveal — los bloques aparecen al entrar en viewport.
   El estado oculto solo se aplica cuando hay JS (html.rv-js),
   así que sin JS todo se ve igualmente.
   ------------------------------------------------------------ */
html.rv-js :is(
  .section-head,
  .feature-body,
  .feature-visual,
  .step,
  .sector-card,
  .ch-card,
  .next-step,
  .faq-item,
  .feature-card-photo,
  .statement-text,
  .faq-list-row
) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}

/* Las columnas de cada "feature" entran desde lados opuestos. */
html.rv-js .feature-body    { transform: translateY(20px) translateX(-22px); }
html.rv-js .feature-visual  { transform: translateY(20px) translateX(22px); }
html.rv-js .feature.reverse .feature-body   { transform: translateY(20px) translateX(22px); }
html.rv-js .feature.reverse .feature-visual { transform: translateY(20px) translateX(-22px); }

/* En móvil/tablet las columnas se apilan a ancho completo: el desplazamiento
   horizontal de entrada las empujaría fuera del viewport (scroll lateral),
   así que solo entran en vertical. */
@media (max-width: 980px) {
  html.rv-js .feature-body,
  html.rv-js .feature-visual,
  html.rv-js .feature.reverse .feature-body,
  html.rv-js .feature.reverse .feature-visual { transform: translateY(20px); }
}

/* Estado revelado. */
html.rv-js .is-in { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------
   Footer — hueco que mantiene las columnas alineadas a la derecha
   (ocupa la columna donde antes estaba "Sectores"). En móvil se
   colapsa para no dejar un espacio vacío.
   ------------------------------------------------------------ */
@media (max-width: 880px) {
  .footer-spacer { display: none; }
}

/* ------------------------------------------------------------
   Formulario de contacto — mensajes de estado y errores
   ------------------------------------------------------------ */
.contact-alert {
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.contact-alert.success {
  background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0;
}
.contact-alert.error {
  background: var(--rv-red-soft); color: var(--rv-red-deep); border: 1px solid #f4c7ca;
}
.contact-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--rv-red);
}
/* Enlace de la dirección en la tarjeta de contacto */
.ci-value a { color: inherit; text-decoration: none; transition: color .15s ease; }
.ci-value a:hover { color: var(--rv-red); text-decoration: underline; text-underline-offset: 3px; }
.contact-field input.is-error,
.contact-field select.is-error { border-color: var(--rv-red); }

/* ------------------------------------------------------------
   Documentos legales (aviso legal, privacidad, cookies)
   ------------------------------------------------------------ */
.legal { max-width: 820px; margin: 0 auto; color: var(--rv-fg-2); font-size: 16px; line-height: 1.7; }
.legal h2 { font-family: var(--font-corp); color: var(--rv-ink); font-size: 23px; font-weight: 800; letter-spacing: -0.01em; margin: 44px 0 14px; }
.legal h3 { color: var(--rv-ink); font-size: 17px; font-weight: 700; margin: 26px 0 10px; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--rv-red); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--rv-ink); font-weight: 700; }
.legal .legal-updated { font-size: 14px; color: var(--rv-fg-3); margin: 0 0 8px; }
.legal .legal-box {
  background: var(--rv-bone); border: 1px solid var(--rv-rule);
  border-radius: var(--r-md); padding: 18px 22px; margin: 0 0 24px;
}
.legal .legal-box p:last-child { margin-bottom: 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rv-rule); vertical-align: top; }
.legal th { color: var(--rv-ink); font-weight: 700; background: var(--rv-bone); }

/* ------------------------------------------------------------
   3. Accesibilidad — sin movimiento si el usuario lo pide.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  body { animation: none !important; }

  html.rv-js :is(
    .section-head, .feature-body, .feature-visual, .step, .sector-card,
    .ch-card, .next-step, .faq-item, .feature-card-photo, .statement-text, .faq-list-row
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}