:root { --kuntur-noche:#16302B; --kuntur-piedra:#E7E2D2; --kuntur-laguna:#2E8F95; --kuntur-tierra:#C97B3D; --kuntur-selva:#4C7A4A; --tinta:#13211e; --cuerpo:Inter,Arial,sans-serif; --display:'Barlow Condensed',Arial,sans-serif; --dato:'JetBrains Mono',monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--tinta); background:var(--kuntur-piedra); font:400 16px/1.6 var(--cuerpo); } a { color:inherit; } .saltar { position:absolute; left:1rem; top:-4rem; z-index:10; padding:.6rem 1rem; background:#fff; } .saltar:focus { top:1rem; }
.barra { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:0 clamp(1.25rem,4vw,5rem); background:var(--kuntur-piedra); } .marca { display:flex; align-items:center; gap:.55rem; text-decoration:none; font:700 2rem/1 var(--display); letter-spacing:.025em; text-transform:uppercase; } .marca span { display:grid; place-items:center; width:2rem; height:2rem; color:var(--kuntur-laguna); border:1px solid currentColor; border-radius:50%; } .barra nav { display:flex; gap:1.5rem; font-size:.86rem; font-weight:600; } .barra nav a { text-decoration:none; } .cta { display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.15rem; border-radius:2px; color:#fff; background:var(--kuntur-laguna); text-decoration:none; font-weight:700; box-shadow:0 9px 24px #16302b26; transition:transform 180ms cubic-bezier(.2,.8,.2,1),background 180ms cubic-bezier(.2,.8,.2,1); } .cta:hover { background:#24767b; transform:translateY(-2px); } .cta svg { width:18px; } .cta--compacta { padding:.65rem .9rem; font-size:.83rem; }
.hero { position:relative; overflow:hidden; min-height:680px; display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.9fr); align-items:center; gap:4rem; padding:clamp(4rem,9vw,9rem) clamp(1.25rem,9vw,10rem); background:var(--kuntur-noche); color:#fff; } .hero__texto { position:relative; z-index:2; max-width:650px; } .etiqueta { margin:0 0:.9rem; color:var(--kuntur-selva); font:600 .72rem/1.2 var(--dato); letter-spacing:.12em; text-transform:uppercase; } .hero .etiqueta { color:#91c6bd; } h1,h2,h3 { margin:0; font-family:var(--display); letter-spacing:-.02em; } h1 { max-width:650px; font-size:clamp(4.2rem,8.8vw,8rem); line-height:.82; text-transform:uppercase; } h1 em { color:#a8dedb; font-style:normal; } .hero__texto > p:not(.etiqueta) { max-width:530px; margin:1.6rem 0 2rem; color:#e6f0ed; font-size:1.08rem; }
.region-input { position:absolute; opacity:0; pointer-events:none; } .hero__visual { position:relative; min-height:430px; } .topografia { position:absolute; inset:0; opacity:0; transition:opacity 240ms cubic-bezier(.2,.8,.2,1); } .topografia i { position:absolute; display:block; border:1px solid #9cd8d066; } .topo--costa i { width:150%; height:36%; border-radius:50%; left:-28%; } .topo--costa i:nth-child(1){top:6%}.topo--costa i:nth-child(2){top:22%;left:-18%}.topo--costa i:nth-child(3){top:39%;left:-36%}.topo--costa i:nth-child(4){top:57%;left:-10%}.topo--costa i:nth-child(5){top:74%;left:-28%} .topo--sierra i { border-radius:48% 52% 49% 51%; transform:rotate(-18deg); } .topo--sierra i:nth-child(1){inset:5% 8%}.topo--sierra i:nth-child(2){inset:13% 16%}.topo--sierra i:nth-child(3){inset:22% 25%}.topo--sierra i:nth-child(4){inset:31% 34%}.topo--sierra i:nth-child(5){inset:40% 43%} .topo--selva i { border-radius:42% 58% 70% 30% / 35% 39% 61% 65%; transform:rotate(11deg); } .topo--selva i:nth-child(1){inset:3% 8%}.topo--selva i:nth-child(2){inset:14% 27% 18% 3%}.topo--selva i:nth-child(3){inset:26% 5% 8% 25%}.topo--selva i:nth-child(4){inset:39% 23% 12% 10%}.topo--selva i:nth-child(5){inset:48% 10% 20% 31%} #region-costa:checked ~ .hero__visual .topo--costa,#region-sierra:checked ~ .hero__visual .topo--sierra,#region-selva:checked ~ .hero__visual .topo--selva { opacity:1; animation:deriva 8s ease-in-out infinite alternate; } @keyframes deriva { to { transform:translateY(-10px) rotate(2deg); } } .selector { position:absolute; z-index:1; right:0; bottom:0; width:min(100%,360px); padding:.5rem; display:grid; grid-template-columns:repeat(3,1fr); background:#e7e2d21a; border:1px solid #e7e2d244; backdrop-filter:blur(8px); } .selector label { padding:.75rem .35rem; text-align:center; cursor:pointer; color:#dbe9e5; font:700 1.1rem/1 var(--display); text-transform:uppercase; } .selector small { display:block; margin-top:.35rem; color:#b4d5cf; font:500 .58rem var(--dato); } #region-costa:checked ~ .hero__visual label[for=region-costa],#region-sierra:checked ~ .hero__visual label[for=region-sierra],#region-selva:checked ~ .hero__visual label[for=region-selva] { color:#fff; background:var(--kuntur-laguna); } .hero__pie { position:absolute; left:clamp(1.25rem,9vw,10rem); bottom:2.2rem; margin:0; color:#b7d2cb; font:.68rem var(--dato); } .hero__pie span { display:inline-block; width:24px; border-top:1px solid var(--kuntur-tierra); vertical-align:middle; margin-right:.5rem; }
.tours { padding:clamp(5rem,9vw,9rem) clamp(1.25rem,7vw,8rem); } .seccion-cabecera { max-width:610px; margin-bottom:3.2rem; } h2 { font-size:clamp(3.2rem,6vw,5.7rem); line-height:.85; text-transform:uppercase; } .seccion-cabecera > p:last-child { margin:1.3rem 0 0; } .tour-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.25rem; } .tour { overflow:hidden; grid-column:span 4; display:flex; flex-direction:column; background:#f5f1e7; box-shadow:0 13px 35px #16302b16; } .tour:nth-child(4),.tour:nth-child(5) { grid-column:span 6; } .tour img { width:100%; aspect-ratio:1.35; object-fit:cover; } .tour__contenido { display:flex; flex:1; flex-direction:column; padding:1.35rem; } .tour__region { margin:0; color:var(--kuntur-tierra); font:600 .66rem var(--dato); letter-spacing:.1em; text-transform:uppercase; } .tour h3 { margin:.28rem 0 .55rem; font-size:2rem; line-height:.95; text-transform:uppercase; } .tour__contenido > p:not(.tour__region):not(.dato) { margin:.55rem 0 1.2rem; font-size:.9rem; } .dato { display:flex; align-items:center; gap:.35rem; margin:0; color:var(--kuntur-selva); font:600 .72rem var(--dato); } .dato svg { width:15px; } .tour footer { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; margin-top:auto; padding-top:1rem; border-top:1px solid #16302b22; font-size:.78rem; } .tour footer strong { color:var(--kuntur-noche); font:600 .8rem var(--dato); } .tour a { display:flex; align-items:center; gap:.35rem; margin-top:1.1rem; color:var(--kuntur-laguna); font-size:.82rem; font-weight:700; text-decoration:none; } .tour a svg { width:16px; }
.manera { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,8vw,9rem); padding:clamp(5rem,9vw,9rem) clamp(1.25rem,7vw,8rem); color:#fff; background:var(--kuntur-noche); } .etiqueta--clara { color:#91c6bd; } .manera ol { display:grid; gap:1.3rem; padding:0; margin:0; list-style:none; } .manera li { display:grid; grid-template-columns:3rem 1fr; column-gap:1rem; padding-bottom:1.25rem; border-bottom:1px solid #ffffff28; } .manera li span { color:var(--kuntur-tierra); font:.7rem var(--dato); } .manera li strong { font:700 1.65rem/.9 var(--display); letter-spacing:.02em; text-transform:uppercase; } .manera li p { grid-column:2; margin:.65rem 0 0; color:#d8e4df; max-width:420px; font-size:.9rem; }.cierre { padding:clamp(5rem,10vw,10rem) 1.25rem; text-align:center; background:linear-gradient(135deg,#f0ede3,var(--kuntur-piedra)); }.cierre h2 { margin-bottom:2rem; }
@media (max-width:760px) { .barra { min-height:65px; } .barra nav,.cta--compacta { display:none; } .hero { min-height:720px; grid-template-columns:1fr; gap:2rem; padding:4rem 1.25rem 5.5rem; } h1 { font-size:clamp(3.6rem,17vw,5rem); } .hero__visual { min-height:290px; } .hero__pie { left:1.25rem; bottom:1.8rem; } .tour-grid { grid-template-columns:1fr; } .tour,.tour:nth-child(4),.tour:nth-child(5) { grid-column:auto; } .manera { grid-template-columns:1fr; gap:2.5rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }