/* * Viaja Bonita — legacy iPad / Safari fallback stylesheet. * * WHY THIS EXISTS * ─────────────── * Tailwind v4 emits nearly all resets and utilities inside CSS cascade layers * (@layer base, @layer utilities, …). Older iPad Safari (iOS ≤ 15.3) does not * understand cascade layers and silently drops the entire @layer block, leaving * the page looking like raw HTML: blue underlined links, collapsed image * containers, and completely unstyled cards. * * This file is deliberately plain CSS — no @layer, no @property, no modern-only * at-rules — so legacy Safari gets a safe, functional baseline while modern * browsers continue to use the full Tailwind bundle. Because this file is * unlayered (loaded via before the Tailwind bundle), modern browsers will * prefer Tailwind's layered utilities for any classes not defined here, and the * definitions here are identical in value to what Tailwind would produce. * * LOADING ORDER (layout.tsx) * ────────────────────────── * 1. /legacy-ipad-fallback.css ← this file (unlayered, early in ) * 2. globals.css bundle ← Tailwind @import + @layer blocks * Modern browsers apply both; legacy Safari only benefits from (1). * * MAINTENANCE * ─────────── * Add entries when a new page uses a utility class that is only in @layer. * Keep values identical to Tailwind v4 defaults. Never add @layer here. */ /* ─── Box-sizing reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ─── Document base ───────────────────────────────────────────────────────── */ html { min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #fbf3ea; /* --color-cream */ scroll-behavior: smooth; } body { min-height: 100%; margin: 0; background: #fbf3ea; color: #26343a; /* --color-text-main */ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main, section, header, footer, nav, article, aside, div { box-sizing: border-box; } /* ─── Link reset (kills blue underlined links) ────────────────────────────── */ a { color: inherit; text-decoration: none; } /* ─── Form elements ───────────────────────────────────────────────────────── */ button, input, select, textarea { font: inherit; } button { cursor: pointer; } input:disabled, button:disabled { opacity: .6; cursor: not-allowed; } /* ─── Media elements ──────────────────────────────────────────────────────── */ img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } /* ─── Typography scale ────────────────────────────────────────────────────── */ .text-xs { font-size: .75rem; line-height: 1rem; } .text-sm { font-size: .875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-6xl { font-size: 3.75rem; line-height: 1; } .text-7xl { font-size: 4.5rem; line-height: 1; } /* ─── Font weight & style ─────────────────────────────────────────────────── */ .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .italic { font-style: italic; } .not-italic { font-style: normal; } /* ─── Line height ─────────────────────────────────────────────────────────── */ .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .leading-snug { line-height: 1.375; } .leading-normal { line-height: 1.5; } .leading-relaxed { line-height: 1.625; } /* ─── Text alignment & transform ─────────────────────────────────────────── */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } /* ─── Text decoration ─────────────────────────────────────────────────────── */ .underline { text-decoration-line: underline; } .no-underline { text-decoration-line: none; } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-4 { text-underline-offset: 4px; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Display ─────────────────────────────────────────────────────────────── */ .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .hidden { display: none; } /* ─── Position ────────────────────────────────────────────────────────────── */ .static { position: static; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } /* ─── Inset / placement ───────────────────────────────────────────────────── */ .inset-0 { inset: 0; } .top-0 { top: 0; } .top-1\/2 { top: 50%; } .right-0 { right: 0; } .right-4 { right: 1rem; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .left-4 { left: 1rem; } /* ─── Transform (icon centering in inputs) ────────────────────────────────── */ .-translate-y-1\/2 { transform: translateY(-50%); } .translate-y-0 { transform: translateY(0); } /* ─── Z-index ─────────────────────────────────────────────────────────────── */ .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; } /* ─── Flex helpers ────────────────────────────────────────────────────────── */ .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .shrink-0 { flex-shrink: 0; } .flex-shrink-0 { flex-shrink: 0; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } /* ─── Grid ────────────────────────────────────────────────────────────────── */ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* ─── Gap ─────────────────────────────────────────────────────────────────── */ .gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-9 { gap: 2.25rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; } /* ─── Space-y / space-x (vertical/horizontal child spacing) ──────────────── */ .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: .25rem; } .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; } .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; } .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; } .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; } .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; } .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; } .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: .5rem; } .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: .75rem; } .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; } /* ─── Padding (all sides) ─────────────────────────────────────────────────── */ .p-0 { padding: 0; } .p-1 { padding: .25rem; } .p-2 { padding: .5rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } /* ─── Padding x-axis ─────────────────────────────────────────────────────── */ .px-2 { padding-left: .5rem; padding-right: .5rem; } .px-3 { padding-left: .75rem; padding-right: .75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } /* ─── Padding y-axis ─────────────────────────────────────────────────────── */ .py-1 { padding-top: .25rem; padding-bottom: .25rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } .py-3 { padding-top: .75rem; padding-bottom: .75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .py-32 { padding-top: 8rem; padding-bottom: 8rem; } /* ─── Padding one-axis ───────────────────────────────────────────────────── */ .pt-0 { padding-top: 0; } .pt-1 { padding-top: .25rem; } .pt-2 { padding-top: .5rem; } .pt-3 { padding-top: .75rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: .25rem; } .pb-2 { padding-bottom: .5rem; } .pb-3 { padding-bottom: .75rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; } /* One-axis left/right — critical for icon-offset inputs (pl-11) */ .pl-2 { padding-left: .5rem; } .pl-3 { padding-left: .75rem; } .pl-4 { padding-left: 1rem; } .pl-5 { padding-left: 1.25rem; } .pl-6 { padding-left: 1.5rem; } .pl-11 { padding-left: 2.75rem; } .pr-2 { padding-right: .5rem; } .pr-4 { padding-right: 1rem; } .pr-5 { padding-right: 1.25rem; } .pr-6 { padding-right: 1.5rem; } /* ─── Margin (all sides) ─────────────────────────────────────────────────── */ .mx-auto { margin-left: auto; margin-right: auto; } .mx-0 { margin-left: 0; margin-right: 0; } .my-0 { margin-top: 0; margin-bottom: 0; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; } .mt-20 { margin-top: 5rem; } .-mt-1 { margin-top: -.25rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .ml-0 { margin-left: 0; } .ml-1 { margin-left: .25rem; } .ml-2 { margin-left: .5rem; } .ml-3 { margin-left: .75rem; } .ml-auto { margin-left: auto; } .mr-0 { margin-right: 0; } .mr-1 { margin-right: .25rem; } .mr-2 { margin-right: .5rem; } .mr-3 { margin-right: .75rem; } .mr-auto { margin-right: auto; } /* ─── Width & max-width ───────────────────────────────────────────────────── */ .w-px { width: 1px; } .w-2 { width: .5rem; } .w-3 { width: .75rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .w-11 { width: 2.75rem; } .w-12 { width: 3rem; } .w-16 { width: 4rem; } .w-24 { width: 6rem; } .w-32 { width: 8rem; } .w-48 { width: 12rem; } .w-64 { width: 16rem; } .w-full { width: 100%; } .w-auto { width: auto; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; } .max-w-full { max-width: 100%; } .max-w-none { max-width: none; } /* ─── Height & min-height ─────────────────────────────────────────────────── */ .h-px { height: 1px; } .h-1 { height: .25rem; } .h-2 { height: .5rem; } .h-3 { height: .75rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-16 { height: 4rem; } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-32 { height: 8rem; } .h-40 { height: 10rem; } .h-48 { height: 12rem; } .h-64 { height: 16rem; } .h-full { height: 100%; } .h-screen { height: 100vh; } .h-\[48px\] { height: 48px; } .h-\[60px\] { height: 60px; } .h-\[72px\] { height: 72px; } .h-\[76px\] { height: 76px; } .h-\[86px\] { height: 86px; } .h-\[100px\] { height: 100px; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; min-height: 100svh; } .min-h-\[58px\] { min-height: 58px; } /* ─── Arbitrary max-width utilities (landing/dashboard) ───────────────────── */ .max-w-\[220px\] { max-width: 220px; } .max-w-\[440px\] { max-width: 440px; } .max-w-\[460px\] { max-width: 460px; } .max-w-\[470px\] { max-width: 470px; } .max-w-\[580px\] { max-width: 580px; } .max-w-\[640px\] { max-width: 640px; } .max-w-\[960px\] { max-width: 960px; } .max-w-\[1200px\] { max-width: 1200px; } .max-w-\[1440px\] { max-width: 1440px; } /* ─── Arbitrary width ─────────────────────────────────────────────────────── */ .w-\[48px\] { width: 48px; } .w-\[60px\] { width: 60px; } .w-\[72px\] { width: 72px; } .w-\[76px\] { width: 76px; } /* ─── Overflow ────────────────────────────────────────────────────────────── */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } /* ─── Object-fit ──────────────────────────────────────────────────────────── */ .object-cover { object-fit: cover; } .object-contain { object-fit: contain; } .object-center { object-position: center; } /* ─── Opacity ─────────────────────────────────────────────────────────────── */ .opacity-0 { opacity: 0; } .opacity-60 { opacity: .6; } .opacity-80 { opacity: .8; } .opacity-100 { opacity: 1; } /* ─── Border & border-radius ─────────────────────────────────────────────── */ .rounded { border-radius: .25rem; } .rounded-md { border-radius: .375rem; } .rounded-lg { border-radius: .5rem; } .rounded-xl { border-radius: .75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full { border-radius: 9999px; } .border { border: 1px solid #ede7e3; } .border-0 { border: 0; } .border-b { border-bottom: 1px solid #ede7e3; } .border-t { border-top: 1px solid #ede7e3; } /* ─── Background & color ──────────────────────────────────────────────────── */ .bg-white { background-color: #fff; } .bg-transparent { background-color: transparent; } .text-white { color: #fff; } /* ─── Shadows ─────────────────────────────────────────────────────────────── */ .shadow-sm { box-shadow: 0 1px 2px rgba(38,52,58,.08); } .shadow-md { box-shadow: 0 8px 20px rgba(38,52,58,.12); } .shadow-lg { box-shadow: 0 12px 28px rgba(38,52,58,.14); } .shadow-2xl { box-shadow: 0 24px 60px rgba(38,52,58,.2); } .shadow-none { box-shadow: none; } /* ─── Misc ────────────────────────────────────────────────────────────────── */ .select-none { -webkit-user-select: none; user-select: none; } .pointer-events-none { pointer-events: none; } .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .resize-none { resize: none; } /* ─── Next/Image `fill` — absolutely-positioned fill images ─────────────── */ /* Specificity 0-1-1 wins over img { height: auto } (0-0-1). */ img[data-nimg="fill"] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ─── Destination cards / links — safe baseline if utility CSS is ignored ── */ a[href^="/destinos/"], a[href*="/destinos/"] { color: inherit; text-decoration: none; } a[href^="/destinos/"][class*="rounded"], a[href*="/destinos/"][class*="rounded"] { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #ede7e3; box-shadow: 0 1px 2px rgba(38,52,58,.08); } /* ─── sm: breakpoint (640 px) ────────────────────────────────────────────── */ @media (min-width: 640px) { .sm\:block { display: block; } .sm\:hidden { display: none; } .sm\:flex { display: flex; } .sm\:inline-flex { display: inline-flex; } .sm\:flex-row { flex-direction: row; } .sm\:items-center { align-items: center; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:gap-6 { gap: 1.5rem; } .sm\:gap-8 { gap: 2rem; } .sm\:gap-12 { gap: 3rem; } .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; } .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .sm\:py-12 { padding-top: 3rem; padding-bottom: 3rem; } .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .sm\:h-\[60px\] { height: 60px; } .sm\:w-\[60px\] { width: 60px; } .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; } .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } } /* ─── md: breakpoint (768 px) ────────────────────────────────────────────── */ @media (min-width: 768px) { .md\:hidden { display: none; } .md\:flex { display: flex; } .md\:inline-flex { display: inline-flex; } .md\:block { display: block; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ─── lg: breakpoint (1024 px) ───────────────────────────────────────────── */ @media (min-width: 1024px) { .lg\:block { display: block; } .lg\:hidden { display: none; } .lg\:flex { display: flex; } .lg\:inline-flex { display: inline-flex; } .lg\:flex-row { flex-direction: row; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:w-64 { width: 16rem; } .lg\:h-\[76px\] { height: 76px; } .lg\:w-\[76px\] { width: 76px; } .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .lg\:text-5xl { font-size: 3rem; line-height: 1; } .lg\:text-6xl { font-size: 3.75rem; line-height: 1; } .lg\:text-7xl { font-size: 4.5rem; line-height: 1; } } /* ─── xl: breakpoint (1280 px) ───────────────────────────────────────────── */ @media (min-width: 1280px) { .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }