/* Las utilidades que usa el markup, escritas a mano.

   La v1 usaba Tailwind. Acá no, y no es purismo: el build es stdlib de Python 3 a
   propósito, y un sitio estático que necesita `npm install` para regenerarse es un sitio
   que en dos años no se va a poder tocar. Son ~100 clases de una propiedad cada una; el
   CSS generado por Tailwind para las mismas pesaba 25 KB.

   Se conserva el MISMO vocabulario de clases que la v1 en lugar de inventar nombres
   semánticos, por una razón concreta: el criterio de aceptación es un diff de píxeles, y
   mantener el DOM y el CSS equivalentes a la v1 —que ya está verificada— es lo que evita
   ir a cazar corrimientos sutiles después.

   Reset mínimo: sólo lo que Tailwind aportaba y el sitio necesita. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* El atributo `hidden` tiene que ganarle a las clases de display.
 *
 * Sin esto, `<div hidden class="flex">` se muestra: el `display:none` del hidden viene de
 * la hoja del navegador y cualquier selector de clase le gana. El síntoma fue que el menú
 * de mobile aparecía abierto tapando la página entera — en desktop no, porque ahí lo
 * apagaba `md:hidden`. El reset de Tailwind trae esta regla; el escrito a mano no la
 * tenía. */
[hidden] {
  display: none !important;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

ul,
ol,
menu {
  list-style: none;
  padding: 0;
}

fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}

/* --- display --- */
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.mt-auto { margin-top: auto; }

/* --- alineación --- */
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* --- gaps: los valores que usa el markup --- */
.gap-0 { gap: 0; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-\[7px\] { gap: 7px; }
.gap-\[2vw\] { gap: 2vw; }

/* --- posición --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.-top-6 { top: -1.5rem; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.-z-10 { z-index: -10; }
.isolate { isolation: isolate; }

/* --- tamaño --- */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-0 { width: 0; }
.w-9 { width: 2.25rem; }
.w-11 { width: 2.75rem; }
.w-\[26px\] { width: 26px; }
.h-full { height: 100%; }
.h-0 { height: 0; }
.h-px { height: 1px; }
.h-9 { height: 2.25rem; }
.h-11 { height: 2.75rem; }
.h-\[52px\] { height: 52px; }
.h-\[230px\] { height: 230px; }
.h-\[var\(--header-logo-height\)\] { height: var(--header-logo-height); }
.min-w-0 { min-width: 0; }
.min-w-\[9rem\] { min-width: 9rem; }
.min-h-\[200px\] { min-height: 200px; }

/* --- espaciado --- */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-10 { margin-top: 2.5rem; }
.ml-\[9px\] { margin-left: 9px; }
.p-\[5px\] { padding: 5px; }
.px-2 { padding-inline: 0.5rem; }
.px-3 { padding-inline: 0.75rem; }
.px-6 { padding-inline: 1.5rem; }
.py-1 { padding-block: 0.25rem; }
.py-2 { padding-block: 0.5rem; }
.py-\[2px\] { padding-block: 2px; }
.px-\[6vw\] { padding-inline: 6vw; }
.py-\[5\.1vw\] { padding-block: 5.1vw; }

/* --- tipografía y decoración --- */
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.uppercase { text-transform: uppercase; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.not-italic { font-style: normal; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-\[1\.7\] { line-height: 1.7; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.decoration-1 { text-decoration-thickness: 1px; }
.underline-offset-\[0\.35em\] { text-underline-offset: 0.35em; }
.underline-offset-\[0\.2em\] { text-underline-offset: 0.2em; }

/* --- bordes y sombras --- */
.border-0 { border: 0; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.rounded-full { border-radius: 9999px; }
.rounded-md { border-radius: 0.375rem; }
.rounded-\[20px\] { border-radius: 20px; }
.rounded-\[25px\] { border-radius: 25px; }
.overflow-hidden { overflow: hidden; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.bg-current { background-color: currentColor; }
.opacity-0 { opacity: 0; }
.opacity-40 { opacity: 0.4; }

.hover\:no-underline:hover { text-decoration: none; }
.hover\:opacity-70:hover { opacity: 0.7; }

/* --- accesibilidad --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* El enlace de salto: invisible hasta que llega el foco por teclado. */
.skip-link:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus-visible {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 50;
}

/* --- desktop (el breakpoint del Fluid Engine) --- */
@media (width >= 768px) {
  .md\:hidden { display: none; }
  .md\:flex { display: flex; }
  .md\:contents { display: contents; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:absolute { position: absolute; }
  .md\:right-0 { right: 0; }
  .md\:top-\[13px\] { top: 13px; }
  .md\:translate-x-full { transform: translateX(100%); }
  .md\:mt-0 { margin-top: 0; }
  .md\:h-\[78px\] { height: 78px; }
  .md\:w-auto { width: auto; }
  .md\:flex-1 { flex: 1 1 0%; }
  .md\:px-3 { padding-inline: 0.75rem; }
  .md\:py-2 { padding-block: 0.5rem; }
  .md\:px-\[4vw\] { padding-inline: 4vw; }
  .md\:py-\[0\.9vw\] { padding-block: 0.9vw; }
  .md\:rounded-\[55px\] { border-radius: 55px; }
}

/* --- el buscador (placeholder de Hostaway): mitades en mobile --- */
.w-1\/2 { width: 50%; }
.h-\[56px\] { height: 56px; }
.flex-1 { flex: 1 1 0%; }
.grid { display: grid; }

@media (width >= 640px) {
  .sm\:grid-cols-2 { grid-template-columns: 1fr 1fr; }
}