/* ============================================================ VIAJES CATALINA — css/style.css Paleta: Navy profundo + Azul CTA (#1D4ED8) + dorado como detalle Header: barra azul mate, translúcida, sin brillos ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap'); /* ── Variables ──────────────────────────────────────────── */ :root { /* Paleta Navy — Seria y Elegante */ --primary: #142240; /* Navy profundo */ --primary-dark: #0c1628; /* Navy casi negro */ --primary-light: #1e3360; /* Navy medio */ --primary-pale: #e4eaf4; /* Azul muy claro */ /* Azul de las cabeceras internas y la caja de contacto. Es oscuro pero totalmente saturado, por eso se lee como azul y no como gris, que era el problema del navy anterior. */ --navy-deep: #000B3E; /* CTA Azul — corrido desde el #2235DD de catalinaviajes.com.pe. Aquel tiene tono 230°, que cae en azul-violeta; sobre un botón grande y con brillo encima se leía morado. Este está en 220°: mismo familia, pero claramente azul. */ --cta: #1d4ed8; --cta-light: #2563eb; --cta-deep: #1739a8; --cta-hover: #1739a8; --cta-shadow: rgba(29,78,216,.34); /* Neutros */ --neutral-900: #0a0f1a; --neutral-800: #1c2537; --neutral-700: #2e3f5c; --neutral-600: #4a5a78; --neutral-500: #6b7a96; --neutral-400: #98a5bc; --neutral-300: #c4cddc; --neutral-200: #dde3ef; --neutral-100: #eef1f8; --neutral-50: #f5f7fb; --white: #ffffff; /* Dorado: solo detalles chicos (estrellas, dot activo, iconos) */ --gold: #d4a843; --gold-light: #f0d68a; /* Tipografía */ --font-head: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; /* Layout */ --max-w: 1280px; --rad-sm: .375rem; --rad: .75rem; --rad-lg: 1.25rem; --rad-xl: 2rem; --rad-pill: 9999px; /* Sombras */ --sh-sm: 0 1px 4px rgba(0,0,0,.08); --sh: 0 4px 16px rgba(0,0,0,.10); --sh-lg: 0 10px 40px rgba(0,0,0,.14); --sh-xl: 0 20px 60px rgba(0,0,0,.18); --sh-cta: 0 6px 24px var(--cta-shadow); --sh-navy: 0 6px 24px rgba(12,22,40,.35); /* Transiciones */ --ease: all .25s cubic-bezier(.4,0,.2,1); --ease-slow: all .45s cubic-bezier(.4,0,.2,1); } /* ── Reset ──────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth} body{font-family:var(--font-body);font-size:1rem;line-height:1.75;color:var(--neutral-800);background:var(--white);-webkit-font-smoothing:antialiased} /* El menú móvil vive fuera de pantalla con translateX(100%). Con overflow-x solo en , el valor se propaga al viewport y body deja de recortar: el menú alarga el área desplazable y el header fijo se estira a ese ancho, apareciendo scroll horizontal. Declararlo también en lo evita. `clip` es preferible a `hidden` porque no crea un contenedor de scroll — `hidden` queda de reserva para navegadores que no lo soporten. */ html,body{overflow-x:hidden} @supports (overflow-x:clip){ html,body{overflow-x:clip} } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{cursor:pointer;font-family:var(--font-body);border:none;background:none} input,textarea,select{font-family:var(--font-body)} /* ── Tipografía ─────────────────────────────────────────── */ h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;line-height:1.2;color:var(--neutral-900)} h1{font-size:clamp(2.25rem,5vw,4rem);font-weight:800} h2{font-size:clamp(1.75rem,3.5vw,2.75rem)} h3{font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:600} p{color:var(--neutral-600);line-height:1.75} /* ── Layout ─────────────────────────────────────────────── */ .container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.5rem} @media(min-width:1024px){.container{padding:0 2rem}} .section{padding:5rem 0} .section-sm{padding:3rem 0} /* ── Botones ─────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--font-body);font-weight:600;font-size:.875rem; letter-spacing:.05em;text-transform:uppercase; padding:.875rem 2rem;border-radius:var(--rad-pill); border:1.5px solid transparent; transition:var(--ease);white-space:nowrap;cursor:pointer; } /* ── Botones ── Planos, con un degradé mínimo para dar volumen sin parecer gel. El brillo blanco encima y el halo interno se sacaron a propósito: eran lo que daba el aspecto de botón brillante de los 2000 y, sobre el azul, lo empujaban al morado. Modernidad acá es color sólido, borde limpio y una sombra que acompaña el color del botón. */ .btn-cta{ color:var(--white);border-color:transparent; background:linear-gradient(180deg, var(--cta-light) 0%, var(--cta) 100%); box-shadow:0 2px 6px rgba(29,78,216,.22), 0 6px 18px var(--cta-shadow); } .btn-cta:hover{ background:linear-gradient(180deg, var(--cta) 0%, var(--cta-deep) 100%); transform:translateY(-2px); box-shadow:0 4px 10px rgba(29,78,216,.26), 0 10px 26px var(--cta-shadow); } .btn-cta:active{transform:translateY(0);box-shadow:0 1px 4px rgba(29,78,216,.3)} .btn-cta:focus-visible{outline:2px solid var(--cta-light);outline-offset:3px} /* Outline blanco (sobre fondos oscuros) */ .btn-outline-white{ color:var(--white); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.40); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .btn-outline-white:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.75); transform:translateY(-2px); } .btn-outline-white:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:3px} /* Outline navy (sobre fondos claros) */ .btn-outline-primary{ background:transparent;color:var(--primary);border-color:var(--primary); } .btn-outline-primary:hover{ background:var(--primary);color:var(--white); transform:translateY(-2px);box-shadow:var(--sh-navy); } /* Outline dorado */ .btn-outline-gold{ background:transparent;color:var(--cta);border-color:var(--cta); } .btn-outline-gold:hover{ background:var(--cta);color:var(--white); transform:translateY(-2px);box-shadow:var(--sh-cta); } .btn-lg{padding:1.125rem 2.5rem;font-size:.9375rem} .btn-sm{padding:.625rem 1.375rem;font-size:.8125rem} .btn-full{width:100%;justify-content:center} /* ── Labels de sección ──────────────────────────────────── */ .section-label{ display:inline-flex;align-items:center;gap:.625rem; font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--cta);margin-bottom:.875rem; } .section-label::before{ content:'';display:inline-block;width:2rem;height:1.5px; background:var(--cta);border-radius:var(--rad-pill); } .section-title{font-family:var(--font-head);font-weight:800;color:var(--neutral-900);margin-bottom:1rem} .section-subtitle{font-size:1.0625rem;color:var(--neutral-500);max-width:42rem;line-height:1.7} /* ══════════════════════════════════════════════════════════ TOP BAR (info de contacto) ══════════════════════════════════════════════════════════ */ .topbar{ background:transparent;padding:.45rem 0; /* el vidrio lo pone .site-header */ border-bottom:1px solid rgba(255,255,255,.07);font-size:.8125rem; transition:var(--ease-slow);overflow:hidden; } .topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .topbar-left{display:flex;align-items:center;gap:1.25rem} .topbar-item{display:flex;align-items:center;gap:.375rem;color:rgba(255,255,255,.6);font-weight:500;transition:var(--ease)} .topbar-item:hover{color:rgba(255,255,255,.9)} .topbar-item svg{opacity:.6;flex-shrink:0} .topbar-sep{width:1px;height:.875rem;background:rgba(255,255,255,.15)} .topbar-right{display:flex;align-items:center;gap:1rem} .topbar-social{display:flex;gap:.5rem} .topbar-social a{ display:flex;align-items:center;justify-content:center; width:1.6rem;height:1.6rem;border-radius:var(--rad-pill); background:rgba(255,255,255,.08);color:rgba(255,255,255,.6); font-size:.75rem;transition:var(--ease); } .topbar-social a:hover{background:var(--cta);color:var(--white);transform:translateY(-1px)} .topbar-region{ display:flex;align-items:center;gap:.375rem;padding:.2rem .625rem; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); border-radius:var(--rad-pill);font-size:.7rem;font-weight:700;color:rgba(255,255,255,.7); } @media(max-width:640px){.topbar{display:none}} /* ══════════════════════════════════════════════════════════ HEADER — AZUL MATE Una sola barra azul, sin brillos ni reflejos. Mantiene algo de translucidez y un desenfoque suave para que el fondo se insinúe, pero el color lo pone el tinte, no el reflejo: eso es lo que lo vuelve mate en lugar de vidriado. Los hijos (promo / topbar / nav) van transparentes para que no se lean como tres barras apiladas. ══════════════════════════════════════════════════════════ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:1000; /* Azul con un punto más de saturación y algo más de transparencia que antes: se abre ~10% para dejar pasar el fondo. Sigue sin degradé blanco encima — eso era lo que daba el aspecto mojado. */ background:rgba(15,50,114,.72); /* Desenfoque algo mayor: es lo que aporta el efecto vidrio sin recurrir a brillos. La saturación sube apenas, para que el fondo no se cuele lavado a través del azul. */ backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%); border-bottom:1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), /* filo apenas insinuado */ 0 2px 14px rgba(5,20,48,.22); transition:background .35s ease,box-shadow .3s ease; } /* Al hacer scroll se cierra bastante y el azul se hace más intenso, pero deja entrever el contenido que pasa por detrás */ .site-header.scrolled{ background:rgba(12,44,106,.86); border-bottom-color:rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 18px rgba(5,20,48,.34); } /* El contenido va por encima del fondo del header */ .header-nav{background:transparent} /* Nav interior */ .nav-inner{display:flex;align-items:center;justify-content:space-between;height:4.25rem;gap:1rem} /* Logo */ .nav-logo{display:flex;align-items:center;gap:.625rem;flex-shrink:0;transition:var(--ease)} .nav-logo:hover{opacity:.9;transform:scale(1.015)} /* Isotipo vectorial (img/logo-viajes-catalina.svg): cuadrado, fondo transparente y colores claros propios — no lleva filtro. El nombre de la marca lo pone .logo-text en HTML, asi se renderiza con Outfit. */ .logo-img{height:2.5rem;width:2.5rem;object-fit:contain;flex-shrink:0} .logo-text{display:flex;flex-direction:column;line-height:1} .logo-name{font-family:var(--font-head);font-size:1.2rem;font-weight:800;color:var(--white);letter-spacing:-.015em} .logo-sub{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)} /* Desktop Links */ .nav-links{display:none;align-items:center;gap:.0625rem} @media(min-width:1024px){.nav-links{display:flex}} .nav-link{ display:flex;flex-direction:column;align-items:center;gap:.175rem; padding:.5rem .9375rem;border-radius:var(--rad); color:rgba(255,255,255,.72);font-size:.65rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;transition:var(--ease);position:relative; } .nav-link svg{opacity:.55;transition:var(--ease)} .nav-link:hover{color:var(--white);background:rgba(255,255,255,.08)} .nav-link:hover svg{opacity:.9} .nav-link.active{color:var(--white)} .nav-link.active::after{ content:'';position:absolute;bottom:.25rem;left:50%; transform:translateX(-50%);width:1.25rem;height:1.5px; background:var(--gold);border-radius:var(--rad-pill); } /* Nav Actions */ .nav-actions{display:flex;align-items:center;gap:.75rem} .nav-cta{display:none} @media(min-width:1024px){.nav-cta{display:inline-flex}} .nav-toggle{ display:flex;align-items:center;justify-content:center; width:2.375rem;height:2.375rem;border-radius:var(--rad); background:rgba(255,255,255,.1);color:var(--white);transition:var(--ease); } .nav-toggle:hover{background:rgba(255,255,255,.18)} @media(min-width:1024px){.nav-toggle{display:none}} /* ── PROMO STRIP — BARRA SUPERIOR (encima de todo) ─────────── */ .header-promo{ overflow:hidden; /* Franja azul plana, un tono más oscura que el resto del header para que se distinga sin necesidad de brillos. */ background:rgba(11,38,92,.55); border-bottom:1px solid rgba(255,255,255,.10); padding:.3rem 0; /* NO colapsa al hacer scroll — siempre arriba */ } .promo-track{ display:flex;gap:.75rem; animation:marquee 34s linear infinite; width:max-content; } .promo-track:hover{animation-play-state:paused} .promo-chip{ flex-shrink:0;display:flex;align-items:center;gap:.4rem; padding:.25rem .875rem; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:var(--rad-pill); font-size:.75rem;font-weight:600;color:rgba(255,255,255,.88); white-space:nowrap; } .promo-chip span{color:var(--gold);font-weight:700} .promo-chip .sep{color:rgba(255,255,255,.25);font-weight:400;font-size:.7rem} @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* Offset para header fijo: promo ≈30px + topbar ≈36px + nav ≈68px = ~134px */ /* --header-h lo mide main.js sobre el header real (promo + topbar + nav) y lo actualiza en cada resize. El 8.5rem es solo el fallback si el JS no corre: de mas, nunca de menos, para que no tape el contenido. Va duplicado con .page-hero.header-offset a proposito: .page-hero declara el atajo `padding` mas abajo en este archivo y, con la misma especificidad, ganaba por orden y pisaba este padding-top (ese era el motivo real de que el breadcrumb quedara tapado). Con la doble clase ya no depende del orden. */ .header-offset, .page-hero.header-offset{padding-top:calc(var(--header-h, 8.5rem) + 1.5rem)} /* ── Mobile Menu ─────────────────────────────────────────── */ .mobile-menu{ position:fixed;inset:0;z-index:2000; background:var(--primary-dark); display:flex;flex-direction:column; transform:translateX(100%);opacity:0; /* visibility lo saca del recorrido con Tab y de los lectores de pantalla: con solo translateX seguía siendo enfocable aunque no se viera. */ visibility:hidden; transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility 0s linear .35s; pointer-events:none; } .mobile-menu.open{ transform:translateX(0);opacity:1;visibility:visible;pointer-events:all; transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility 0s; } .mob-header{ display:flex;align-items:center;justify-content:space-between; padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08); } .mob-close{ display:flex;align-items:center;justify-content:center; width:2.25rem;height:2.25rem;border-radius:var(--rad); background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);transition:var(--ease); } .mob-close:hover{background:rgba(255,255,255,.15);color:var(--white)} .mob-nav{flex:1;overflow-y:auto;padding:1rem 0} .mob-link{ display:flex;align-items:center;justify-content:space-between; padding:1rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.05); color:rgba(255,255,255,.72);font-family:var(--font-head); font-size:1.5rem;font-weight:700;transition:var(--ease); } .mob-link:hover{color:var(--white);padding-left:2rem} .mob-footer{padding:1.5rem;border-top:1px solid rgba(255,255,255,.08)} /* ══════════════════════════════════════════════════════════ HERO — IMÁGENES NÍTIDAS (overlay muy suave) ══════════════════════════════════════════════════════════ */ .hero{ position:relative;height:100dvh;min-height:600px; overflow:hidden;background:var(--neutral-900); } .hero-slides{position:absolute;inset:0} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;will-change:opacity} .hero-slide.active{opacity:1} .hero-slide img{ width:100%;height:100%;object-fit:cover;object-position:center; animation:kenburns 16s ease-out forwards; /* Un punto de saturación y contraste para que el color quede vivo. Antes había un image-rendering:crisp-edges acá: ese valor es para pixel art y en fotos escaladas corta los bordes en vez de suavizarlos, lo que las hacía ver duras y sucias. */ filter:saturate(1.14) contrast(1.05); } /* Scale muy suave para no degradar calidad */ @keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1)}} /* Overlay mínimo — imágenes máxima nitidez y viveza */ /* Scrim en dos capas. El degradé de abajo solo no alcanza: el texto del hero está a media altura, donde ese degradé ya casi no tiñe, y sobre una foto clara (playa, nieve, cielo) el texto desaparece. La capa lateral oscurece el lado izquierdo — que es donde va el texto — y deja la foto limpia hacia la derecha, en vez de apagar la imagen entera. */ .slide-overlay{ position:absolute;inset:0; background: /* Mancha concentrada en la esquina donde está el texto, con caída rápida. Un degradé que cubre toda la foto apaga los colores; este oscurece solo lo necesario y deja limpio el resto de la imagen. */ radial-gradient(120% 95% at 6% 90%, rgba(4,10,22,.82) 0%, rgba(4,10,22,.46) 32%, rgba(4,10,22,.12) 58%, rgba(4,10,22,.00) 76%), /* Base inferior tenue, solo para el badge de ubicación y los puntitos */ linear-gradient(to top, rgba(4,10,22,.42) 0%, rgba(4,10,22,.08) 26%, rgba(4,10,22,.00) 52%); } /* En pantallas angostas el texto ocupa todo el ancho: la mancha se centra abajo en vez de ir a la izquierda. */ @media(max-width:768px){ .slide-overlay{ background: radial-gradient(155% 85% at 50% 96%, rgba(4,10,22,.84) 0%, rgba(4,10,22,.52) 38%, rgba(4,10,22,.16) 68%, rgba(4,10,22,.00) 86%); } } /* Contenido del hero */ .hero-content{ position:relative;z-index:10;height:100%; display:flex;flex-direction:column;justify-content:flex-end; padding-bottom:5rem; } .hero-text{max-width:56rem} .hero-eyebrow{ display:inline-flex;align-items:center;gap:.625rem; font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.95);margin-bottom:1.25rem; opacity:0;transform:translateY(20px);animation:slideUp .8s ease forwards .3s; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.55); } .eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse 2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}} .hero-title{ font-family:var(--font-head);font-size:clamp(2.5rem,6vw,5rem); font-weight:800;color:var(--white);line-height:1.1;margin-bottom:1.25rem; opacity:0;transform:translateY(25px);animation:slideUp .9s ease forwards .5s; text-shadow:0 2px 6px rgba(0,0,0,.55), 0 4px 24px rgba(0,0,0,.45); } .hero-title .accent{color:var(--white);font-style:italic;font-weight:700} .hero-subtitle{ font-size:clamp(1rem,2vw,1.175rem);color:rgba(255,255,255,.85); line-height:1.65;max-width:36rem;margin-bottom:2.25rem; opacity:0;transform:translateY(20px);animation:slideUp .9s ease forwards .7s; text-shadow:0 1px 4px rgba(0,0,0,.75), 0 2px 16px rgba(0,0,0,.45); } .hero-actions{ display:flex;align-items:center;gap:1rem;flex-wrap:wrap; opacity:0;transform:translateY(20px);animation:slideUp .9s ease forwards .9s; } @keyframes slideUp{to{opacity:1;transform:translateY(0)}} /* Hero badge (ubicación) */ .hero-badge{ position:absolute;bottom:2rem;right:2rem;z-index:20; display:flex;flex-direction:column;align-items:flex-end;gap:.75rem; pointer-events:none; } .hero-location{ display:flex;align-items:center;gap:.5rem; background:rgba(0,0,0,.38);backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.15); padding:.5rem 1rem;border-radius:var(--rad-pill); color:rgba(255,255,255,.92);font-size:.8125rem;font-weight:500; } .hero-location svg{color:var(--gold);flex-shrink:0} .hero-dots{display:flex;gap:.5rem;pointer-events:all} .hero-dot{ height:3px;border-radius:var(--rad-pill); background:rgba(255,255,255,.35);transition:all .4s ease; cursor:pointer;border:none;width:.875rem; } .hero-dot.active{width:2.25rem;background:var(--gold);box-shadow:0 0 10px rgba(212,168,67,.6)} @media(max-width:768px){.hero-badge{right:1rem;bottom:1.5rem}} /* ══════════════════════════════════════════════════════════ TOUR CARDS ══════════════════════════════════════════════════════════ */ .tours-section{background:linear-gradient(180deg,var(--white) 0%,var(--neutral-50) 100%)} .tours-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2.5rem;gap:1.5rem;flex-wrap:wrap} /* Carrusel real, con scroll horizontal nativo. Antes era una grilla de 3 columnas que el JS movía con translateX: con 6 tarjetas eso da 2 filas, así que al pulsar "siguiente" se iba la primera columna de ambas y quedaba un hueco en blanco, sin contenido nuevo. Con flex + scroll-snap el gesto táctil funciona solo, los botones apenas desplazan, y no hay estado que se desincronice al cambiar de tamaño. */ .tours-slider{position:relative} .tours-track{ display:flex;gap:1.5rem; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.25rem .25rem 1rem; /* aire para que no se corten las sombras */ margin:-.25rem -.25rem -1rem; scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* Edge viejo */ } .tours-track::-webkit-scrollbar{display:none} .tours-track > .tour-card{ flex:0 0 calc((100% - 3rem) / 3); scroll-snap-align:start; } @media(max-width:900px){ .tours-track > .tour-card{flex-basis:calc((100% - 1.5rem) / 2)} } @media(max-width:580px){ /* Se deja asomar la siguiente tarjeta: indica que hay más para deslizar */ .tours-track > .tour-card{flex-basis:86%} } .slider-nav{display:flex;gap:.5rem} .slider-btn{ display:flex;align-items:center;justify-content:center; width:2.625rem;height:2.625rem;border-radius:var(--rad-pill); border:1.5px solid var(--neutral-200);background:var(--white); color:var(--neutral-600);transition:var(--ease);box-shadow:var(--sh-sm); } .slider-btn:hover{ border-color:var(--primary);color:var(--primary); transform:scale(1.05);box-shadow:var(--sh-navy); } /* Tour Card */ .tour-card{ background:var(--white);border-radius:var(--rad-lg);overflow:hidden; box-shadow:var(--sh-sm);border:1px solid var(--neutral-100); transition:var(--ease);display:flex;flex-direction:column; } .tour-card:hover{transform:translateY(-6px);box-shadow:var(--sh-xl)} .card-img{position:relative;aspect-ratio:4/3;overflow:hidden} .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .tour-card:hover .card-img img{transform:scale(1.06)} .card-badge{ position:absolute;top:.875rem;left:.875rem; padding:.275rem .8rem;background:var(--cta);color:var(--white); font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; border-radius:var(--rad-pill);box-shadow:var(--sh-cta); } .card-badge.promo{background:#2d7a4f;box-shadow:0 4px 12px rgba(45,122,79,.3)} .card-body{padding:1.25rem 1.5rem 1.5rem;flex:1;display:flex;flex-direction:column} .card-region{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-light);margin-bottom:.375rem} .card-title{font-family:var(--font-head);font-size:1.0625rem;font-weight:700;color:var(--neutral-900);line-height:1.3;margin-bottom:.625rem} .card-meta{display:flex;align-items:center;gap:.875rem;margin-bottom:1rem;flex-wrap:wrap} .card-meta-item{display:flex;align-items:center;gap:.3rem;font-size:.8125rem;color:var(--neutral-500);font-weight:500} .card-meta-item svg{color:var(--primary-light);flex-shrink:0} .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:1rem;border-top:1px solid var(--neutral-100)} .price-from{font-size:.7rem;color:var(--neutral-400);font-weight:500;display:block;margin-bottom:.2rem} .price-amount{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--primary)} .price-cur{font-size:.875rem;font-weight:600;color:var(--neutral-400)} /* Filter Tabs */ .filter-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem} .filter-tab{ padding:.5625rem 1.25rem;border-radius:var(--rad-pill); border:1.5px solid var(--neutral-200);background:var(--white); color:var(--neutral-600);font-size:.875rem;font-weight:600;transition:var(--ease);cursor:pointer; } .filter-tab:hover{border-color:var(--primary);color:var(--primary)} .filter-tab.active{background:var(--primary);border-color:var(--primary);color:var(--white);box-shadow:var(--sh-navy)} /* ══════════════════════════════════════════════════════════ POR QUÉ ELEGIRNOS ══════════════════════════════════════════════════════════ */ /* El azul anterior (#0c1628 → #142240) era muy oscuro Y poco saturado a la vez: con esa luminosidad tan baja el color no llega a leerse como azul y la sección se ve gris sucia. Este degradé sube las dos cosas —luminosidad y saturación— y termina en el azul del CTA, así la sección se integra con los botones y el encabezado en vez de competir. */ .why-section{ background:linear-gradient(135deg, #0d2a6b 0%, #14409b 55%, #1a4fc4 100%); position:relative;overflow:hidden; } .why-section::before{ content:'';position:absolute;inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); } .why-section .section-label{color:var(--gold-light)} .why-section .section-label::before{background:var(--gold-light)} .why-section .section-title{color:var(--white)} .why-section .section-subtitle{color:rgba(255,255,255,.80)} .why-grid{ display:grid;grid-template-columns:1fr; gap:2rem;position:relative;z-index:1; } /* Columnas explícitas: con auto-fit quedaban 5 pistas para 4 tarjetas y los anchos salían desparejos según el ancho de pantalla. */ @media(min-width:600px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.why-grid{grid-template-columns:repeat(4,1fr)}} .why-card{ background:rgba(6,20,54,.28);border:1px solid rgba(255,255,255,.16); border-radius:var(--rad-lg);padding:2rem 1.5rem;transition:var(--ease);text-align:center; } .why-card:hover{background:rgba(6,20,54,.40);border-color:rgba(255,255,255,.26);transform:translateY(-4px)} .why-icon{ width:3.75rem;height:3.75rem;border-radius:var(--rad-lg); background:rgba(212,168,67,.20);border:1px solid rgba(212,168,67,.42); display:flex;align-items:center;justify-content:center; margin:0 auto 1.25rem;color:var(--gold);transition:var(--ease); } .why-card:hover .why-icon{background:var(--cta);border-color:var(--cta);color:var(--white);transform:scale(1.08)} .why-title{font-family:var(--font-head);font-size:1.0625rem;font-weight:700;color:var(--white);margin-bottom:.625rem} .why-desc{font-size:.9375rem;color:rgba(255,255,255,.78);line-height:1.65} /* ══════════════════════════════════════════════════════════ TESTIMONIOS ══════════════════════════════════════════════════════════ */ .testimonials-section{background:var(--neutral-50)} .testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.5rem} .testi-card{ background:var(--white);border-radius:var(--rad-lg);padding:1.75rem; border:1px solid var(--neutral-100);box-shadow:var(--sh-sm); transition:var(--ease);display:flex;flex-direction:column;gap:1rem; } .testi-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .testi-stars{display:flex;gap:.25rem;color:var(--gold)} .testi-text{font-size:.9375rem;color:var(--neutral-700);line-height:1.7;font-style:italic;flex:1} .testi-author{display:flex;align-items:center;gap:.875rem;padding-top:1rem;border-top:1px solid var(--neutral-100)} .testi-avatar{ width:3rem;height:3rem;border-radius:var(--rad-pill); background:linear-gradient(135deg,var(--primary),var(--primary-light)); display:flex;align-items:center;justify-content:center; color:var(--white);font-family:var(--font-head);font-size:1.125rem;font-weight:700;flex-shrink:0; } .testi-name{font-weight:700;color:var(--neutral-900);font-size:.9375rem} .testi-origin{font-size:.8125rem;color:var(--neutral-400)} /* ══════════════════════════════════════════════════════════ BANNER CATALINA VIAJES ══════════════════════════════════════════════════════════ */ .catalina-section{ background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 55%,var(--primary-light) 100%); position:relative;overflow:hidden; } .catalina-section::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse at 80% 50%,rgba(196,147,63,.10) 0%,transparent 65%); } .catalina-section .container{ position:relative;z-index:1;display:flex; align-items:center;justify-content:space-between; gap:3rem;flex-wrap:wrap;padding-top:4rem;padding-bottom:4rem; } .catalina-section .section-label{color:rgba(255,255,255,.55)} .catalina-section .section-label::before{background:rgba(255,255,255,.35)} .catalina-section .section-title{color:var(--white);font-size:clamp(1.75rem,3vw,2.25rem)} .catalina-desc{color:rgba(255,255,255,.7);font-size:1.0625rem;line-height:1.7;max-width:36rem;margin-top:.75rem;margin-bottom:2rem} .catalina-actions{display:flex;gap:1rem;flex-wrap:wrap} /* Adorno de la sección. Antes eran banderas emoji, pero Windows no tiene glifo para ellas y las dibuja como el par de letras que las compone ("AR", "PE"), que se leía como un error de tipeo. Un SVG se ve igual en todos los sistemas. */ .catalina-flag{ flex-shrink:0;width:9rem;height:9rem; color:rgba(255,255,255,.16); filter:drop-shadow(0 10px 30px rgba(0,0,0,.25)); } .catalina-flag svg{width:100%;height:100%;display:block} @media(max-width:768px){.catalina-flag{width:6rem;height:6rem}} /* ══════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════ */ /* Azul profundo y plano, a propósito SIN el vidrio del header: el footer cierra la página y funciona mejor como bloque sólido que asienta el diseño, en vez de competir con el encabezado. */ .site-footer{ background:#010A33; color:rgba(255,255,255,.7); padding-top:4rem; } .footer-grid{ display:grid;grid-template-columns:1fr;gap:3rem; padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08); } /* Perú y Argentina son columnas hermanas, una al lado de la otra. En tablet caen a 2x2 y en celular a una sola columna. */ @media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr .9fr}} .footer-about{font-size:.9375rem;color:rgba(255,255,255,.55);line-height:1.7;max-width:22rem;margin-bottom:1.5rem} .footer-social{display:flex;gap:.625rem} .footer-social a{ width:2.375rem;height:2.375rem;border-radius:var(--rad-pill); border:1px solid rgba(255,255,255,.15); display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.6);font-size:.875rem;transition:var(--ease); } .footer-social a:hover{background:var(--cta);border-color:var(--cta);color:var(--white);transform:translateY(-2px)} .footer-col-title{ font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem; } .footer-contact-list{display:flex;flex-direction:column;gap:.875rem} .footer-contact-item{ display:flex;align-items:flex-start;gap:.75rem; font-size:.9375rem;color:rgba(255,255,255,.65);transition:var(--ease); } .footer-contact-item:hover{color:rgba(255,255,255,.9)} .footer-contact-item svg{color:var(--cta);flex-shrink:0;margin-top:.125rem} .footer-contact-item a{color:inherit} .footer-contact-item a:hover{color:var(--white)} .footer-site-link{ display:inline-flex;align-items:center;gap:.5rem;margin-top:.875rem; padding:.4375rem .875rem;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);border-radius:var(--rad-pill); font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.75);transition:var(--ease); } .footer-site-link:hover{background:var(--cta);border-color:var(--cta);color:var(--white);transform:translateX(2px)} .footer-links-list{display:flex;flex-direction:column;gap:.625rem} .footer-links-list a{font-size:.9375rem;color:rgba(255,255,255,.6);transition:var(--ease);display:flex;align-items:center;gap:.375rem} .footer-links-list a:hover{color:rgba(255,255,255,.9);padding-left:.375rem} .footer-bottom{padding:1.25rem 0;border-top:1px solid rgba(255,255,255,.06)} .footer-bottom .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .footer-copy{font-size:.8125rem;color:rgba(255,255,255,.35)} .footer-badges{display:flex;align-items:center;gap:.75rem} .footer-badge{ font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.35);padding:.2rem .5rem; border:1px solid rgba(255,255,255,.12);border-radius:var(--rad-sm); } /* ══════════════════════════════════════════════════════════ PAGE HERO (páginas internas) ══════════════════════════════════════════════════════════ */ .page-hero{ background:var(--navy-deep); padding:6rem 0 5rem;color:var(--white);position:relative;overflow:hidden; } /* Curva muy abierta: al llevar la elipse a 220% del ancho, solo se ve el tramo central del arco, así que queda casi recta con una insinuación de curva. Menos altura también la aplana. */ .page-hero::after{ content:'';position:absolute;bottom:-1px;left:0;right:0;height:3rem; background:var(--white);clip-path:ellipse(220% 100% at 50% 100%); } .page-hero-title{ font-family:var(--font-head);font-size:clamp(2rem,4vw,3.25rem); font-weight:800;color:var(--white);margin-bottom:.875rem; } .page-hero-subtitle{font-size:1.0625rem;color:rgba(255,255,255,.7);max-width:36rem} .breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:rgba(255,255,255,.5);margin-bottom:1.25rem} .breadcrumb a{color:rgba(255,255,255,.65);transition:var(--ease)} .breadcrumb a:hover{color:var(--white)} .breadcrumb-sep{opacity:.35} /* ══════════════════════════════════════════════════════════ NOSOTROS ══════════════════════════════════════════════════════════ */ .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem} @media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}} .stat-card{ text-align:center;padding:2rem 1rem;background:var(--white); border-radius:var(--rad-lg);border:1px solid var(--neutral-100); box-shadow:var(--sh-sm);transition:var(--ease); } .stat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .stat-number{ font-family:var(--font-head);font-size:clamp(2.5rem,5vw,3.5rem); font-weight:800;color:var(--primary);line-height:1;margin-bottom:.5rem; } .stat-label{font-size:.875rem;font-weight:600;color:var(--neutral-500);text-transform:uppercase;letter-spacing:.06em} .about-two-col{display:grid;grid-template-columns:1fr;gap:4rem;align-items:center} @media(min-width:768px){.about-two-col{grid-template-columns:1fr 1fr}} .about-img{border-radius:var(--rad-xl);overflow:hidden;box-shadow:var(--sh-xl)} .about-img img{width:100%;height:auto;object-fit:cover} .values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem} .value-card{ background:var(--white);border-radius:var(--rad-lg);padding:2rem; border:1px solid var(--neutral-100);box-shadow:var(--sh-sm); transition:var(--ease);border-top:2px solid var(--cta); } .value-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .value-icon{font-size:2.25rem;margin-bottom:1rem} .value-title{font-family:var(--font-head);font-weight:700;font-size:1.0625rem;color:var(--neutral-900);margin-bottom:.625rem} .value-desc{font-size:.9375rem;color:var(--neutral-500);line-height:1.7} /* ══════════════════════════════════════════════════════════ CONTACTO ══════════════════════════════════════════════════════════ */ .contact-layout{display:grid;grid-template-columns:1fr;gap:3rem} @media(min-width:900px){.contact-layout{grid-template-columns:1fr 1.5fr}} .contact-info-box{ background:var(--navy-deep); border-radius:var(--rad-xl);padding:2.5rem;color:var(--white); } .contact-info-title{font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--white);margin-bottom:2rem} .contact-info-list{display:flex;flex-direction:column;gap:1.5rem} .contact-info-item{display:flex;align-items:flex-start;gap:1rem} .contact-info-icon{ width:2.75rem;height:2.75rem;border-radius:var(--rad); background:rgba(255,255,255,.1);display:flex;align-items:center; justify-content:center;color:var(--gold);flex-shrink:0; } .contact-info-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.25rem} .contact-info-value{font-size:.9375rem;color:rgba(255,255,255,.85);line-height:1.5} .contact-info-value a{color:inherit} .contact-form-box{ background:var(--white);border-radius:var(--rad-xl);padding:2.5rem; box-shadow:var(--sh-lg);border:1px solid var(--neutral-100); } .form-title{font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--neutral-900);margin-bottom:1.75rem} /* Panel de contacto por WhatsApp (reemplaza al formulario) */ .wa-lead{font-size:.9375rem;color:var(--neutral-600);line-height:1.7;margin-bottom:1.75rem} .wa-steps{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem} .wa-steps li{ display:flex;align-items:flex-start;gap:.875rem; font-size:.9375rem;color:var(--neutral-700);line-height:1.6; } .wa-step-n{ flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:var(--rad-pill); background:var(--cta);color:var(--white); display:flex;align-items:center;justify-content:center; font-family:var(--font-head);font-size:.8125rem;font-weight:700; } .btn-wa{ color:var(--white);border-color:transparent; background:linear-gradient(180deg, #2BDD72 0%, #1FAE57 100%); box-shadow:0 2px 6px rgba(31,174,87,.22), 0 6px 18px rgba(31,174,87,.30); } .btn-wa:hover{ background:linear-gradient(180deg, #1FAE57 0%, #178F46 100%); transform:translateY(-2px); box-shadow:0 4px 10px rgba(31,174,87,.26), 0 10px 26px rgba(31,174,87,.34); } .btn-wa:focus-visible{outline:2px solid #2BDD72;outline-offset:3px} .wa-alt{font-size:.8125rem;color:var(--neutral-500);text-align:center;margin-top:1.25rem;line-height:1.7} .wa-alt a{color:var(--cta);font-weight:600} .wa-alt a:hover{text-decoration:underline} /* Botón flotante de WhatsApp — presente en todas las páginas */ .wa-float{ position:fixed;right:1.25rem;bottom:1.25rem;z-index:900; width:3.5rem;height:3.5rem;border-radius:var(--rad-pill); background:#25D366;color:var(--white); display:flex;align-items:center;justify-content:center; box-shadow:0 6px 24px rgba(37,211,102,.45);transition:var(--ease); } .wa-float:hover{background:#1DAF52;transform:scale(1.08)} @media(max-width:640px){.wa-float{right:1rem;bottom:1rem;width:3.25rem;height:3.25rem}} /* ══════════════════════════════════════════════════════════ PAQUETES ══════════════════════════════════════════════════════════ */ .packages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.5rem} /* ══════════════════════════════════════════════════════════ UTILIDADES ══════════════════════════════════════════════════════════ */ .text-center{text-align:center} .text-primary{color:var(--primary)!important} .text-cta{color:var(--cta)!important} .text-white{color:var(--white)!important} .text-muted{color:var(--neutral-500)!important} .mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-8{margin-top:2rem} .w-full{width:100%} .d-flex{display:flex}.align-center{align-items:center} .justify-between{justify-content:space-between}.gap-4{gap:1rem}.flex-wrap{flex-wrap:wrap} /* Animaciones scroll */ .fade-up{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease} .fade-up.visible{opacity:1;transform:translateY(0)} .delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s} .delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s} /* Scrollbar */ ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--neutral-100)} ::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--rad-pill)} ::-webkit-scrollbar-thumb:hover{background:var(--primary-dark)} ::selection{background:var(--primary);color:var(--white)} /* ══════════════════════════════════════════════════════════ MOVIMIENTO REDUCIDO Respeta a quien pidió menos animación en el sistema: apaga el brillo del vidrio, el marquee, el Ken Burns del hero y las entradas por scroll. ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .promo-track{animation:none} .hero-slide img{animation:none} .eyebrow-dot{animation:none} .hero-eyebrow,.hero-title,.hero-subtitle,.hero-actions{ opacity:1;transform:none;animation:none; } .fade-up{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ══════════════════════════════════════════════════════════ AJUSTES POR TAMAÑO DE PANTALLA ══════════════════════════════════════════════════════════ */ /* Zona táctil de los puntitos del hero: la barra mide 3px de alto, así que el área clicable se agranda con un pseudo-elemento en vez de engordar la barra, que cambiaría el diseño. */ .hero-dot{position:relative} .hero-dot::after{ content:'';position:absolute;left:-.35rem;right:-.35rem;top:-1rem;bottom:-1rem; } /* Enlaces del pie: alto cómodo para el dedo sin separar visualmente la lista */ @media(max-width:900px){ .footer-links-list a, .footer-contact-item a{padding:.45rem 0;min-height:2.75rem;align-items:center} .footer-links-list{gap:.125rem} } /* ── Celular ── */ @media(max-width:580px){ .section{padding:3.25rem 0} .hero{min-height:520px} .hero-content{padding-bottom:3rem} .hero-actions{gap:.75rem} .hero-actions .btn{width:100%;justify-content:center} .tours-header{margin-bottom:1.5rem} .catalina-section .container{padding-top:2.75rem;padding-bottom:2.75rem;gap:2rem} .catalina-flag{font-size:3.25rem} .contact-info-box,.contact-form-box{padding:1.5rem} .page-hero{padding-bottom:3.5rem} /* El correo es largo y desbordaba la columna */ .footer-contact-item a,.contact-info-value a{word-break:break-word} } /* ── Tablet ── */ @media(min-width:581px) and (max-width:1023px){ .section{padding:4rem 0} .hero-actions .btn{flex:0 1 auto} } /* ── Pantallas grandes: el contenido no se estira sin control ── */ @media(min-width:1600px){ .hero-text{max-width:62rem} .section{padding:6rem 0} }