### Mortgage Application Process for Expats

Source: https://context7_llms

A step-by-step guide for expatriates applying for a mortgage in Spain, covering budget determination, property search, document preparation, comparison of options, valuation, and finalization.

```APIDOC
MortgageApplication_Expat:
  - Step1_BudgetAndPreQualification:
    - Action: Evaluate personal finances and obtain pre-qualification.
    - Purpose: Determine maximum loan amount.
  - Step2_PropertySearch:
    - Action: Search for properties.
    - Platforms: Idealista, Fotocasa, Habitaclia.
  - Step3_DocumentGathering:
    - RequiredDocuments:
      - NIE (Foreigner Identification Number)
      - Passport
      - Proof of Income (e.g., payslips, tax returns)
      - Credit Reports
      - Employment Details
  - Step4_CompareMortgageOptions:
    - Action: Check interest rates from multiple banks.
    - TypicalRates_2025: 3–5% for expats.
  - Step5_PropertyValuation:
    - Action: Obtain an independent bank-approved valuation (tasación).
    - Cost: Approximately €300–€600.
  - Step6_FinalApplicationSubmission:
    - Action: Provide all documentation to the selected bank.
    - IncludedDocs: NIE, income verification, credit reports, valuation results.
    - ApprovalTimeline: Expect 2–4 weeks for final approval.
  - Step7_FinalizePurchase:
    - Action: Sign purchase contract at notary, pay taxes and fees.
    - TaxesAndFees: 10–15% of the property price.
    - Completion: Property registration.
```

--------------------------------

### Expat City Matching Guide

Source: https://context7_llms

This guide helps expats match their priorities with suitable Spanish cities based on lifestyle and career goals, categorizing cities for digital nomads, young professionals, families, retirees, and culture lovers.

```APIDOC
ExpatCityMatcher:
  For Digital Nomads & Remote Workers:
    Cities: Las Palmas, Valencia, Málaga
    Criteria: Affordable living, fast internet, coworking spaces

  For Young Professionals & Job Seekers:
    Cities: Madrid, Barcelona
    Criteria: Most diverse employment opportunities, networking potential

  For Families with Children:
    Cities: Estepona, Mijas, Valencia
    Criteria: Safety, international schools, relaxed pace of life

  For Retirees:
    Cities: Nerja, Alicante, Estepona
    Criteria: Tranquil, affordable, strong sense of community

  For Culture Lovers:
    Cities: Seville, Granada, Bilbao
    Criteria: Deep-rooted traditions, architecture, festivals
```

--------------------------------

### Spanish Banking Services Overview

Source: https://context7_llms

Compares digital and traditional banks for non-residents in Spain, outlining their typical features, advantages, and disadvantages regarding account setup, IBANs, and service acceptance.

```APIDOC
BankingService:
  Type: Digital
  Providers: [N26, Revolut, Wise]
  Features:
    - Fast, mobile-first setup
    - No Spanish address or NIE required upfront
    - Multi-currency features
    - Low fees
    - Strong English support
  Limitations:
    - May lack a full Spanish IBAN
    - IBANs (e.g., Lithuanian, Belgian, UK) may not be accepted by all Spanish institutions for direct debits, utility bills, or government transactions.

  Type: Traditional
  Providers: [CaixaBank, BBVA, Santander, Sabadell]
  Features:
    - Physical branches
    - Wider service acceptance in Spain
    - Typically provide a Spanish IBAN
    - Work well with landlords, utilities, taxes, and public services
    - English-speaking services often available
  Limitations:
    - Often require more documentation
    - Longer setup times
    - May require in-person appointments
    - May ask for a national ID even for non-residents (especially EU citizens)
```

--------------------------------

### Spain Digital Nomad Visa

Source: https://context7_llms

A guide to Spain's Digital Nomad Visa (DNV), covering eligibility, requirements, and the application process for remote workers and freelancers.

