/* GANAN — tour.css
   Estilos propios de esta pagina. Lo compartido esta en base.css */

/* ===== HEADER (shared) ===== */

/* ===== HERO ===== */

.tour-hero{
    position: relative;
    /* Pantalla completa. 'svh' es la altura util del movil con la barra del
       navegador desplegada; el 'vh' de antes queda de reserva para los
       navegadores que no lo entiendan.
       El margen negativo mete el hero por debajo de la cabecera y el padding
       le devuelve el hueco por dentro: sin eso el hero medía la pantalla
       entera pero empezaba 76px mas abajo, asi que su final quedaba fuera de
       la vista. Mismo recurso que el hero de la home. */
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(var(--header-h) * -1);
    padding-top: var(--header-h);
    display:flex;
    align-items:center;
    background: #000 url("../img/tour-de-setas.webp") no-repeat center center;
    background-size: cover;
  }

.tour-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(8,7,6,0.97) 0%, rgba(8,7,6,0.85) 35%, rgba(8,7,6,0.45) 65%, rgba(8,7,6,0.15) 100%);
  }

/* Igual que en curso-m20: el texto no se pega al borde del viewport. */
.tour-hero-inner{
    position: relative;
    z-index: 1;
    padding: 60px 24px;
    padding-inline-start: max(24px, calc((100% - var(--frame)) / 2 + 24px));
    max-width: calc(740px + (100% - var(--frame)) / 2);
  }

.tour-hero-inner .rule.left{ width: 162px; }

.tour-hero h1{
    font-size: var(--fs-display);
    color: #fff;
    font-weight: bold;
    /* Margen y no padding: es separacion entre la linea y el titular, no
       aire interior del titular. */
    margin-top: 20px;
  }

.tour-hero p.lead{
    margin-top: 20px;
    color: var(--cream);
    font-size: var(--fs-base);
    /* 'max-width' y no 'width': en pantallas estrechas se encoge en vez de
       desbordar el hero. */
    max-width: 600px;
  }

.hero-stats{
    display:flex;
    align-items:flex-start;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: nowrap;
  }

/* 'flex: 0 0 150px' y no solo 'width': en una fila flex los elementos se
   encogen por defecto si falta sitio, y el 0 0 se lo impide. Alto tambien
   fijo, el mismo que los separadores, y las tres piezas repartidas de arriba
   abajo con space-between. */
.hero-stat{
    text-align: center;
    flex: 0 0 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

.hero-stat .stat-icon{
    width: 32px;
    height: 32px;
    object-fit: contain;
    /* Los huecos los reparte el space-between del contenedor */
    margin: 0;
    flex-shrink: 0;
  }

.hero-stat .num{
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: 1;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: lining-nums;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 38px;
  }

.hero-stat .label{
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    color: var(--muted);
  }

.stat-divider{
    height: 150px;
    width: 1px;
    object-fit: cover;
  }

.tour-hero .btn-gold{ margin-top: 40px; }

/* ===== ESTO ES PARA TI ===== */

.fit-section{
    background: var(--bg) url("../img/esto-es-para-ti-2.webp") no-repeat center center;
    background-size: cover;
    width: 100%;
    min-height: 1078px;
    display: flex;
    align-items: center;
  }

.fit-section .container{ width: 100%; max-width: var(--frame); }

.fit-section .section-head h2{ font-size: 68px; }

.fit-cards{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    width: 100%;
    max-width: 1196px;
    min-height: 535px;
    margin: 0 auto;
  }

.fit-card{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    /* El degradado queda debajo: los PNG llevan alfa y se ve por las zonas
       transparentes. */
    background: linear-gradient(135deg, #c9a45f, #a9813f);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    padding: 62px 42px;
    width: 100%;
    min-height: 535px;
    color: #171512;
  }

.fit-card-iz{
    background-image: url("../img/img-estoesparati-iz.png");
  }

.fit-card-der{
    background-image: url("../img/img-estoesparati-der.png");
  }

.fit-card .fit-icon-img{
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
  }

.fit-card h3{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
    margin-bottom: 14px;
  }

.fit-card-rule{ width: 82px; height: 2px; object-fit: cover; margin-bottom: 18px; }

.fit-card-text{ width: 100%; max-width: 502px; }

.fit-card .q{
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: normal;
    margin-bottom: 10px;
  }

.fit-card .d{
    font-family: var(--font-sans);   /* Gill Sans MT */
    font-size: 18px;
    font-weight: normal;
    /* Sin 'opacity': al 85% el negro se mezclaba con el dorado del fondo y
       salia un gris parduzco, no #000000. */
    color: #000000;
  }

.fit-bottom{
    text-align:center;
    margin-top: 56px;
  }

.fit-bottom .l1{ color: var(--gold); font-size: var(--fs-h3); }

.fit-bottom .l2{ color: #fff; font-size: var(--fs-h3); margin-top: 4px; }

.fit-bottom .btn-gold{ margin-top: 30px; }

/* ===== LA ORELLANA ===== */

.orellana-section{
    background: var(--bg-soft) url("../img/la-orellana.webp") no-repeat center center;
    background-size: cover;
  }

.orellana-visual{
    position: relative;
  }

.orellana-bg-photo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 950px;
    height: auto;
    aspect-ratio: 1280 / 659;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
  }

.orellana-grid{
    position: relative;
    z-index: 1;
    display:grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 30px;
    align-items:center;
    max-width: var(--frame);
    margin: 0 auto;
  }

.orellana-photo{
    border-radius: 12px;
    overflow: hidden;
  }

.orellana-stats{
    display:flex;
    flex-direction: column;
    gap: 60px;
  }

.orellana-section .eyebrow{
    font-family: var(--font-sans);
    font-weight: normal;
    font-size: var(--fs-base);
  }

.orellana-section .section-head h2{ font-family: var(--font-display); font-weight: bold; font-size: var(--fs-display); }

.orellana-section .section-head > .rule{ width: 162px; }

.orellana-section .section-head p{
    font-family: var(--font-sans);
    font-weight: normal;
    font-size: var(--fs-base);
  }

.orellana-stat{ text-align:center; margin: 0 auto; }

.orellana-stat.stat-alta-cocina{ width: 208px; }

.orellana-stat.stat-proteina{ width: 262px; }

.orellana-stat.stat-13000-anos{ width: 167px; }

.orellana-stat.stat-lovastatina{ width: 284px; }

.orellana-stat .orellana-icon{ width: 62px; height: 62px; margin: 0 auto 10px; }

.orellana-stat h4{ font-family: var(--font-display); color: var(--gold); font-size: var(--fs-h3); font-weight: normal; margin-bottom: 8px;}

.orellana-stat .rule{ margin: 0 auto 10px; width: 82px; }

.orellana-stat p{
    font-family: var(--font-sans);
    color: #ffffff;
    font-size: var(--fs-sm);
    font-weight: normal;
  }

.cultivada{
    text-align:center;
    margin-top: 80px;
  }

.cultivada .divider-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: var(--sp-3);
    color: var(--gold);
    margin-bottom: 20px;
  }

.cultivada .mountain-icon{
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

.cultivada .divider-row .line{
    width: 120px;
    height: 1px;
    background: rgba(197,163,87,0.4);
  }

.cultivada h4{
    font-family: var(--font-sans);
    color: var(--gold);
    letter-spacing: 4px;
    font-size: var(--fs-base);
    font-weight: normal;
    margin-bottom: 14px;
  }

.cultivada p{ font-family: var(--font-sans); color: var(--cream); font-size: var(--fs-sm); }

/* ===== EL RECORRIDO ===== */

.recorrido-section{ background: #1A1A1A; }

.recorrido-section .section-head h2{
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--fs-display);
  }

.recorrido-section .section-head p{
    font-family: var(--font-display);
    font-weight: normal;
    font-size: var(--fs-base);
    color: #ffffff;
  }

/* La segunda frase va en su propio parrafo para que ocupe el ancho entero
   del contenedor en vez de quedar cortada por el salto de linea. */
.recorrido-section .recorrido-sub{
    max-width: none;
    margin-top: 6px;
  }

.recorrido-section .timeline-caption{
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: #ffffff;
  }

.recorrido-carousel-wrap{
    position: relative;
    /* Los mismos 1278 que la tira: si el contenedor mide menos, la recorta y
       vuelve a asomar un trozo de tarjeta. */
    max-width: 1278px;
    margin: 0 auto;
    /* Alto de la foto de una tarjeta normal (no la activa). Lo usan las
       flechas para calcular su centro; vive aqui y no en la tira porque las
       flechas son hermanas de la tira, no hijas. */
    --foto-alto: 340px;
  }

.recorrido-strip{
    display:flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 50px;
    /* Justo 5 tarjetas: 5 x 246 + 4 huecos de 12. La cuenta tiene que dar
       exacta o asoman recortes por los bordes. */
    width: 1278px;
    max-width: 100%;
    max-width: 100%;
    height: 448px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

.recorrido-strip::-webkit-scrollbar{ display: none; }

.recorrido-item{
    flex: 0 0 auto;
    text-align:center;
    cursor: pointer;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 12px;
    opacity: 0.6;
    transition: border-color .4s ease, opacity .4s ease;
  }

.recorrido-item:hover{ opacity: 0.85; }

.recorrido-item .photo-wrap{
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    /* 222 y no 267: con 267 las cinco pedian 1503px y no caben en el marco
       de 1280 del sitio. Es practicamente la medida original del diseno. */
    width: 222px;
    height: 340px;
    transition: width .4s ease, height .4s ease;
  }

/* Al saltar de un bloque a su gemelo hay que recolocar la tira en el mismo
   fotograma. Con la transicion activa, el ancho de la tarjeta esta a medio
   animar y la medida sale mal: el salto se veia como un brinco de 1.300px.
   El JS pone esta clase solo durante ese instante. */
.recorrido-strip.sin-transicion{ scroll-behavior: auto; }

/* Tambien la tarjeta, no solo su foto: las no activas estan al 60% de
   opacidad, asi que al cambiar de gemela la que queda en el centro entraba
   desde 0.6 y subia a 1 en 400ms. Eso era el parpadeo del salto. */
.recorrido-strip.sin-transicion .recorrido-item,
.recorrido-strip.sin-transicion .photo-wrap{ transition: none; }

.recorrido-item img{
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display:block;
  }

.recorrido-item .photo-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(0deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.85) 100%);
    pointer-events:none;
  }

.recorrido-item.active{
    border-color: var(--gold);
    opacity: 1;
  }

/* Mismo ancho que las demas: la activa solo se distingue por el alto, el
   borde y la opacidad. */
.recorrido-item.active .photo-wrap{
    height: 384px;
  }

.recorrido-item .overlay-text{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(230.8px, 100%);
    min-height: 92px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index: 1;
  }

.recorrido-item .n{
    font-family: var(--font-display);
    font-weight: normal;
    color: var(--gold);
    font-size: var(--fs-base);
  }

.recorrido-item .rule{ margin: 6px auto; }

.recorrido-item .t{
    font-family: var(--font-sans);
    font-weight: bold;
    font-size: var(--fs-sm);
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
  }

.timeline-caption{
    text-align:center;
    color: var(--muted);
    font-size: var(--fs-sm);
    max-width: 720px;
    margin: 30px auto 0;
  }

/* ===== TESTIMONIOS ===== */

.visit-carousel-wrap{
    position: relative;
    max-width: var(--frame);
    margin: 0 auto;
  }

.visit-carousel{
    display:flex;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

.visit-carousel::-webkit-scrollbar{ display: none; }

/* Igual que en El Recorrido: durante el salto del bucle hay que recolocar sin
   animacion, o el navegador desliza la tira y el salto se ve. */
.visit-carousel.sin-transicion{ scroll-behavior: auto; }

.visit-carousel.sin-transicion .visit-card{ transition: none; }

.visit-card{
    /* 4 a la vista: se reparte el ancho de la tira descontando los 3 huecos
       de 24px. Con un ancho fijo la division no cerraba y asomaban recortes. */
    flex: 0 0 calc((100% - 72px) / 4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }

.visit-card img{ height: 170px; object-fit: cover; object-position: 75% center; width: 100%; }

.visit-card-body{ padding: 18px; }

.visit-card .place{
    display:flex;
    align-items:center;
    gap: var(--sp-2);
    color: var(--gold);
    font-weight: 600;
    font-size: var(--fs-sm);
    margin-bottom: 10px;
  }

.visit-card .place-icon{ width: 16px; height: 16px; object-fit: contain; }

.visit-card p{ color: var(--cream); font-size: var(--fs-sm); margin-bottom: 14px; }

.visit-card .date{ color: var(--muted); font-size: var(--fs-xs); }

.carousel-arrow{
    position: absolute;
    /* Por defecto, al medio del contenedor: vale para los carruseles cuyas
       tarjetas miden todas lo mismo, como el de visitantes. */
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid var(--gold);
    background: var(--bg);
    color: var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor: pointer;
  }

/* El Recorrido es la excepcion: su tarjeta activa es mas alta y todas van
   alineadas abajo, asi que el medio del contenedor no coincide con el de una
   tarjeta normal. Se cuenta desde el pie: los 10px de relleno de la tira mas
   media tarjeta (la foto con sus 10px de relleno y 2px de borde por lado). */
.recorrido-carousel-wrap .carousel-arrow{
    top: calc(100% - 10px - (var(--foto-alto) + 24px) / 2);
  }

.carousel-arrow.prev{ left: -20px; }

.carousel-arrow.next{ right: -20px; }

/* El voladizo de 20px solo cabe cuando sobra sitio a los lados. Por debajo
   de ese ancho las flechas se meten dentro: si no, generan scroll lateral
   (antes quedaba oculto por el overflow-x:clip que se retiro). */
@media (max-width: 1260px){
  .carousel-arrow.prev{ left: 0; }
  .carousel-arrow.next{ right: 0; }
}

.join-community{ text-align:center; margin-top: 50px; }

.visitan-section .section-head h2{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h1);
  }

.visitan-section .section-head p{
    font-family: var(--font-sans);
    font-weight: normal;
    font-size: var(--fs-base);
  }

/* A ancho completo: '.section-head' trae 720px de tope y ahi el parrafo se
   partia en tres lineas. El titular sigue centrado, solo cambia el ancho
   disponible. */
.visitan-section .section-head{ max-width: none; }

.visitan-section .join-community .btn-gold{
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: normal;
  }

/* ===== EL ORIGEN ===== */

.origen-section{
    background: var(--bg) url("../img/finca-el-origen.webp") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 967px;
    padding-top: 90px;
    padding-bottom: 46px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

.origen-section .tagline-strip{
    padding: 0 24px;
    margin-top: 50px;
  }

.origen-grid{
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 556px);
    gap: 48px;
    align-items:center;
    width: 100%;
    max-width: 1196px;
    min-height: 410px;
    margin: 0 auto;
  }

.origen-text{
    width: 592px;
    height: 410px;
  }

.origen-text .eyebrow{
    font-family: var(--font-sans);
    font-weight: normal;
    font-size: var(--fs-base);
  }

.origen-text h2{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 16px;
  }

.origen-text > p{
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-base);
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 34px;
    max-width: 440px;
  }

.origen-stats{
    display:flex;
    gap: 20px;
  }

.origen-stat{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    /* Sin 'padding-right': el hueco de 20px de la fila ya separa las columnas
       y ese relleno se comia 20px de ancho util, justo los que le faltaban a
       "Agua de montana" para entrar en una linea. */
  }

/* La linea va en el CENTRO del hueco de 20px, no pegada al borde de la
   columna como hacia el 'border-right' de antes. Asi quedan 10px libres a
   cada lado y el texto no la toca, sin quitarle ancho a la columna. */
.origen-stat:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10px;
    width: 1px;
    background: rgba(197,163,87,0.3);
  }

.origen-stat-icon{ width: 24px; height: 24px; object-fit: contain; margin: 0 auto 10px; }

.origen-stat .num{
    font-family: var(--font-sans);
    color: var(--gold);
    font-size: var(--fs-base);
    font-weight: normal;
    min-height: 54px;
  }

.origen-stat .label{
    font-family: var(--font-sans);
    color: #ffffff;
    font-size: var(--fs-xs);
    font-weight: normal;
    margin-top: 2px;
  }

.origen-photos{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 214px 180px;
    gap: var(--sp-3);
    width: 100%;
    max-width: 556px;
    height: 410px;
  }

.origen-photos .big{ grid-row: span 2; border-radius: 10px; overflow:hidden; height: 100%; }

.origen-photos .big img{ height:100%; width:100%; object-fit:cover; }

.origen-photos .small{ border-radius: 10px; overflow:hidden; }

.origen-photos .small img{ height: 100%; width:100%; object-fit:cover; }

/* Las 3 columnas iban en px fijos (479+345+340+gaps = 1196) y desbordaban
   por debajo de ese ancho. En fracciones conservan la misma proporcion. */
.origen-bottom-row{
    display:grid;
    grid-template-columns: 479fr 345fr 340fr;
    gap: var(--sp-3);
    width: 100%;
    max-width: 1196px;
    height: 293px;
    margin: 14px auto 0;
  }

.origen-bottom-row img{
    border-radius: 10px;
    width: 100%;
    height: 293px;
    object-fit: cover;
  }

/* El fondo va a sangre pero el contenido se detiene en 1280px, como el resto.
   Sin este tope, las dos lineas divisorias estiraban la franja a 1.872px. */
.tagline-strip{
    text-align:center;
    width: 100%;
    max-width: var(--frame);
    margin: 0 auto;
    padding: 40px 24px;
  }

.tagline-strip .divider-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: var(--sp-3);
    color: var(--gold);
    margin-bottom: 20px;
  }

.tagline-strip .divider-row .line{ width: 427px; height:1px; object-fit: cover; }

.tagline-strip .tagline-icon{ width: 20px; height: 20px; object-fit: contain; }

.tagline-strip p{
    font-family: var(--font-sans);
    color: #ffffff;
    font-size: var(--fs-sm);
    font-weight: normal;
  }

/* ===== EL TOUR INCLUYE ===== */

.incluye-section{
    position: relative;
    background: #000 url("../img/tour-incluye.webp") no-repeat right center;
    background-size: cover;
    width: 100%;
    height: 932px;
    padding: 100px 0 54px;
  }

.incluye-inner{
    position:relative;
    z-index:1;
    max-width: 620px;
    padding: 0 24px;
  }

.incluye-inner .eyebrow{
    font-family: var(--font-sans);
    font-weight: normal;
    font-size: var(--fs-base);
  }

.incluye-inner h2{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
    margin: 10px 0 20px;
  }

.incluye-inner h2 .accent{ color: var(--gold); }

.incluye-rule{
    width: 162px;
    height: 2px;
    object-fit: cover;
    margin: 14px 0 20px;
  }

.incluye-inner > p{
    font-family: var(--font-sans);
    color: #ffffff;
    font-size: var(--fs-base);
    font-weight: normal;
    margin-bottom: 40px;
    max-width: 480px;
  }

.incluye-features{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
    margin-bottom: 44px;
  }

.incluye-inner .btn-gold{
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: normal;
    white-space: nowrap;
    height: 84px;
  }

.incluye-feature{ position: relative; display:flex; gap: var(--sp-3); align-items:flex-start; }

/* Linea vertical entre las dos columnas, una por fila. Va en un
   pseudo-elemento de la pieza de la izquierda y no como <img>, para no meter
   tres etiquetas mas en el marcado: el 'right: -20px' la deja en el centro
   exacto del hueco de 40px de la rejilla. El color es el mismo de
   divider-1.webp, rgb(196,163,88). */
.incluye-feature:nth-child(odd)::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 1px;
    height: 80px;
    background: var(--gold);
  }

.incluye-feature .icon-ring{
    width: 44px;
    height: 44px;
    min-width:44px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--gold);
  }

.incluye-feature-icon{ width: 42px; height: 42px; object-fit: contain; }

.incluye-feature h4{
    font-family: var(--font-sans);
    color: var(--gold);
    font-size: var(--fs-base);
    font-weight: bold;
    margin-bottom: 6px;
  }

.incluye-feature p{
    font-family: var(--font-sans);
    color: #ffffff;
    font-size: var(--fs-sm);
    font-weight: normal;
  }

.cupos-note{
    display:flex;
    align-items:center;
    justify-content: flex-start;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    color: #ffffff;
    font-size: var(--fs-sm);
    font-weight: normal;
    max-width: var(--frame);
    margin: 30px 0 0;
  }

.cupos-note svg{ color: var(--gold); }

.cupos-note-icon{ width: 32px; height: 32px; object-fit: contain; }

/* ===== ANTES DE LLEGAR ===== */

.antes-section{
    background: var(--bg) url("../img/antes-de-llegar.webp") no-repeat center center;
    background-size: cover;
  }

.antes-section .section-head h2{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
  }

.antes-section .section-head p{
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: normal;
    color: #ffffff;
  }

.antes-title-rule{ width: 162px; height: 2px; object-fit: cover; margin: 14px auto 0; }

.before-grid{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    max-width: var(--frame);
    margin: 0 auto;
    text-align:center;
  }

.before-item{
    position: relative;
    padding: 0 20px;
  }

/* La linea va en un pseudo-elemento y no en 'border-right': el navegador
   redondea el grosor de los bordes a pixel entero y 0.8px se dibujaria a 1px.
   Como caja con fondo si respeta el subpixel, igual que el resto de lineas
   finas del sitio. Se coloca en el centro del hueco de 20px de la rejilla. */
.before-item:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10px;
    width: 0.8px;
    background: #C5A357;
  }

.before-item-icon{ width: 62px; height: 62px; object-fit: contain; margin: 0 auto 16px; }

.before-item h4{
    font-family: var(--font-sans);
    color: var(--gold);
    font-size: var(--fs-base);
    font-weight: bold;
    margin-bottom: 8px;
  }

.before-item-rule{ width: 82px; height: 2px; object-fit: cover; margin: 0 auto 12px; }

.before-item p{
    font-family: var(--font-sans);
    color: #ffffff;
    font-size: var(--fs-sm);
    font-weight: normal;
  }

.before-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: var(--frame);
    margin: 50px auto 0;
    /* El contorno va en un box-shadow y no en 'border': el navegador redondea
       el grosor de los bordes a pixel entero y 0.8px se dibujaria a 1px. El
       spread del shadow si admite decimales y sigue el radio de la caja. */
    box-shadow: 0 0 0 0.8px #C5A357;
    border-radius: 10px;
    padding: 24px 34px;
  }

.before-bar .left{
    display:flex;
    align-items:center;
    gap: var(--sp-3);
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-base);
    font-weight: normal;
  }

.before-bar-icon{ width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; }

.before-bar-divider{ width: 1px; height: 62px; object-fit: cover; }

.before-bar .right{
    display:flex;
    align-items:center;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    color: var(--gold);
    font-weight: normal;
    letter-spacing: 1px;
    font-size: var(--fs-base);
  }

/* 'flex-shrink: 0' para que el enlace no comprima la flecha cuando el texto
   va justo, como pasaba en los botones dorados. */
.before-bar .right svg{ width: 30px; height: 30px; flex-shrink: 0; }

/* ===== RESERVA ===== */

.reserva-section{
    background: var(--bg-soft) url("../img/reserva-tu-experiencia.webp") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 695px;
  }

.reserva-section .section-head h2{
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: bold;
  }

.price-card{
    max-width: 1079px;
    margin: 0 auto;
    border: 1px solid var(--gold);
    border-radius: 10px;
    overflow: hidden;
  }

.price-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding: 50px 60px;
  }

/* El bloque de precios no tiene clase propia en el marcado: es el primer hijo
   de .price-card-top. Centra sus tres lineas entre si. */
.price-card-top > div:first-child{ text-align: center; }

.price-cop{
    font-family: var(--font-display);
    color: var(--gold);
    font-size: var(--fs-display);
    font-weight: bold;
  }

.price-cop .dollar-sign{ font-size: var(--fs-h1); font-weight: 600; }

/* 'vertical-align: baseline' anula el 'super' que trae <sup> de serie, que es
   lo que lo dejaba flotando por encima del numero. Asi COP y USD se apoyan en
   la misma linea base que las cifras. */
.price-cop sup{ font-size: var(--fs-h3); font-weight: normal; margin-left:4px; vertical-align: baseline; }

.price-usd{
    font-family: var(--font-display);
    color: #fff;
    font-size: var(--fs-display);
    font-weight: bold;
    margin-top: 6px;
  }

.price-usd .dollar-sign{ font-weight: 600; }

.price-usd sup{ font-size: var(--fs-h3); font-weight: normal; margin-left:4px; vertical-align: baseline; }

.price-per{ color: #ffffff; font-size: var(--fs-xs); margin-top: 14px; }

.price-divider{ width: 2px; height: 182px; object-fit: cover; }

.airbnb-btn{
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: normal;
    white-space: nowrap;
    width: 323px;
    height: 84px;
  }

.price-card-bottom{
    background: var(--gold);
    color: #171512;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    height: 80px;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: normal;
  }

.price-card-bottom .item{ display:flex; align-items:center; gap: var(--sp-2); }

.price-card-bottom-icon{ width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }

.price-card-bottom .sep{ width:1px; height: 18px; background: rgba(23,21,18,0.4); }

/* ===== FAQ ===== */

.faq-section{
    background: var(--bg) url("../img/preguntas-frecuentes.webp") no-repeat center center;
    background-size: cover;
  }

.faq-list{ max-width: 900px; margin: 0 auto; display:flex; flex-direction:column; gap: var(--sp-3); }

/* Sin relleno propio: lo llevan el summary y la respuesta. Con el relleno
   aqui, esa banda de 22x26px quedaba fuera del <summary> y pulsarla no abria
   nada; solo respondia la linea de texto. */
.faq-item{
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
  }

.faq-item summary{
    list-style: none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--sp-3);
    /* El relleno va aqui para que toda la fila sea zona pulsable */
    padding: 22px 26px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: bold;
    color: var(--cream);
  }

.faq-item[open] summary{ color: var(--gold); }

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary .chev{ color: var(--gold); transition: transform .2s; }

.faq-item[open] summary .chev{ transform: rotate(180deg); }

.faq-item .answer{
    padding: 0 26px 22px;
    font-family: var(--font-sans);
    color: var(--cream);
    font-size: var(--fs-base);
    font-weight: normal;
  }

/* ===== FOOTER (shared) ===== */

.tour-hero-inner .eyebrow{ font-size: var(--fs-base); }

.tour-hero .btn-gold{ font-size: var(--fs-base); }

/* ===== RESPONSIVE ===== */

