/* Paleta propia de AlquilerAutos: Poppins como tipografía (misma familia que
   el resto de los sitios de Interpatagonia/Interwa), azul como acento y un
   degradé azul oscuro como color de marca -- deliberadamente distinto del
   coral/violeta de Entre Alojamientos para que se lea como un producto
   propio, no un clon visual. */

:root {
    --color-acento: #2e6b34;
    --color-acento-hover: #1f4f26;
    --color-marron-oscuro: #3b2a1a;
    --color-marron-claro: #b5651d;
    --color-fondo-claro: #faf5e9;
}

html, body {
    font-family: "Poppins", sans-serif;
    background-color: #ffffff;
}

h1, h2, h3, h4, .uk-navbar-nav > li > a, .uk-logo {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: var(--color-marron-oscuro);
}

a, .uk-link {
    color: var(--color-acento);
}
a:hover, .uk-link:hover {
    color: var(--color-acento-hover);
}

.uk-navbar-nav > li > a {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li > a:hover {
    color: var(--color-acento) !important;
}

.uk-button-primary {
    background-color: var(--color-acento) !important;
    border-color: var(--color-acento) !important;
    font-weight: 700;
}
.uk-button-primary:hover {
    background-color: var(--color-acento-hover) !important;
    border-color: var(--color-acento-hover) !important;
}

/* Hero de la portada: formas suaves con gradientes en vez de fotos de stock
   (todavía no hay banco de fotos propio de vehículos/empresas cargado). */
.hero-aa {
    position: relative;
    overflow: hidden;
    background-color: var(--color-fondo-claro);
    padding-bottom: 50px;
}
.hero-aa::before,
.hero-aa::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.hero-aa::before {
    top: -160px;
    left: -160px;
    width: 420px;
    height: 420px;
    background: linear-gradient(135deg, #3f8a3f 0%, #d9a520 100%);
}
.hero-aa::after {
    bottom: -220px;
    right: -160px;
    width: 480px;
    height: 480px;
    background: linear-gradient(135deg, var(--color-marron-oscuro) 0%, var(--color-marron-claro) 100%);
}

.hero-aa-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px 0;
}
.hero-aa-nav-pill {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(59, 42, 26, 0.12);
    padding: 10px 20px;
}
.hero-aa-nav-pill ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    flex-wrap: wrap;
}
.hero-aa-nav-pill a {
    color: var(--color-marron-oscuro);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.hero-aa-nav-pill a:hover { color: var(--color-acento); }
@media (max-width: 640px) {
    .hero-aa-top { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px 0; }
}

.hero-aa-contenido {
    position: relative;
    z-index: 1;
    padding: 60px 40px 40px;
    max-width: 640px;
}

/* Contenedor de la barra de búsqueda: se sale del angosto hero-aa-contenido
   (que es texto alineado a la izquierda) para poder ser ancha y centrada en
   todo el hero, en vez de quedar empujada contra el título. */
.hero-aa-busqueda-wrap {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 28px auto 0;
    padding: 0 40px;
}
@media (max-width: 640px) {
    .hero-aa-busqueda-wrap { padding: 0 20px; }
}

/* Barra de búsqueda del hero, estilo "date-range search" de un sitio de
   alquiler de autos: tarjeta blanca flotante con anillo de acento, ícono
   circular por campo y un botón grande con degradé -- pensada para que
   sea lo primero que salte a la vista del hero, no un formulario discreto. */
.tarjeta-busqueda-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #ffffff;
    outline: 3px solid rgba(46, 107, 52, 0.16);
    box-shadow: 0 28px 54px -14px rgba(59, 42, 26, 0.32), 0 10px 22px -10px rgba(46, 107, 52, 0.25);
    padding: 10px;
    width: 100%;
}
.tarjeta-busqueda-hero-campo {
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-right: 1px solid #eadfc8;
    min-width: 140px;
}
.tarjeta-busqueda-hero-campo:last-of-type { border-right: none; }
.tarjeta-busqueda-hero-campo:focus-within { background-color: var(--color-fondo-claro); border-radius: 12px; }
.tarjeta-busqueda-hero-icono {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3f8a3f 0%, #d9a520 100%);
    color: #ffffff !important;
}
.tarjeta-busqueda-hero-campo label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8c7b66;
    margin-bottom: 2px;
}
.tarjeta-busqueda-hero-campo select,
.tarjeta-busqueda-hero-campo input {
    width: 100%;
    border: none;
    outline: none;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-marron-oscuro);
    background: transparent;
    padding: 2px 0;
}
.tarjeta-busqueda-hero-boton {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 4px;
    padding: 0 32px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #3a7d3f 0%, #2a5e2f 100%);
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 12px 22px -6px rgba(31, 79, 38, 0.55);
    transition: transform 0.15s cubic-bezier(.4,0,.2,1), box-shadow 0.15s cubic-bezier(.4,0,.2,1);
}
.tarjeta-busqueda-hero-boton:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -6px rgba(31, 79, 38, 0.6); }
@media (prefers-reduced-motion: reduce) {
    .tarjeta-busqueda-hero-boton:hover { transform: none; }
}
@media (max-width: 780px) {
    .tarjeta-busqueda-hero { flex-direction: column; padding: 14px; gap: 4px; }
    .tarjeta-busqueda-hero-campo { border-right: none; border-bottom: 1px solid #eadfc8; padding: 10px 6px; }
    .tarjeta-busqueda-hero-campo:last-of-type { border-bottom: none; }
    .tarjeta-busqueda-hero-boton { margin: 6px 0 0; padding: 15px; width: 100%; }
}
.hero-aa-contenido h1 {
    font-size: 2.2rem;
    line-height: 1.25;
}
@media (max-width: 640px) {
    .hero-aa-contenido { padding: 40px 20px 20px; max-width: 100%; }
}

/* Sección "confianza" (por qué elegirnos): mismo peso visual que un bloque
   de trust-badges típico -- título grande + 3 columnas con círculo de
   ícono grande -- pero con contenido cierto sobre el servicio, nunca
   promesas que no cumplimos (nada de "verificado" ni "seguro incluido"). */
.seccion-confianza { padding: 8px 0; }
.confianza-titulo { font-size: 1.9rem; }
.confianza-icono {
    /* flex:none + align-self:center como blindaje extra: uk-grid-match (si
       se vuelve a usar en esta grilla) estira los hijos directos del grid
       item al ancho de la columna y convierte este círculo en un óvalo --
       por eso la grilla de "confianza" NO lleva uk-grid-match. */
    flex: none;
    align-self: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3f8a3f 0%, #d9a520 100%);
    color: #ffffff;
    box-shadow: 0 14px 26px -8px rgba(46, 107, 52, 0.45);
}
.confianza-item-titulo { font-size: 1.05rem; margin-bottom: 6px; }

/* Sección de "cómo funciona": fondo claro con una forma orgánica asomando en la esquina. */
.seccion-como-funciona {
    position: relative;
    overflow: hidden;
    background-color: var(--color-fondo-claro);
    padding: 60px 0;
}
.seccion-como-funciona::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -140px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3f8a3f 0%, #d9a520 100%);
    z-index: 0;
    pointer-events: none;
}
.seccion-como-funciona .uk-container { position: relative; z-index: 1; }
.seccion-como-funciona .uk-card {
    background-color: #ffffff;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
}
.seccion-como-funciona .uk-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 34px rgba(59, 42, 26, 0.18);
}
@media (max-width: 640px) {
    .seccion-como-funciona::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .seccion-como-funciona .uk-card,
    .seccion-como-funciona .uk-card:hover {
        transition: none;
        transform: none;
    }
}

/* Vidriera de vehículos en la home/buscador: tarjetas clickeables con foto
   (o un ícono placeholder si todavía no tiene) y el mismo lift+sombra al
   hover que el resto del sitio. */
.tarjeta-vidriera-link { color: inherit; text-decoration: none; display: block; }
.tarjeta-vidriera-link:hover { color: inherit; }
.tarjeta-vidriera {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1);
}
.tarjeta-vidriera-link:hover .tarjeta-vidriera {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(59, 42, 26, 0.16);
}
.tarjeta-vidriera-foto {
    position: relative;
    height: 160px;
    background-color: var(--color-fondo-claro);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-marron-claro);
    overflow: hidden;
}
.tarjeta-vidriera-foto-sinfoto {
    background: linear-gradient(135deg, #3f8a3f 0%, #d9a520 100%);
}
.tarjeta-vidriera-foto-sinfoto span[uk-icon] { color: #ffffff !important; }
.tarjeta-vidriera-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #16a34a !important;
    color: #fff !important;
}
@media (prefers-reduced-motion: reduce) {
    .tarjeta-vidriera-link:hover .tarjeta-vidriera {
        transform: none;
        transition: none;
    }
}

/* Carrusel de logos de empresas ("Empresas que trabajan con nosotros"):
   cinta que se desliza sola en loop infinito, en escala de grises hasta que
   el visitante pasa el mouse -- patrón estándar de "trust bar" de logos. */
.seccion-logos {
    background-color: #ffffff;
    padding: 56px 0 60px;
    overflow: hidden;
}
.carrusel-logos-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.carrusel-logos-pista {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: deslizar-logos 32s linear infinite;
}
.carrusel-logos-viewport:hover .carrusel-logos-pista {
    animation-play-state: paused;
}
.carrusel-logos-item {
    flex: none;
    height: 56px;
    display: flex;
    align-items: center;
}
.carrusel-logos-item img {
    max-height: 56px;
    max-width: 180px;
    width: auto;
    height: auto;
    display: block;
    filter: grayscale(1) opacity(0.55);
    transition: filter 0.2s cubic-bezier(.4,0,.2,1);
}
.carrusel-logos-item img:hover {
    filter: grayscale(0) opacity(1);
}
@keyframes deslizar-logos {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .carrusel-logos-pista { animation: none; }
    .carrusel-logos-viewport { overflow-x: auto; }
}

/* Sección con el degradé azul de marca */
.seccion-marca {
    background: linear-gradient(to right, var(--color-marron-oscuro) 0%, var(--color-marron-claro) 100%);
    color: #ffffff;
}
.seccion-marca h2, .seccion-marca h3 {
    color: #ffffff;
}

/* Las animaciones de aparición de UIkit (uk-scrollspy) no respetan solas
   esta preferencia -- si el visitante pidió menos movimiento, se muestra
   todo directo, sin animar. */
@media (prefers-reduced-motion: reduce) {
    [class*="uk-animation-"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Variedad de tonos en las tarjetas sin foto: verde, naranja y marrón/amarillo se van alternando. */
.uk-grid > div:nth-child(3n+2) .tarjeta-vidriera-foto-sinfoto { background: linear-gradient(135deg, #e07b12 0%, #f2b632 100%); }
.uk-grid > div:nth-child(3n) .tarjeta-vidriera-foto-sinfoto { background: linear-gradient(135deg, #7a4a1e 0%, #c98a2b 100%); }

/* Barra lateral "Alojate en Interpatagonia" (alojamientos de la red, ver includes/red-alojamientos.php) */
.red-aloj { position: sticky; top: 16px; }
.red-aloj-titulo { font-size: 17px; margin: 0 0 2px; }
.red-aloj-sub { font-size: 12.5px; color: #8c7b66; margin: 0 0 12px; }
.red-aloj-card { background: #fff; border-radius: 14px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 22px -12px rgba(0,0,0,.28); }
.red-aloj-foto { display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--color-acento), #d9a520); background-size: cover; background-position: center; position: relative; }
.red-aloj-badge { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.93); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #333; }
.red-aloj-cuerpo { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.red-aloj-loc { font-size: 12.5px; color: #8c7b66; }
.red-aloj-btn { margin-top: 8px; align-self: flex-start; background: var(--color-acento); color: #fff !important; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 8px; text-decoration: none; }
.red-aloj-btn:hover { background: var(--color-acento-hover); }

/* Celular: la barra superior se acomoda en varias líneas en vez de aplastar el logo, y nada se sale del ancho. */
@media (max-width: 640px) {
    .uk-navbar-container > .uk-container { flex-wrap: wrap; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
    .uk-navbar-left, .uk-navbar-right { width: 100%; justify-content: center; }
    .uk-navbar-container .uk-logo { white-space: nowrap; justify-content: center; }
    .uk-navbar-nav { flex-wrap: wrap; justify-content: center; }
    .uk-navbar-nav > li > a { min-height: 34px; padding: 0 8px; font-size: 11.5px; }
    .hero-aa-top { flex-direction: column; gap: 10px; padding: 16px 16px 0; }
    .hero-aa-nav-pill ul { flex-wrap: wrap; justify-content: center; }
    html, body { overflow-x: hidden; }
    .red-aloj { position: static; margin-top: 24px; }
}
@media (max-width: 780px) {
    .tarjeta-busqueda-hero { box-sizing: border-box; max-width: 100%; }
    .tarjeta-busqueda-hero-campo { flex: 0 0 auto; min-width: 0; }
    .hero-aa-busqueda-wrap { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
}

/* ===== Fondos con movimiento (solo transform/opacity/background-position: livianos; se apagan con "reducir movimiento") ===== */
.hero-aa { background-image: linear-gradient(120deg, #faf5e9 0%, #eef3df 35%, #fbf0d6 65%, #faf5e9 100%); background-size: 300% 300%; animation: fondo-desplaza 26s ease-in-out infinite; }
.hero-aa-top, .hero-aa-contenido, .hero-aa-busqueda-wrap { position: relative; z-index: 2; }
.fondo-mov { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.fondo-mov .orbe { position: absolute; border-radius: 50%; filter: blur(46px); will-change: transform; }
.fondo-mov .o1 { width: 340px; height: 340px; left: 8%; top: 18%; background: rgba(217,165,32,.35); animation: orbe-a 19s ease-in-out infinite alternate; }
.fondo-mov .o2 { width: 420px; height: 420px; right: 6%; top: 4%; background: rgba(63,138,63,.30); animation: orbe-b 24s ease-in-out infinite alternate; }
.fondo-mov .o3 { width: 300px; height: 300px; left: 42%; bottom: -60px; background: rgba(181,101,29,.22); animation: orbe-c 21s ease-in-out infinite alternate; }
.fondo-mov .capa { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-size: 1200px 100%; opacity: .55; }
.fondo-mov .capa1 { height: 130px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,80 L120,40 L220,70 L340,20 L460,65 L560,45 L700,85 L820,30 L940,70 L1060,45 L1200,80 L1200,120 Z' fill='rgb(46,107,52)'/%3E%3C/svg%3E"); animation: capa-mueve 70s linear infinite; opacity: .16; }
.fondo-mov .capa2 { height: 90px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,95 L150,60 L260,88 L400,50 L520,90 L650,62 L780,96 L900,58 L1040,92 L1200,95 L1200,120 Z' fill='rgb(181,101,29)'/%3E%3C/svg%3E"); animation: capa-mueve 46s linear infinite reverse; opacity: .18; }
.hero-aa::before { animation: circulo-a 22s ease-in-out infinite alternate; }
.hero-aa::after { animation: circulo-b 27s ease-in-out infinite alternate; }
.seccion-marca { background-image: linear-gradient(100deg, var(--color-marron-oscuro) 0%, var(--color-marron-claro) 45%, #c98a2b 75%, var(--color-marron-oscuro) 100%); background-size: 250% 100%; animation: fondo-desplaza-x 22s ease-in-out infinite alternate; }
@keyframes fondo-desplaza { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes fondo-desplaza-x { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes orbe-a { from { transform: translate(0,0) scale(1); } to { transform: translate(90px,60px) scale(1.25); } }
@keyframes orbe-b { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-110px,70px) scale(.9); } }
@keyframes orbe-c { from { transform: translate(0,0); } to { transform: translate(-140px,-40px) scale(1.2); } }
@keyframes capa-mueve { from { background-position-x: 0; } to { background-position-x: 1200px; } }
@keyframes circulo-a { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(50px,34px) rotate(14deg); } }
@keyframes circulo-b { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(-46px,-28px) rotate(-12deg); } }
@media (max-width: 640px) { .fondo-mov .orbe { filter: blur(34px); } .fondo-mov .o1, .fondo-mov .o3 { width: 220px; height: 220px; } .fondo-mov .o2 { width: 260px; height: 260px; } }
@media (prefers-reduced-motion: reduce) {
    .hero-aa, .hero-aa::before, .hero-aa::after, .fondo-mov .orbe, .fondo-mov .capa, .seccion-marca { animation: none !important; }
}

/* Tarjeta de video del encabezado (autoplay silencioso, en bucle; se pausa con "reducir movimiento") */
.hero-video { position: relative; z-index: 2; margin: 14px 20px 0; max-width: 620px; }
.hero-video-marco { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 10; background: #0b1220; box-shadow: 0 34px 60px -24px rgba(15, 23, 42, .55); }
.hero-video-marco video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-chip { position: absolute; left: 14px; bottom: 14px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 6px 13px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: #1f2937; }
.hero-video-credito { margin: 8px 6px 0; font-size: 11px; text-align: right; }
.hero-video-credito a { color: #64748b; text-decoration: none; }
@media (min-width: 1180px) {
    .hero-video { position: absolute; right: max(28px, 5vw); top: 118px; width: min(40vw, 520px); margin: 0; }
    .hero-video-marco { transform: rotate(1.4deg); animation: video-flota 9s ease-in-out infinite alternate; }
}
@keyframes video-flota { from { transform: rotate(1.4deg) translateY(0); } to { transform: rotate(-.6deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hero-video-marco { animation: none; } }