```APIDOC
APIDOC:
  Spain Digital Nomad Visa (DNV):
    Purpose: To allow remote workers and freelancers to live and work in Spain while employed by companies outside Spain or freelancing for clients abroad.
    Eligibility:
      - Work remotely for companies or clients located outside Spain.
      - Minimum 1 year of professional experience in the relevant field.
      - Meet income requirements (typically 200% of the minimum wage in Spain).
    Requirements:
      - Valid passport.
      - Proof of remote employment/freelancing.
      - Criminal record certificate.
      - Medical certificate.
      - Proof of financial means.
      - Health insurance valid in Spain.
    Application Process:
      - Typically applied for from outside Spain at a Spanish consulate or embassy.
      - May involve obtaining a NIE and other local registrations upon arrival.
    Benefits:
      - Allows legal residence and work in Spain.
      - Potential tax benefits under specific conditions.
```

--------------------------------

### Spain Entrepreneur Visa

Source: https://context7_llms

A comprehensive guide to Spain's Entrepreneur Visa, including eligibility criteria, application procedures, and the pathways it provides towards residency and eventual citizenship.

```APIDOC
Visa_Entrepreneur_Spain:
  purpose: "Facilitates residency for entrepreneurs starting businesses in Spain."
  coverage:
    - "Eligibility"
    - "Requirements"
    - "Application Steps"
    - "Pathways to residency and citizenship"
```

--------------------------------

### Spain Job Seeker Visa (Visado de Búsqueda de Empleo)

Source: https://context7_llms

Information on the recently introduced Job Seeker Visa, its legal basis, duration, and key requirements for non-EU nationals seeking employment or to start a business in Spain. It details the application process and conversion to a work permit.

```APIDOC
Job Seeker Visa (Visado de Búsqueda de Empleo):
  Legal Basis: Real Decreto 1155/2024
  Authorization Type: Residence authorisation
  Duration: 12 months
  Eligibility: Qualified non-EU nationals
  Purpose: To look for work or prepare a business in Spain.
  Application Location: Apply from abroad.
  Financial Requirement: Proof of funds equivalent to 200% of the SMI (Indicative: ≈ €23,152 in 2025).
  Post-Arrival Conversion: Can be converted to a work permit upon securing a job.
  Official Source: BOE (Boletín Oficial del Estado)
```

--------------------------------

### Spain Digital Nomad Visa (DNV) TIE Card Collection Process

Source: https://context7_llms

Provides a step-by-step guide to check if your TIE card is ready for collection and how to book an appointment. This process involves checking a lot number against the latest received number at the immigration office.

```APIDOC
TIE Card Collection Status Check:

1. Obtain your lot number from the receipt provided by the immigration office.
2. Visit the Cita previa de Extranjeria website.
3. Select your province.
4. Choose the specific office where you submitted your application.
5. Under 'Selecciona trámite', select 'RECOGIDA DE TARJETA DE IDENTIDAD DE EXTRANJERO (TIE)' and click 'ACCEPTAR'.
6. The next page displays the latest received lot number at the office.
7. Compare your lot number: If your lot number is equal to or lower than the latest received number, your TIE card is ready for pickup.
8. Proceed to book your collection appointment if your card is ready.
```

--------------------------------

### Check TIE Card Readiness for Collection

Source: https://context7_llms

Provides a step-by-step guide to check the status of your TIE (Tarjeta de Identidad de Extranjero) card for collection. This involves locating your lot number, visiting the official website, selecting your province and office, choosing the correct procedure, and comparing your lot number with the latest received lot number.

```APIDOC
Procedure: Check TIE Card Readiness

1.  **Locate Your Lot Number**:
    - Find the receipt from your TIE application submission.
    - Identify the 'número de lote' (lot number) on the receipt.

2.  **Visit Official Website**:
    - Navigate to the Cita previa de Extranjería website.

3.  **Select Province and Office**:
    - Choose your province from the provided list.
    - Under 'Selecciona Oficina', select the specific office where you submitted your TIE application.

4.  **Select Relevant Procedure**:
    - In 'Selecciona trámite', choose 'RECOGIDA DE TARJETA DE IDENTIDAD DE EXTRANJERO (TIE)'.
    - Click 'ACCEPTAR'.

5.  **Check Latest Lot Number**:
    - The system will display a message: 'EL ÚLTIMO LOTE RECIBIDO EN LA OFICINA SELECCIONADA ES EL [NUMERO]'.
    - Compare your lot number with the displayed number.
    - If your lot number is less than or equal to the displayed number, your TIE card is ready for collection.
    - If your lot number is higher, wait and check again later.

6.  **Book Appointment for Collection**:
    - Once confirmed ready, proceed to book an appointment for collection.
```

--------------------------------

### Hero Image Preloading

Source: https://livelovespain.com/guides/renting-vs-buying-in-spain-the-ultimate-guide-for-expats-2025

Optimizes hero image loading by preloading a WebP version based on screen width. It falls back to a smaller preview if an error occurs or the screen is small.

```javascript
!function(){try{const e=window.innerWidth||screen.width,t=document.createElement("link");t.rel="preload",t.as="image",t.type="image/webp",t.fetchPriority="high",t.href=e<=400||e<=768?"/assets/hero-preview-320.webp":"/assets/hero-preview-780.webp",document.head.appendChild(t)}catch(e){const t=document.createElement("link");t.rel="preload",t.as="image",t.href="/assets/hero-preview-320.webp",document.head.appendChild(t)}}()
```

--------------------------------

### Basic CSS Styling and Layout

Source: https://livelovespain.com/guides/opening-a-bank-account-in-spain-for-non-residents

This snippet defines core CSS rules for box-sizing, body styling, responsive containers, and flexbox layouts. It sets up the fundamental visual structure and responsiveness for the application.

```css
*{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.6;color:#1f2937}.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bg-white{background-color:#fff}.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}.z-50{z-index:50}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.pt-24{padding-top:6rem}.pb-12{padding-bottom:3rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.w-full{width:100%}.space-y-6>\*+\*{margin-top:1.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.text-gray-900{color:#111827}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb;--tw-gradient-to:rgb(37 99 235 / 0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-400{--tw-gradient-to:#60a5fa}.bg-clip-text{background-clip:text}.text-transparent{color:transparent}#root{min-height:100vh}.loading-placeholder{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb}@media (min-width:768px){.md\\:text-5xl{font-size:3rem;line-height:1}.lg\\:flex-row{flex-direction:row}.lg\\:gap-12{gap:3rem}.lg\\:w-1\/2{width:50%}}
```

--------------------------------

### Unemployment Benefits Tax Filing Requirement

Source: https://context7_llms

States the mandatory tax return filing requirement for all unemployment benefit recipients in Spain, starting from the 2024 tax year.

```APIDOC
UnemploymentBenefitsTax:
  filingRequirement: "Mandatory for all recipients"
  effectiveYear: 2024
  notes: "Applies regardless of the benefit amount received."
```

--------------------------------

### Hero Image Preloading

Source: https://livelovespain.com/guides/spain-job-seeker-visa-how-to-move-to-spain-without-a-job-offer-and-find-one

Optimizes hero image loading by preloading a WebP version based on screen width. It falls back to a smaller preview if an error occurs or the screen is small.

```javascript
!function(){try{const e=window.innerWidth||screen.width,t=document.createElement("link");t.rel="preload",t.as="image",t.type="image/webp",t.fetchPriority="high",t.href=e<=400||e<=768?"/assets/hero-preview-320.webp":"/assets/hero-preview-780.webp",document.head.appendChild(t)}catch(e){const t=document.createElement("link");t.rel="preload",t.as="image",t.href="/assets/hero-preview-320.webp",document.head.appendChild(t)}}()
```

--------------------------------

### Hero Image Preloading

Source: https://livelovespain.com/guides/how-to-integrate-into-spanish-culture-a-fun-honest-guide-for-newcomers

Optimizes hero image loading by preloading a WebP version based on screen width. It falls back to a smaller preview if an error occurs or the screen is small.

```javascript
!function(){try{const e=window.innerWidth||screen.width,t=document.createElement("link");t.rel="preload",t.as="image",t.type="image/webp",t.fetchPriority="high",t.href=e<=400||e<=768?"/assets/hero-preview-320.webp":"/assets/hero-preview-780.webp",document.head.appendChild(t)}catch(e){const t=document.createElement("link");t.rel="preload",t.as="image",t.href="/assets/hero-preview-320.webp",document.head.appendChild(t)}}()
```

--------------------------------

### Basic CSS Styling and Layout

Source: https://livelovespain.com/guides/top-cities-in-spain-for-expats-a-comprehensive-overview

This snippet defines core CSS rules for box-sizing, body styling, responsive containers, and flexbox layouts. It sets up the fundamental visual structure and responsiveness for the application.

```css
*{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.6;color:#1f2937}.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bg-white{background-color:#fff}.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}.z-50{z-index:50}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.pt-24{padding-top:6rem}.pb-12{padding-bottom:3rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.w-full{width:100%}.space-y-6>\*+\*{margin-top:1.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.text-gray-900{color:#111827}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb;--tw-gradient-to:rgb(37 99 235 / 0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-400{--tw-gradient-to:#60a5fa}.bg-clip-text{background-clip:text}.text-transparent{color:transparent}#root{min-height:100vh}.loading-placeholder{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb}@media (min-width:768px){.md\\:text-5xl{font-size:3rem;line-height:1}.lg\\:flex-row{flex-direction:row}.lg\\:gap-12{gap:3rem}.lg\\:w-1\/2{width:50%}}
```

--------------------------------

### Spin Animation

Source: https://livelovespain.com/terms

This CSS animation defines a simple rotation effect, starting from 0 degrees and completing a full 360-degree turn. It is typically used for loading spinners or other rotating visual elements.

```css-animation
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
```

--------------------------------

### General Page Styling

Source: https://livelovespain.com/guides/renting-vs-buying-in-spain-the-ultimate-guide-for-expats-2025

Applies base styling for the page layout, including box-sizing, font families, colors, and responsive container widths. It sets up a mobile-first approach with breakpoints for larger screens.

```css
*{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.6;color:#1f2937}.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bg-white{background-color:#fff}.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}.z-50{z-index:50}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.pt-24{padding-top:6rem}.pb-12{padding-bottom:3rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.w-full{width:100%}.space-y-6>\*+\*{margin-top:1.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.text-gray-900{color:#111827}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb;--tw-gradient-to:rgb(37 99 235 / 0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-400{--tw-gradient-to:#60a5fa}.bg-clip-text{background-clip:text}.text-transparent{color:transparent}#root{min-height:100vh}.loading-placeholder{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb}@media (min-width:768px){.md\\:text-5xl{font-size:3rem;line-height:1}.lg\\:flex-row{flex-direction:row}.lg\\:gap-12{gap:3rem}.lg\\:w-1\/2{width:50%}}
```

--------------------------------

### Spin Animation

Source: https://livelovespain.com/guides/top-cities-in-spain-for-expats-a-comprehensive-overview

This CSS animation defines a simple rotation effect, starting from 0 degrees and completing a full 360-degree turn. It is typically used for loading spinners or other rotating visual elements.

```css-animation
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
```

--------------------------------

### Basic CSS Styling and Layout

Source: https://livelovespain.com/guides/etias-application-how-to-apply-for-the-new-eu-travel-authorisation

This snippet defines core CSS rules for box-sizing, body styling, responsive containers, and flexbox layouts. It sets up the fundamental visual structure and responsiveness for the application.

```css
*{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.6;color:#1f2937}.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bg-white{background-color:#fff}.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}.z-50{z-index:50}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.pt-24{padding-top:6rem}.pb-12{padding-bottom:3rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.w-full{width:100%}.space-y-6>\*+\*{margin-top:1.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.text-gray-900{color:#111827}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb;--tw-gradient-to:rgb(37 99 235 / 0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-400{--tw-gradient-to:#60a5fa}.bg-clip-text{background-clip:text}.text-transparent{color:transparent}#root{min-height:100vh}.loading-placeholder{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb}@media (min-width:768px){.md\\:text-5xl{font-size:3rem;line-height:1}.lg\\:flex-row{flex-direction:row}.lg\\:gap-12{gap:3rem}.lg\\:w-1\/2{width:50%}}
```

--------------------------------

### Spin Animation

Source: https://livelovespain.com/guides/tax-essentials-navigating-spain-s-personal-income-tax-irpf-system-in-2025

This CSS animation defines a simple rotation effect, starting from 0 degrees and completing a full 360-degree turn. It is typically used for loading spinners or other rotating visual elements.

```css-animation
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
```

--------------------------------

### Basic CSS Styling and Layout

Source: https://livelovespain.com/guides/7-biggest-mistakes-when-moving-to-spain-and-how-you-can-avoid-them

This snippet defines core CSS rules for box-sizing, body styling, responsive containers, and flexbox layouts. It sets up the fundamental visual structure and responsiveness for the application.

```css
*{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.6;color:#1f2937}.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bg-white{background-color:#fff}.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}.z-50{z-index:50}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.pt-24{padding-top:6rem}.pb-12{padding-bottom:3rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.w-full{width:100%}.space-y-6>\*+\*{margin-top:1.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.text-gray-900{color:#111827}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb;--tw-gradient-to:rgb(37 99 235 / 0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-400{--tw-gradient-to:#60a5fa}.bg-clip-text{background-clip:text}.text-transparent{color:transparent}#root{min-height:100vh}.loading-placeholder{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb}@media (min-width:768px){.md\\:text-5xl{font-size:3rem;line-height:1}.lg\\:flex-row{flex-direction:row}.lg\\:gap-12{gap:3rem}.lg\\:w-1\/2{width:50%}}
```

--------------------------------

### Hero Image Preloading

Source: https://livelovespain.com/guides/smart-saving-10-ways-to-save-money-living-in-spain-with-bonus-tips

Optimizes hero image loading by preloading a WebP version based on screen width. It falls back to a smaller preview if an error occurs or the screen is small.

```javascript
!function(){try{const e=window.innerWidth||screen.width,t=document.createElement("link");t.rel="preload",t.as="image",t.type="image/webp",t.fetchPriority="high",t.href=e<=400||e<=768?"/assets/hero-preview-320.webp":"/assets/hero-preview-780.webp",document.head.appendChild(t)}catch(e){const t=document.createElement("link");t.rel="preload",t.as="image",t.href="/assets/hero-preview-320.webp",document.head.appendChild(t)}}()
```

--------------------------------

### Spin Animation

Source: https://livelovespain.com/guides/how-to-obtain-a-nie-in-spain-in-2025-foreigner-identification-number

This CSS animation defines a simple rotation effect, starting from 0 degrees and completing a full 360-degree turn. It is typically used for loading spinners or other rotating visual elements.

```css-animation
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
```

--------------------------------

### Hero Image Preloading

Source: https://livelovespain.com/guides/spain-s-non-lucrative-visa-complete-guide-and-how-to-apply

Optimizes hero image loading by preloading a WebP version based on screen width. It falls back to a smaller preview if an error occurs or the screen is small.

```javascript
!function(){try{const e=window.innerWidth||screen.width,t=document.createElement("link");t.rel="preload",t.as="image",t.type="image/webp",t.fetchPriority="high",t.href=e<=400||e<=768?"/assets/hero-preview-320.webp":"/assets/hero-preview-780.webp",document.head.appendChild(t)}catch(e){const t=document.createElement("link");t.rel="preload",t.as="image",t.href="/assets/hero-preview-320.webp",document.head.appendChild(t)}}()
```

--------------------------------

### Spin Animation

Source: https://livelovespain.com/guides/etias-application-how-to-apply-for-the-new-eu-travel-authorisation

This CSS animation defines a simple rotation effect, starting from 0 degrees and completing a full 360-degree turn. It is typically used for loading spinners or other rotating visual elements.

```css-animation
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
```

--------------------------------

### Hero Image Preloading

Source: https://livelovespain.com/guides/understanding-spain-s-entrepreneur-visa

Optimizes hero image loading by preloading a WebP version based on screen width. It falls back to a smaller preview if an error occurs or the screen is small.

