/* Aventura Maya — estilos base y estados :hover.
   El resto del diseño vive en estilos en línea generados por app.js, igual que
   en el componente original; aquí solo queda lo que un atributo style no puede
   expresar (media queries, keyframes, hover y scrollbars). */

html, body { margin: 0; background: #fffdf8; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
a { color: #1b7fa0; }
input, textarea, select, button { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }

[data-only-mobile] { display: none !important; }

@media (max-width: 1100px) {
  [data-nav-desktop] { display: none !important; }
  [data-only-mobile] { display: flex !important; }
  [data-root] { padding-bottom: 92px; }
}

/* "Todo lo que hacemos" va a dos columnas en celular y en computadora. La foto
   de cada sección se mantiene más cuadrada en pantalla chica y panorámica en
   grande, para que la tarjeta no se estire de más en ninguna de las dos. */
[data-band-photo] { aspect-ratio: 4 / 3; }

@media (min-width: 721px) {
  [data-band-photo] { aspect-ratio: 16 / 9; }
}

/* En celular todo el contenido va centrado: títulos, párrafos, datos de las
   tarjetas y las filas de botones. Los campos del formulario se quedan
   alineados a la izquierda a propósito — escribir sobre texto centrado es
   incómodo y el cursor salta con cada letra.
   Lleva !important donde el valor base va en el atributo style del elemento
   (los márgenes de los títulos y el justify-content de las filas). */
@media (max-width: 720px) {
  [data-mob-center] { text-align: center; }

  [data-mob-center] h1,
  [data-mob-center] h2,
  [data-mob-center] h3,
  [data-mob-center] p { margin-left: auto !important; margin-right: auto !important; }

  [data-mob-center] [data-row] { justify-content: center !important; }
  [data-mob-center] [data-col] { align-items: center !important; }
  [data-mob-center] [data-stack] { flex-direction: column; align-items: center !important; }

  [data-mob-center] label { text-align: left; }
}

[data-rail] { scrollbar-width: none; }
[data-rail]::-webkit-scrollbar { display: none; }

@keyframes am-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Estados hover. Llevan !important porque el color base va en el atributo
   style de cada elemento y de otro modo ganaría siempre. */
.hv-red:hover      { background: #e8465c !important; color: #fff !important; }
.hv-red-bg:hover   { background: #e8465c !important; }
.hv-crimson:hover  { background: #cf2f45 !important; }
.hv-cream:hover    { background: #f4eee1 !important; }
.hv-icy:hover      { background: #e6f4fa !important; }
.hv-white:hover    { background: #fff !important; }
.hv-cyan:hover     { background: #35b3d8 !important; color: #fff !important; }
.hv-cyan-d:hover   { background: #2b97b8 !important; }
.hv-green:hover    { background: #7fc243 !important; color: #fff !important; }
.hv-green-d:hover  { background: #6aa835 !important; }
.hv-orange:hover   { background: #f18b2c !important; color: #fff !important; }
.hv-dim:hover      { filter: brightness(0.96); }
.hv-dim-s:hover    { filter: brightness(0.985); }
.hv-dim-l:hover    { filter: brightness(0.93); }
.hv-lift:hover     { box-shadow: 0 16px 34px rgba(31,36,48,0.12) !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}