@media (max-width: 980px){
.fit-section{ width: 100%; height: auto; }

.fit-section .container{ max-width: 100%; }

.fit-cards{ grid-template-columns: 1fr; width: 100%; height: auto; }

.fit-card{ width: 100%; height: auto; padding: 44px 32px; }

.fit-card-text{ width: 100%; }.orellana-visual{ display:flex; flex-direction:column; }

.orellana-bg-photo{ position: static; transform:none; order:-1; width:100%; max-width:460px; margin:0 auto 36px; }

.orellana-grid{ grid-template-columns: 1fr; gap: var(--sp-5); }

.orellana-stats{ flex-direction: row; justify-content:center; flex-wrap:wrap; gap: 30px; }

.orellana-stat.stat-alta-cocina, .orellana-stat.stat-proteina,
    .orellana-stat.stat-13000-anos, .orellana-stat.stat-lovastatina{ width: 220px; }.origen-section{ width: 100%; height: auto; padding-left: 24px; padding-right: 24px; }

.tagline-strip .divider-row .line{ width: 90px; max-width: 30%; }

.origen-grid{ grid-template-columns: 1fr; width: 100%; height: auto; gap: 32px; }

.origen-text{ width: 100%; height: auto; }.origen-photos{ width: 100%; height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

.origen-photos .big{ height: 260px; }

.origen-photos .small{ height: 200px; }

.origen-bottom-row{ grid-template-columns: 1fr 1fr; height: auto; }

/* Alto de las tres. La segunda cruza las dos filas, asi que su alto sale de
   sumar dos de estas mas la separacion: 260 + 16 + 260 = 536. */
.origen-bottom-row img{ height: 260px; }

/* En dos columnas las tres fotos dejaban un hueco vacio abajo a la derecha.
   La segunda cruza las dos filas y se estira a lo que suman las otras dos
   mas su separacion, asi la rejilla queda completa. */
.origen-bottom-row img:nth-child(2){ grid-row: span 2; height: 100%; }

.incluye-section{ width: 100%; height: auto; padding: 70px 0 46px; background-position: center; }.incluye-features{ grid-template-columns: 1fr; }

/* En una sola columna la linea no separa nada y quedaria colgando al lado */
.incluye-feature:nth-child(odd)::after{ display: none; }

.incluye-inner .btn-gold{ height: auto;padding: 16px 30px; white-space: normal; }

.before-grid{ grid-template-columns: 1fr 1fr; }

.before-item{ border-bottom: 1px solid rgba(197,163,87,0.3); padding-bottom: 24px; }

.before-item:not(:last-child)::after{ display: none; }.before-bar{ justify-content: center; text-align: center; }

.before-bar-divider{ display: none; }

.reserva-section{ width: 100%; height: auto; padding: 70px 0; }.price-card-top{ justify-content:center; text-align:center; padding: 40px 30px; }

.price-divider{ display: none; }

.airbnb-btn{ width: 100%; height: auto; padding: 16px 30px;justify-content: center; }}

@media (max-width: 640px){
.tour-hero{ background-position: center; }

/* El 'max-width' de escritorio es calc(740px + (100% - 1280px)/2): por debajo
   de 1280 ese segundo termino es negativo y a 390px dejaba el hero en 295px,
   con el contenido apelotonado en la mitad izquierda. Aqui ocupa todo el
   ancho y el aire lo ponen los 24px de padding. */
.tour-hero-inner{ max-width: 100%; padding: 40px 24px; }

/* Fuera en celular: el hero va a pantalla completa y esta linea, con su
   margen, gastaba alto que necesita el boton. */
.tour-hero-inner .rule.left{ display: none; }

/* Rejilla de dos columnas que reparten todo el ancho, en vez de cuatro
   cajas de 150px fijos que dejaban un hueco muerto a la derecha. */
.hero-stats{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-top: 20px;
    }

.tour-hero h1{ margin-top: 10px; }

.hero-stat .num{ font-size: 18px; }

/* En horizontal: el icono a la izquierda y el numero con su etiqueta a la
   derecha. En vertical cada caja gastaba casi 100px de alto y no cabia el
   boton dentro de la pantalla. Se resuelve con una rejilla de dos columnas
   sin tocar el marcado: el icono ocupa las dos filas de la izquierda y el
   num y el label se apilan en la de la derecha. */
.hero-stat{
      height: auto;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 12px;
      align-items: center;
      text-align: left;
    }

.hero-stat .stat-icon{ grid-row: 1 / span 2; }

.hero-stat .num{
      grid-column: 2;
      height: auto;
      justify-content: flex-start;
      align-self: end;
    }

.hero-stat .label{ grid-column: 2; align-self: start; }



.stat-divider{ display: none; }.orellana-stats{ gap: 20px; }.origen-stats{ flex-wrap: wrap; gap: var(--sp-3); }

.origen-stat{ flex: 1 1 40%; border-right:none; padding-right:0; }

.origen-stat:not(:last-child)::after{ display: none; }

.origen-bottom-row{ grid-template-columns: 1fr; }

.origen-bottom-row img:nth-child(2){ grid-row: auto; height: 260px; }.before-grid{ grid-template-columns: 1fr; }.recorrido-strip{ height: 340px; }

.recorrido-carousel-wrap{ --foto-alto: 260px; }

.recorrido-item .photo-wrap{ height: 260px; }

.recorrido-item.active .photo-wrap{ height: 290px; }

.recorrido-item .overlay-text{ width: min(170px, 100%); min-height: 70px; }.price-card-bottom{ flex-direction: column; gap: 12px; padding: 18px; height: auto; }

.price-card-bottom .sep{ display: none; }}

/* ==========================================================================
   EL RECORRIDO - cuantas tarjetas se ven segun el ancho
   La tarjeta deja de tener ancho fijo y toma la fraccion que le toca del
   ancho de la tira, descontando los huecos de 12px. Con la cuenta hecha por
   el navegador la division sale exacta a cualquier tamano de pantalla y no
   asoman recortes por los bordes.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Este carrusel cuelga directamente de la seccion, fuera de '.container',
     asi que no heredaba los 24px de aire lateral del resto del sitio y las
     tarjetas se pegaban a los bordes de la pantalla. */
  .recorrido-carousel-wrap { padding-left: var(--sp-4); padding-right: var(--sp-4); }

  /* El Origen se apila desde 1024 y no desde 980. Su columna de texto tiene
     592px fijos, pero a 1024 la rejilla solo le da 372: el texto se salia 220px
     y se montaba sobre las fotos. Apiladas, las fotos pasan debajo y cada
     bloque usa el ancho entero. Tambien entra aqui su relleno lateral, que
     antes solo aparecia por debajo de 980. */
  .origen-section {
    width: 100%;
    height: auto;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .origen-grid {
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
    gap: 32px;
  }

  .origen-text { width: 100%; height: auto; }

  .origen-photos {
    width: 100%;
    max-width: none;
    height: auto;
    grid-template-columns: 1fr 1fr;
    /* Filas de alto fijo: con 'auto' la grande crecia mas que las dos de al
       lado y el hueco vacio pasaba a la columna derecha. Definidas, las dos
       columnas miden lo mismo: 360 + 16 de hueco + 360 = 736.
       Este es el UNICO numero que hay que tocar para dar mas o menos alto a
       las fotos: la grande se estira sola a lo que sumen las dos. */
    grid-template-rows: 360px 360px;
  }

  /* La grande cruza las dos filas: con un alto fijo se quedaba corta frente
     a las dos pequenas y dejaba un hueco vacio debajo. Con 100% se estira a
     lo que midan las dos de al lado mas su separacion. */
  .origen-photos .big { height: 100%; }

  /* Llena su fila, para que el alto lo mande 'grid-template-rows' y no haya
     dos numeros que mantener a la vez. */
  .origen-photos .small { height: 100%; }

  /* La barra se centra y su linea vertical desaparece desde 1024, no desde
     980: a ese ancho los dos bloques ya no caben lado a lado sin apretarse. */
  .before-bar { justify-content: center; text-align: center; }

  .before-bar-divider { display: none; }

  .recorrido-strip { width: 100%; }

  /* 3 tarjetas: se descuentan 2 huecos */
  .recorrido-item { flex: 0 0 calc((100% - 24px) / 3); }

  .recorrido-item .photo-wrap,
  .recorrido-item.active .photo-wrap { width: 100%; }

  .recorrido-item .overlay-text { width: 100%; }
}

/* 2 tarjetas: 1 hueco */
@media (max-width: 820px) {
  .recorrido-item { flex: 0 0 calc((100% - 12px) / 2); }
}

/* 1 tarjeta: sin huecos que descontar */
@media (max-width: 640px) {
  .recorrido-item { flex: 0 0 100%; }
}

/* ==========================================================================
   NOS VISITAN - cuantas tarjetas se ven segun el ancho
   Mismo criterio que El Recorrido: la tarjeta toma su fraccion del ancho
   disponible, descontando los huecos de 24px.
   ========================================================================== */

/* 3 tarjetas: 2 huecos */
@media (max-width: 1024px) {
  .visit-card { flex: 0 0 calc((100% - 48px) / 3); }
}

/* 2 tarjetas: 1 hueco */
@media (max-width: 820px) {
  .visit-card { flex: 0 0 calc((100% - 24px) / 2); }
}

/* 1 tarjeta: sin huecos que descontar */
@media (max-width: 640px) {
  .visit-card { flex: 0 0 100%; }

  /* En celular las tres fotos de El Origen no caben en dos columnas altas:
     cada una quedaba estrecha y larguisima. La grande pasa a ocupar el ancho
     entero arriba y las dos pequenas van emparejadas debajo, sin huecos.
     Va en este bloque y no en el otro de 640px porque aquel esta ANTES en el
     archivo que el de 1024 y quedaba pisado por orden. */
  .origen-photos { grid-template-rows: auto auto; }

  .origen-photos .big { grid-column: 1 / -1; grid-row: auto; height: 220px; }

  .origen-photos .small { height: 160px; }
}