```javascript
!function(){try{const e=window.innerWidth||screen.width,t=document.createElement("link");t.rel="preload",t.as="image",t.type="image/webp",t.fetchPriority="high",t.href=e<=400||e<=768?"/assets/hero-preview-320.webp":"/assets/hero-preview-780.webp",document.head.appendChild(t)}catch(e){const t=document.createElement("link");t.rel="preload",t.as="image",t.href="/assets/hero-preview-320.webp",document.head.appendChild(t)}}()
```

--------------------------------

### Spin Animation

Source: https://livelovespain.com/guides/opening-a-bank-account-in-spain-for-non-residents

This CSS animation defines a simple rotation effect, starting from 0 degrees and completing a full 360-degree turn. It is typically used for loading spinners or other rotating visual elements.

```css-animation
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
```

--------------------------------

### Hero Image Preloading

Source: https://livelovespain.com/guides/spain-s-digital-nomad-visa-international-teleworker-visa-a-complete-guide

Optimizes hero image loading by preloading a WebP version based on screen width. It falls back to a smaller preview if an error occurs or the screen is small.

```javascript
!function(){try{const e=window.innerWidth||screen.width,t=document.createElement("link");t.rel="preload",t.as="image",t.type="image/webp",t.fetchPriority="high",t.href=e<=400||e<=768?"/assets/hero-preview-320.webp":"/assets/hero-preview-780.webp",document.head.appendChild(t)}catch(e){const t=document.createElement("link");t.rel="preload",t.as="image",t.href="/assets/hero-preview-320.webp",document.head.appendChild(t)}}()
```

--------------------------------

### Spin Animation

Source: https://livelovespain.com/guides/7-biggest-mistakes-when-moving-to-spain-and-how-you-can-avoid-them

This CSS animation defines a simple rotation effect, starting from 0 degrees and completing a full 360-degree turn. It is typically used for loading spinners or other rotating visual elements.

```css-animation
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
```

--------------------------------

### Basic CSS Styling and Layout

Source: https://livelovespain.com/guides/tax-essentials-navigating-spain-s-personal-income-tax-irpf-system-in-2025

This snippet defines core CSS rules for box-sizing, body styling, responsive containers, and flexbox layouts. It sets up the fundamental visual structure and responsiveness for the application.

```css
*{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.6;color:#1f2937}.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bg-white{background-color:#fff}.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}.z-50{z-index:50}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.pt-24{padding-top:6rem}.pb-12{padding-bottom:3rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.w-full{width:100%}.space-y-6>\*+\*{margin-top:1.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.text-gray-900{color:#111827}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb;--tw-gradient-to:rgb(37 99 235 / 0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-400{--tw-gradient-to:#60a5fa}.bg-clip-text{background-clip:text}.text-transparent{color:transparent}#root{min-height:100vh}.loading-placeholder{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb}@media (min-width:768px){.md\\:text-5xl{font-size:3rem;line-height:1}.lg\\:flex-row{flex-direction:row}.lg\\:gap-12{gap:3rem}.lg\\:w-1\/2{width:50%}}
```

--------------------------------

### Spin Animation

Source: https://livelovespain.com/guides/29-mind-blowing-facts-about-spain-you-probably-didn-t-know

This CSS animation defines a simple rotation effect, starting from 0 degrees and completing a full 360-degree turn. It is typically used for loading spinners or other rotating visual elements.

```css-animation
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
```

--------------------------------

### Hero Image Preloading

Source: https://livelovespain.com/guides/spanish-citizenship-by-descent-2025-complete-guide-to-nacionalidad-espa-ola-through-parents-or-grandparents

Optimizes hero image loading by preloading a WebP version based on screen width. It falls back to a smaller preview if an error occurs or the screen is small.

```javascript
!function(){try{const e=window.innerWidth||screen.width,t=document.createElement("link");t.rel="preload",t.as="image",t.type="image/webp",t.fetchPriority="high",t.href=e<=400||e<=768?"/assets/hero-preview-320.webp":"/assets/hero-preview-780.webp",document.head.appendChild(t)}catch(e){const t=document.createElement("link");t.rel="preload",t.as="image",t.href="/assets/hero-preview-320.webp",document.head.appendChild(t)}}()
```