:root {
--color-brand: #d0252e;
--color-yellow: #d1a54b;
--color-blue: #002b4f;
--color-text: #212529;
--color-text-gray: #6c757d;
--color-border: #dee2e6;
--color-background: #f8f9fa;
--color-text-muted: #868e96;
--color-hover: #ffe4af;
--bg-body: #fff5ed;
--border-radius: 0.375em;
--color-white: #fff;
--width: 100%;
--max-width: 90%;
}
@font-face {
font-family: 'Korolev';
src: url('../font/korolev-medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
* {
box-sizing: border-box;
}
body {
font-size: 1rem;
line-height: 1.5;
font-family: 'Korolev', sans-serif;
}
/* == Utilitarios == */
a {
text-decoration: none;
}
p {
margin-bottom: 1rem;
}
svg {
vertical-align: middle;
}
img {
display: block;
}
table {
border-collapse: collapse;
margin-right: auto;
margin-left: auto;
}
table td {
border: 1px solid;
}
.line-saku {
margin: 0.5em auto auto;
background-color: var(--color-brand);
height: 5px;
width: 5%;
display: inline-block;
border-radius: 5px;
border: none;
}
/* == ./Utilitarios == */
/* == Section Header == */
.site-name {
display: none;
}
.gr-main-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
padding: 0.25rem;
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.gr-main-header .field--name-field-tipbloq-head-bloq-logo {
width: 50%;
}
.gr-main-header .field--name-field-tipbloq-head-bloq-logo img {
width: 100%;
height: auto;
}
.gr-info-header {
display: flex;
flex-direction: column;
width: 100%;
}
.gr-info-header .field--name-field-tipbloq-head-link-contact {
display: flex;
width: 100%;
gap: 10px;
justify-content: end;
}
.field--name-field-tipbloq-head-bq-hdmn {
display: none;
}
.field--name-field-tipbloq-head-link-contact .field__item a {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
text-transform: uppercase;
color: var(--color-text);
font-weight: 700;
}
.field--name-field-tipbloq-head-link-contact svg {
width: 20px;
height: 20px;
}
.field--name-field-tipbloq-head-link-contact path {
fill: var(--color-brand);
}
.field--name-field-tipbloq-head-link-contact .field__item:first-child a {
border: 1px solid var(--color-border);
padding: 0.5rem 1rem;
border-radius: 50rem;
}
.field--name-field-tipbloq-head-link-contact .field__item:last-child a {
border: 1px solid var(--color-border);
padding: 0.5rem 1rem;
border-radius: 50rem;
}
.field--name-field-tipbloq-head-link-contact .field__item:last-child .link-field-label {
display: none;
}
.field--name-field-tipbloq-hed-lk-social {
display: flex;
gap: 10px;
}
.field--name-field-tipbloq-hed-lk-social a {
background-color: var(--color-brand);
font-size: 1.3rem;
color: #fff;
border-radius: 50%;
transition: all 0.3s ease-in-out;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
}
.field--name-field-tipbloq-hed-lk-social svg {
width: 20px;
height: 20px;
}
.gr-header-redes {
display: flex;
gap: 10px;
margin-top: 15px;
justify-content: space-between;
}
.field--name-field-tipbloq-hed-lk-btn a {
background-color: var(--color-brand);
color: #fff;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 5px;
text-transform: uppercase;
&:hover {
background-color: rgb(128.115942029, 27.884057971, 34.6666666667);
color: #fff;
}
}
/* == ./Section Header == */
/* == ALINEADO DE MEDIA EMBEBIDO == */
/* Clases que emite filter_align a partir de data-align. Core no las estiliza
para temas custom: cada tema las define. Sin esto, el boton de alinear de
CKEditor no tiene efecto en el front. */
.align-center {
margin-left: auto;
margin-right: auto;
}
/* La clase suele caer en un envoltorio sin ancho propio, asi que el margen
automatico se aplica tambien a la imagen que lleva dentro. */
.align-center img {
display: block;
margin-left: auto;
margin-right: auto;
}
.align-left {
float: left;
margin: 0 1.5rem 1rem 0;
}
.align-right {
float: right;
margin: 0 0 1rem 1.5rem;
}
/* == ./ALINEADO DE MEDIA EMBEBIDO == */
/* == SECTION HEADER BT_HEAD == */
/* Cabecera nueva (bt_head). Selectores tomados del HTML renderizado. */
#block-sakuraexpeditions-bt-head > .field--name-field-bt-head-bloqs-bp {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
padding: 12px 0;
}
/* Logo */
#block-sitebranding .site-logo img {
display: block;
max-width: 200px;
height: auto;
}
#block-sitebranding .site-name {
display: none;
}
/* Filas de contacto (email y telefono) */
#block-headercontact .field--name-field-bt-head-contact-parr {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.hdr-contact-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid var(--color-border);
border-radius: 999px;
color: var(--color-blue);
font-size: 14px;
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.hdr-contact-item:hover {
border-color: var(--color-brand);
color: var(--color-brand);
}
.hdr-contact-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--color-brand);
}
/* Redes sociales */
#block-headersocial .field--name-field-bt-head-social-parr {
display: flex;
gap: 8px;
}
.hdr-social-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: var(--color-brand);
color: var(--color-white);
transition: background-color 0.2s;
}
.hdr-social-item:hover {
background-color: var(--color-blue);
}
.hdr-social-item svg {
width: 18px;
height: 18px;
}
/* Boton CTA */
#block-headercta .field--name-field-bt-head-cta-lnk a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--border-radius);
background-color: var(--color-brand);
color: var(--color-white);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.2s;
}
#block-headercta .field--name-field-bt-head-cta-lnk a:hover {
background-color: var(--color-blue);
}
/* Selector de idioma: solo la bandera, como el diseno */
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface ul.links {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .language-link {
display: inline-flex;
font-size: 0;
}
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .language-icon {
display: block;
width: 26px;
height: auto;
}
/* == ./SECTION HEADER BT_HEAD == */
/* == SECTION FOOTER BT_FOOT == */
/* Footer nuevo (bt_foot). Selectores tomados del HTML renderizado. */
#block-sakuraexpeditions-bt-foot {
position: relative;
overflow: hidden;
background-color: var(--color-blue);
color: var(--color-white);
}
/* Imagen de fondo: banda superior en flujo normal. Las columnas van DEBAJO,
sobre el azul solido, no encima de la ilustracion. */
#block-sakuraexpeditions-bt-foot .ft-bg {
line-height: 0;
}
#block-sakuraexpeditions-bt-foot .ft-bg img {
display: block;
width: 100%;
height: auto;
}
/* position+z-index se mantienen: crean el contexto de apilado que necesita
la franja roja del copyright para pintarse por encima del fondo. */
#block-sakuraexpeditions-bt-foot .ft-cols {
position: relative;
z-index: 1;
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
padding-top: 40px;
}
#block-sakuraexpeditions-bt-foot .field--name-field-bt-foot-bloqs-bp {
display: grid;
gap: 32px;
}
/* Texto y enlaces generales del footer */
#block-sakuraexpeditions-bt-foot a {
color: var(--color-white);
text-decoration: none;
}
#block-sakuraexpeditions-bt-foot a:hover {
color: var(--color-yellow);
}
/* Titulos de columna (campo heading, h3) */
#block-sakuraexpeditions-bt-foot h3 {
margin: 0 0 16px;
color: var(--color-white);
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* -- Columna 1: empresa -- */
#block-footercompany .field--name-field-bt-foot-company-log-med img {
display: block;
max-width: 190px;
height: auto;
margin-bottom: 16px;
}
#block-footercompany .field--name-field-bt-foot-company-desc-txl {
margin-bottom: 20px;
font-size: 15px;
line-height: 1.6;
}
#block-footercompany .field--name-field-bt-foot-company-soc-parr {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
#block-sakuraexpeditions-bt-foot .ft-social-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--color-white);
transition: background-color 0.2s;
}
#block-sakuraexpeditions-bt-foot .ft-social-item:hover {
background-color: var(--color-yellow);
}
/* El color va en el svg, no en el : el enlace lo pisa la regla de id
'#block-...-bt-foot a' y el icono saldria blanco sobre blanco. */
#block-sakuraexpeditions-bt-foot .ft-social-item svg {
width: 18px;
height: 18px;
color: var(--color-blue);
}
#block-footercompany .field--name-field-bt-foot-company-legal-lnk {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: 14px;
}
/* -- Columnas 2 y 3: listas de links -- */
#block-sakuraexpeditions-bt-foot .field--name-field-bt-foot-links-lnk {
display: grid;
align-content: start;
gap: 12px;
font-size: 15px;
}
/* -- Columna 4: contacto -- */
/* align-content: start para que la ultima fila no se estire cuando la
columna es mas baja que la del texto. */
#block-sakuraexpeditions-bt-foot .field--name-field-bt-foot-contact-parr {
display: grid;
align-content: start;
gap: 14px;
}
/* field_group_link solo genera el (y con el la clase .ft-contact-item)
cuando la fila tiene destino. Direccion y Horario no lo tienen, asi que
se estiliza tambien el paragraph: las 4 filas maquetan igual. */
#block-sakuraexpeditions-bt-foot .paragraph--type--pt-foot-contact,
#block-sakuraexpeditions-bt-foot .ft-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
line-height: 1.5;
}
#block-sakuraexpeditions-bt-foot .paragraph--type--pt-foot-contact svg {
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
color: var(--color-white);
}
#block-sakuraexpeditions-bt-foot .paragraph--type--pt-foot-contact p {
margin: 0;
}
/* -- Copyright -- */
#block-footercopyright {
position: relative;
margin-top: 32px;
padding: 18px 0;
font-size: 14px;
text-align: center;
}
/* Franja roja a sangre. Ademas de dar color al copyright, es la que corta
la imagen de fondo justo aqui: el overflow:hidden del bloque la recorta. */
#block-footercopyright::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: -100vh;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background-color: var(--color-brand);
}
#block-footercopyright p {
margin: 0;
}
/* == ./SECTION FOOTER BT_FOOT == */
/* == Section Slider Home == */
/* Alto del chrome fijo que va encima del hero (cabecera + barra de menu).
Medido en el sitio: 113 + 74 = 187 en escritorio. */
:root {
--alto-chrome: 150px;
}
/* El hero ocupa exactamente lo que queda de pantalla bajo la cabecera.
svh en vez de vh para que las barras del navegador movil no lo descuadren,
y clamp para que ni se aplaste en pantallas bajas ni crezca sin limite en
monitores altos (patron clamp() de la metodologia). */
.gr-slider-hero {
position: relative;
width: 100%;
overflow: hidden;
height: clamp(420px, calc(100vh - var(--alto-chrome)), 900px);
height: clamp(420px, calc(100svh - var(--alto-chrome)), 900px);
}
.field--name-field-tipbloq-sldh-img {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
}
/* El envoltorio del media (div.contextual-region > field--name-field-media-image
> img) no hereda el 100%: la foto se pintaba a su proporcion natural, mas
alta que el hero, y el contenedor recortaba la caja por arriba en vez de
centrar con object-fit. Toda la cadena al 100% para que cover encaje. */
.field--name-field-tipbloq-sldh-img > *,
.field--name-field-tipbloq-sldh-img > * > *,
.field--name-field-tipbloq-sldh-img > * > * > * {
height: 100%;
width: 100%;
}
.field--name-field-tipbloq-sldh-img img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Sombra sobre el hero: el mismo degradado inferior que el hero de tour,
copiado de condetraveladventures. Va en ::after y el contenido por encima. */
.gr-slider-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(0, 0, 0, 0.15);
}
.gr-slider-hero .slider__gr-content {
position: relative;
z-index: 2;
}
/* Logueado, la barra de Drupal empuja la pagina y el hero se salia por abajo.
Drupal no expone la altura como variable CSS, solo como clases del body. */
body.toolbar-fixed .gr-slider-hero {
height: clamp(420px, calc(100vh - var(--alto-chrome) - 39px), 900px);
height: clamp(420px, calc(100svh - var(--alto-chrome) - 39px), 900px);
}
body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .gr-slider-hero {
height: clamp(420px, calc(100vh - var(--alto-chrome) - 79px), 900px);
height: clamp(420px, calc(100svh - var(--alto-chrome) - 79px), 900px);
}
.field--name-field-tipbloq-sldh-img .field--type-image,
.field--name-field-tipbloq-sldh-img .field__item {
height: 100%;
}
/* Imagen: patron clamp + object-fit de la metodologia. Antes el alto lo
heredaba de un selector comodin '*', que afectaba a todo lo de dentro. */
.field--name-field-tipbloq-sldh-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.slider__gr-content {
position: relative;
height: 100%;
width: 100%;
}
/* min-height:0 y overflow evitan que el contenido empuje los botones fuera
del hero cuando la pantalla es baja. */
.slider__gr-content .container-aux {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 0;
height: 100%;
gap: clamp(10px, 2vh, 26px);
padding: clamp(16px, 3vh, 40px) 20px;
color: white;
text-align: center;
}
.slider__gr-content h1 {
margin: 0;
padding: 0;
color: white;
font-size: clamp(1.8rem, 6vw, 2.6rem);
line-height: 1.1;
}
.slider__gr-content .field--name-field-tipbloq-sldh-title,
.slider__gr-content .field--name-field-tipbloq-sldh-body {
margin: 0;
}
.slider__gr-content .field--name-field-tipbloq-sldh-body {
font-size: clamp(13px, 1.6vh, 15px);
}
.slider__gr-content .field--name-field-tipbloq-sldh-links {
display: flex;
gap: 10px;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
/* Los dos botones comparten estilo, copiado del hero de salkantaytrekking.com:
fondo negro al 60%, borde blanco fino, sin radio, con sombra. */
.slider__gr-content .field--name-field-tipbloq-sldh-links a {
display: inline-block;
padding: clamp(0.8rem, 1.8vh, 1rem) 2rem;
border-radius: 0;
color: white;
cursor: pointer;
background: rgba(0, 0, 0, 0.6);
border: 0.8px solid #fff;
font-weight: 700;
font-size: 14px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.slider__gr-content .field--name-field-tipbloq-sldh-links a:hover {
background: rgba(0, 0, 0, 0.78);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
/* == ./Section Slider Home == */
/* == Section About Us Home == */
.gr-abt-home {
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
padding: 2rem 0;
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
}
.gr-abt-home .field--name-field-tipbloq-abt-img {
width: 50%;
}
.gr-abt-home .field--name-field-tipbloq-abt-img img {
width: 100%;
height: auto;
}
.gr-abt-home .field--name-field-tipbloq-abt-body {
font-size: 14px;
}
.gr-abt-home .field--name-field-tipbloq-abt-gallery .field__item:not(:first-child) {
display: none;
}
.gr-abt-home .field--name-field-tipbloq-abt-gallery img {
border-radius: 8px;
width: 100%;
height: auto;
}
/* == ./Section About Us Home == */
/* == Section Inca Trail Home == */
#block-sakuraexpeditions-bloqcamincahome {
background-color: var(--color-background);
}
.gr-inctrail-main {
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
padding: 2rem 0;
}
.gr-inctrail-main .field--name-field-tip-bloq-caminc-title {
text-align: center;
color: var(--color-brand);
&:after {
content: '';
height: 4px;
width: 150px;
background: linear-gradient(to right,
var(--color-brand) 33.33%,
var(--color-yellow) 33.33% 66.66%,
var(--color-blue) 66.66% 100%);
border-radius: 2px;
display: block;
margin: 10px auto;
}
}
.gr-inctrail-main .field--name-field-tip-bloq-caminc-body {
text-align: center;
font-size: 14px;
}
.view-vista-tour-cam-inca,
.view-vista-tax-paq-tour {
margin-top: 20px;
}
.view-vista-tour-cam-inca>.view-content,
.view-vista-tax-paq-tour>.view-content {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.view-vista-tour-cam-inca>.view-content>.views-row,
.view-vista-tax-paq-tour>.view-content>.views-row {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
}
.view-vista-tour-cam-inca .field-pgtour-thumbnail,
.view-vista-tax-paq-tour .field-pgtour-thumbnail {
height: 280px;
}
.view-vista-tour-cam-inca .field-pgtour-thumbnail *,
.view-vista-tax-paq-tour .field-pgtour-thumbnail * {
height: 100%;
}
.view-vista-tour-cam-inca .field-pgtour-thumbnail img,
.view-vista-tax-paq-tour .field-pgtour-thumbnail img {
width: 100%;
object-fit: cover;
}
.view-vista-tour-cam-inca .field-pgtour-det-tours,
.view-vista-tax-paq-tour .field-pgtour-det-tours {
position: absolute;
top: 10px;
right: 10px;
}
.view-vista-tour-cam-inca .field-pgtour-det-tours .views-row,
.view-vista-tax-paq-tour .field-pgtour-det-tours .views-row {
display: flex;
gap: 5px;
font-size: 13px;
background: hsla(0, 0%, 100%, 0.95);
color: var(--color-blue);
padding: 0.5rem 1rem;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
z-index: 3;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.view-vista-tour-cam-inca .field-pgtour-det-tours svg,
.view-vista-tax-paq-tour .field-pgtour-det-tours svg {
width: 18px;
height: 18px;
}
.view-vista-tour-cam-inca .tour__gr-content,
.view-vista-tax-paq-tour .tour__gr-content {
padding: 1.5rem;
}
.view-vista-tour-cam-inca .field-pgtour-introduction,
.view-vista-tax-paq-tour .field-pgtour-introduction {
padding-bottom: 10px;
}
.view-vista-tour-cam-inca .gr-tour-booking,
.view-vista-tax-paq-tour .gr-tour-booking {
border-top: 1px solid var(--color-border);
padding-top: 10px;
display: flex;
gap: 10px;
align-items: center;
}
.view-vista-tour-cam-inca .views-field-title,
.view-vista-tax-paq-tour .views-field-title {
margin-bottom: 10px;
}
.view-vista-tour-cam-inca .views-field-title *,
.view-vista-tax-paq-tour .views-field-title * {
color: var(--color-text);
}
.view-vista-tour-cam-inca .field-pgtour-price,
.view-vista-tax-paq-tour .field-pgtour-price {
flex: 1;
border-right: 1px solid var(--color-border);
display: flex;
color: var(--color-text-gray);
font-size: 13px;
text-transform: uppercase;
flex-direction: column;
}
.view-vista-tour-cam-inca .field-pgtour-price .price,
.view-vista-tax-paq-tour .field-pgtour-price .price {
font-size: 30px;
font-weight: bold;
color: var(--color-brand);
letter-spacing: -0.04em;
text-shadow: 0 2px 4px rgba(170, 37, 46, 0.1);
}
.view-vista-tour-cam-inca .field-pgtour-link-content,
.view-vista-tax-paq-tour .field-pgtour-link-content {
flex: 1;
}
.view-vista-tour-cam-inca .field-pgtour-link-content a,
.view-vista-tax-paq-tour .field-pgtour-link-content a {
background: linear-gradient(135deg,
var(--color-brand) 0%,
rgb(136.4927536232, 29.7072463768, 36.9333333333) 100%);
border: none;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
padding: 0.65rem 1.2rem;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(170, 37, 46, 0.3);
position: relative;
overflow: hidden;
line-height: 1.4;
display: inline-block;
width: 100%;
text-align: center;
}
.view-vista-tour-cam-inca .field-pgtour-difficulty,
.view-vista-tax-paq-tour .field-pgtour-difficulty {
margin-top: 15px;
margin-bottom: 15px;
}
.view-vista-tour-cam-inca .field-pgtour-difficulty .difficulty-rating,
.view-vista-tax-paq-tour .field-pgtour-difficulty .difficulty-rating {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.view-vista-tour-cam-inca .field-pgtour-difficulty .stars,
.view-vista-tax-paq-tour .field-pgtour-difficulty .stars {
display: flex;
gap: 2px;
}
.view-vista-tour-cam-inca .field-pgtour-difficulty .dot,
.view-vista-tax-paq-tour .field-pgtour-difficulty .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #e9ecef;
border: 2px solid rgb(222, 226, 230);
transition: all 0.3s ease;
}
.view-vista-tour-cam-inca .field-pgtour-difficulty .dot.active,
.view-vista-tax-paq-tour .field-pgtour-difficulty .dot.active {
background: linear-gradient(135deg,
var(--color-blue) 0%,
rgb(37.0283018868, 99.2358490566, 119.9716981132) 100%);
border-color: var(--color-blue);
box-shadow: 0 0 8px rgba(25, 67, 81, 0.4);
}
/* == ./Section Inca Trail Home == */
/* == Slider Tours Machu Picchu Train == */
.gr-slider-machu {
position: relative;
}
.gr-slider-machu .field--name-field-tipbloq-sld-machh-img {
position: absolute;
width: 100%;
height: 100%;
}
/* position:relative en el contenedor: sin el, el 100% del velo se media
contra el envoltorio absoluto (631px) y no contra la foto (680px), y
quedaba una franja sin cubrir abajo. Velo uniforme y mas claro. */
.gr-slider-machu .field--name-field-tipbloq-sld-machh-img .field--type-image {
position: relative;
}
.gr-slider-machu .field--name-field-tipbloq-sld-machh-img .field--type-image:before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.gr-slider-machu .field--name-field-tipbloq-sld-machh-img img {
object-fit: cover;
width: 100%;
height: 100%;
}
.gr-slider-machu .field--name-field-tipbloq-sld-machh-img * {
height: 100%;
}
.gr-machu-content {
position: relative;
color: white;
padding: 8% 20px;
}
.gr-machu-content .field--name-field-tipbloq-sld-machh-title {
text-align: center;
margin-bottom: 10px;
}
.gr-machu-content .field--name-field-tipbloq-sld-machh-title h2 {
font-size: 2rem;
}
.gr-machu-content .field--name-field-tipbloq-sld-machh-body {
font-size: 14px;
text-align: center;
}
.gr-machu-content .field--name-field-tipbloq-sld-machh-links {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-top: 30px;
}
.gr-machu-content .field--name-field-tipbloq-sld-machh-links svg {
width: 20px;
height: 20px;
}
.gr-machu-content .field--name-field-tipbloq-sld-machh-links a {
padding: 10px;
font-size: 16px;
border-radius: 0.5rem;
display: flex;
align-items: center;
gap: 3px;
justify-content: center;
text-transform: uppercase;
}
.field--name-field-tipbloq-sld-machh-links .field__item:first-child a {
background-color: var(--color-brand);
color: white;
text-align: center;
border: 2px solid var(--color-brand);
&:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
background: linear-gradient(135deg,
rgb(149.0579710145, 32.4420289855, 40.3333333333) 0%,
rgb(128.115942029, 27.884057971, 34.6666666667) 100%);
border: 1px solid rgb(128.115942029, 27.884057971, 34.6666666667);
}
}
.field--name-field-tipbloq-sld-machh-links .field__item:last-child a {
border: 2px solid white;
border-radius: 0.5rem;
color: white;
&:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
background-color: hsla(0, 0%, 100%, 0.2);
border-color: #fff;
backdrop-filter: blur(10px);
}
}
/* == ./Slider Tours Machu Picchu Train == */
/* == Section Best Machu Picchu == */
#block-sakuraexpeditions-bloqbestmachuhm {
padding: 2rem 0;
}
.gr-bestmachu-main {
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.gr-bestmachu-main .field--name-field-tipbloq-bestmhm-title {
text-align: center;
color: var(--color-brand);
&:after {
content: '';
height: 4px;
width: 150px;
background: linear-gradient(to right,
var(--color-brand) 33.33%,
var(--color-yellow) 33.33% 66.66%,
var(--color-blue) 66.66% 100%);
border-radius: 2px;
display: block;
margin: 10px auto;
}
}
.gr-bestmachu-main .field--name-field-tipbloq-bestmhm-body {
text-align: center;
font-size: 14px;
}
.view-vista-tourh-best-inca>.view-content {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.view-vista-tourh-best-inca>.view-content>.views-row {
height: 400px;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.view-vista-tourh-best-inca .field-pgtour-thumbnail {
position: absolute;
width: 100%;
height: 100%;
}
.view-vista-tourh-best-inca .field-pgtour-thumbnail * {
height: 100%;
}
.view-vista-tourh-best-inca .field-pgtour-thumbnail img {
object-fit: cover;
width: 100%;
height: 100%;
}
.view-vista-tourh-best-inca .gr-tour-content {
position: relative;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.85) 100%);
height: 100%;
color: white;
display: flex;
flex-direction: column;
justify-content: end;
padding: 20px;
}
.view-vista-tourh-best-inca .field-pgtour-det-tours {
position: absolute;
top: 10px;
right: 10px;
}
.view-vista-tourh-best-inca .view-parg-detl-tourh .views-row {
display: flex;
gap: 5px;
align-items: center;
font-size: 0.8em;
color: black;
padding: 3px 8px;
border-radius: 5px;
background-color: white;
line-height: 1;
}
.view-vista-tourh-best-inca .field-pgtour-title a {
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
color: white;
font-weight: 700;
font-size: 22px;
}
.view-vista-tourh-best-inca .views-field-title {
margin-bottom: 10px;
}
.view-vista-tourh-best-inca .field-pgtour-pricing .field-price {
background: hsla(0, 0%, 100%, 0.15);
backdrop-filter: blur(10px);
padding: 3px 20px;
border-radius: 10px;
border: 2px solid hsla(0, 0%, 100%, 0.3);
display: inline-flex;
font-size: 13px;
color: #d5d5d5;
gap: 5px;
align-items: center;
& .price {
font-size: 18px;
font-weight: 700;
color: white;
}
}
.view-vista-tourh-best-inca .field-pgtour-link-content {
display: block;
}
.view-vista-tourh-best-inca .field-pgtour-link-content a {
background-color: var(--color-yellow);
color: #fff;
padding: 8px 20px;
font-size: 1rem;
display: inline-block;
border-radius: 0.375rem;
}
.view-vista-tourh-best-inca .gr-trour-booking {
display: flex;
justify-content: space-between;
align-items: center;
}
.view-vista-tourh-best-inca .field-pgtour-introduction {
font-size: 13px;
}
/* == ./Section Best Machu Picchu == */
/* == Section Salkantay Trek == */
#block-sakuraexpeditions-bloqsalkatrekhm {
background-color: var(--color-background);
}
.gr-salka-main {
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
padding: 2rem 0;
}
.gr-salka-main .field--name-field-tipbloq-salktr-title {
text-align: center;
color: var(--color-brand);
&:after {
content: '';
height: 4px;
width: 150px;
background: linear-gradient(to right,
var(--color-brand) 33.33%,
var(--color-yellow) 33.33% 66.66%,
var(--color-blue) 66.66% 100%);
border-radius: 2px;
display: block;
margin: 10px auto;
}
}
.gr-salka-main .field--name-field-tipbloq-salktr-body {
text-align: center;
font-size: 14px;
}
.view-vista-tourh-salka-trek>.view-content {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.view-vista-tourh-salka-trek>.view-content>.views-row {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
}
.view-vista-tourh-salka-trek .field-pgtour-thumbnail {
height: 280px;
}
.view-vista-tourh-salka-trek .field-tax-dettour-iconw1 {
position: absolute;
top: 10px;
right: 10px;
}
.view-vista-tourh-salka-trek .field-tax-dettour-iconw1 .views-row {
display: flex;
gap: 5px;
font-size: 13px;
background: hsla(0, 0%, 100%, 0.95);
color: var(--color-blue);
padding: 0.5rem 1rem;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.view-vista-tourh-salka-trek .field-pgtour-thumbnail * {
height: 100%;
}
.view-vista-tourh-salka-trek .field-pgtour-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.view-vista-tourh-salka-trek .gr-tour-content {
padding: 1.5rem;
}
.view-vista-tourh-salka-trek .views-field-title {
margin-bottom: 10px;
}
.view-vista-tourh-salka-trek .views-field-title a {
color: var(--color-text);
}
.view-vista-tourh-salka-trek .field-pgtour-introduction {
margin-bottom: 10px;
}
.view-vista-tourh-salka-trek .field-pgtour-difficulty {
margin-top: 15px;
margin-bottom: 15px;
}
.view-vista-tourh-salka-trek .field-pgtour-difficulty .difficulty-rating {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.view-vista-tourh-salka-trek .field-pgtour-difficulty .stars {
display: flex;
gap: 2px;
}
.view-vista-tourh-salka-trek .field-pgtour-difficulty .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #e9ecef;
border: 2px solid rgb(222, 226, 230);
transition: all 0.3s ease;
}
.view-vista-tourh-salka-trek .field-pgtour-difficulty .dot.active {
background: linear-gradient(135deg,
var(--color-blue) 0%,
rgb(37.0283018868, 99.2358490566, 119.9716981132) 100%);
border-color: var(--color-blue);
box-shadow: 0 0 8px rgba(25, 67, 81, 0.4);
}
.view-vista-tourh-salka-trek .gr-tour-booking {
border-top: 1px solid var(--color-border);
padding-top: 10px;
display: flex;
gap: 10px;
align-items: center;
}
.view-vista-tourh-salka-trek .field-pgtour-price {
flex: 1;
border-right: 1px solid var(--color-border);
display: flex;
color: var(--color-text-gray);
font-size: 13px;
text-transform: uppercase;
flex-direction: column;
& .price {
font-size: 30px;
font-weight: bold;
color: var(--color-brand);
letter-spacing: -0.04em;
text-shadow: 0 2px 4px rgba(170, 37, 46, 0.1);
}
}
.view-vista-tourh-salka-trek .field-pgtour-link-content {
flex: 1;
}
.view-vista-tourh-salka-trek .field-pgtour-link-content a {
background: linear-gradient(135deg,
var(--color-brand) 0%,
rgb(136.4927536232, 29.7072463768, 36.9333333333) 100%);
border: none;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
padding: 0.65rem 1.2rem;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(170, 37, 46, 0.3);
position: relative;
overflow: hidden;
line-height: 1.4;
display: inline-block;
width: 100%;
text-align: center;
}
.gr-slider-trust {
position: relative;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-img {
position: absolute;
width: 100%;
height: 100%;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-img .field--type-image {
position: relative;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-img .field--type-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-img * {
height: 100%;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-img img {
object-fit: cover;
width: 100%;
height: 100%;
}
.gr-slider-trust .gr-slider-content {
position: relative;
color: white;
padding: 8% 20px;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-title {
text-align: center;
margin-bottom: 10px;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-title h2 {
font-size: 28px;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-body {
text-align: center;
font-size: 13px;
}
.gr-slider-trust .field--name-field-tipbloq-sld-trust-parg-tru {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.paragraph--type--tip-parag-sld-trust {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon {
width: 60px;
height: 60px;
margin-bottom: 18px;
border-radius: 16px;
background: hsla(0, 0%, 100%, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid hsla(0, 0%, 100%, 0.25);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon .field--type-image {
height: auto;
}
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon svg {
width: 24px;
height: 24px;
}
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon path {
fill: var(--color-yellow);
}
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-title {
font-weight: 700;
margin-bottom: 12px;
line-height: 1.3;
}
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-title h3 {
font-size: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-body {
font-size: 13px;
}
/* == ./Section Salkantay Trek == */
/* == Section certifications == */
.gr-cert-main {
padding: 2rem 0;
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.gr-cert-main .field--name-field-tipbloq-cert-imgs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.gr-cert-main .field--name-field-tipbloq-cert-imgs img {
object-fit: contain;
width: 100%;
height: 110px;
}
/* == ./Section certifications == */
/* == Section List Blogs Home == */
.gr-bloghm-main {
padding: 2rem 0;
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.gr-bloghm-main .field--name-field-tipbloq-bloghm-title {
text-align: center;
color: var(--color-brand);
&:after {
content: '';
height: 4px;
width: 150px;
background: linear-gradient(to right,
var(--color-brand) 33.33%,
var(--color-yellow) 33.33% 66.66%,
var(--color-blue) 66.66% 100%);
border-radius: 2px;
display: block;
margin: 10px auto;
}
}
.gr-bloghm-main .field--name-field-tipbloq-bloghm-body {
text-align: center;
font-size: 14px;
}
.view-vista-list-blog-hm>.view-content {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.view-vista-list-blog-hm>.view-content>.views-row {
background: #fff;
border-radius: 12px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.05);
display: grid;
grid-template-columns: auto 60%;
}
.view-vista-list-blog-hm .field-blog-thumbnail * {
height: 100%;
}
.view-vista-list-blog-hm .field-blog-thumbnail img {
object-fit: cover;
width: 100%;
height: 100%;
}
.view-vista-list-blog-hm .gr-post-content {
padding: 10px 15px;
display: flex;
flex-direction: column;
}
.view-vista-list-blog-hm .field-blog-title {
margin-bottom: 10px;
}
.view-vista-list-blog-hm .field-blog-title a {
font-weight: 700;
line-height: 1.4;
color: var(--color-text);
font-size: 14px;
}
.view-vista-list-blog-hm .field-blog-introduction {
font-size: 13px;
}
.view-vista-list-blog-hm .gr-blog-authored {
display: flex;
border-top: 1px solid var(--color-border);
margin-top: auto;
}
.view-vista-list-blog-hm .field-blog-authoredby {
color: #868e96;
font-size: 0.75rem;
}
.view-vista-list-blog-hm .field-blog-authoredon {
color: #868e96;
font-size: 0.75rem;
margin-top: 5px;
}
/* == ./Section List Blogs Home == */
/* === Reviews === */
.field--name-field-tipbloq-rew-parg-rewv {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.field--name-field-tipbloq-rew-parg-rewv .field--name-field-tipparg-rew-thumb {
width: 50px;
height: 50px;
}
.field--name-field-tipbloq-rew-parg-rewv .field--name-field-tipparg-rew-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.gr-rew-header {
display: flex;
gap: 10px;
}
#block-sakuraexpeditions-bloqreviewstrip {
background: #6c757d;
padding: 2rem 0;
}
.block__trip-main {
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.block__trip-main .paragraph--type--tip-parag-reviews {
padding: 15px;
background: white;
border-radius: 15px;
position: relative;
}
.block__trip-main .paragraph--type--tip-parag-reviews::after {
content: '';
position: absolute;
top: 10px;
right: 10px;
background-image: url('../resources/icons/trip.svg');
background-repeat: no-repeat;
z-index: 10;
width: 20px;
height: 20px;
}
.block__trip-main .field--name-field-tipparg-rew-publish {
color: #767676;
font-size: 13px;
}
.block__trip-main .field--name-field-tipparg-rew-name {
font-weight: 700;
}
.block__trip-main .field--name-field-tipbloq-rew-title {
text-align: center;
margin-bottom: 30px;
}
.block__trip-main .field--name-field-tipbloq-rew-title h2 {
color: white;
font-weight: 700;
}
.block__trip-main .field--name-field-tipparg-rew-body {
margin-top: 15px;
}
.block__trip-main .field--name-field-tipparg-rew-body {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: all 0.3s ease;
}
.block__trip-main .field--name-field-tipparg-rew-body.is-expanded {
-webkit-line-clamp: unset;
display: block;
}
.block__trip-main .btn-leer-mas {
display: inline-block;
font-weight: 400;
white-space: nowrap;
font-size: 13px;
color: #000000;
opacity: 0.5;
text-decoration: none !important;
transition: color 300ms ease-out;
cursor: pointer;
margin-top: 15px;
}
/* === ./Reviews === */
/* == Section Footer == */
.gr-footer-main {
background-color: var(--color-blue);
padding-bottom: 1rem;
}
.field--name-field-tipbloq-ft-bq-ftreser {
background-color: var(--color-yellow);
color: #fff;
text-align: center;
padding: 20px;
}
.field--name-field-tipbloq-ft-bq-ftreser p {
margin: 0;
}
.gr-footer-main .field--name-field-tipbloq-ft-background {
position: relative;
width: 100%;
padding: 0;
overflow: hidden;
line-height: 0;
}
.gr-footer-main .field--name-field-tipbloq-ft-background img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
.gr-footer-blocks {
width: var(--width);
max-width: var(--max-width);
margin: -200px auto 0;
}
.gr-footer-blocks .field--name-field-tipbloq-ftsaku-title {
margin-bottom: 10px;
margin-top: 10px;
}
.gr-footer-blocks .field--name-field-tipbloq-ftsaku-title:after {
content: '';
background: linear-gradient(45deg, rgb(203, 196, 196), transparent);
display: block;
height: 1px;
text-align: left;
border-radius: 0;
margin-top: 5px;
}
.gr-footer-blocks .field--name-field-tipbloq-ftsaku-title h2 {
font-size: 16px;
color: white;
font-weight: 700;
}
.gr-footer-blocks .field--name-field-tipbloq-ftsaku-values a {
color: white;
font-size: 13px;
}
.gr-footer-blocks .field--name-field-tipbloq-ftconts-title {
margin-bottom: 10px;
margin-top: 15px;
}
.gr-footer-blocks .field--name-field-tipbloq-ftconts-title:after {
content: '';
background: linear-gradient(45deg, rgb(203, 196, 196), transparent);
display: block;
height: 1px;
text-align: left;
border-radius: 0;
margin-top: 5px;
}
.gr-footer-blocks .field--name-field-tipbloq-ftconts-title h2 {
font-size: 16px;
color: white;
font-weight: 700;
}
.gr-footer-blocks .field--name-field-tipbloq-ftconts-values a {
color: white;
font-size: 13px;
}
.gr-footer-blocks .field--name-field-tipbloq-desti-title {
margin-bottom: 10px;
margin-top: 15px;
}
.gr-footer-blocks .field--name-field-tipbloq-desti-title:after {
content: '';
background: linear-gradient(45deg, rgb(203, 196, 196), transparent);
display: block;
height: 1px;
text-align: left;
border-radius: 0;
margin-top: 5px;
}
.gr-footer-blocks .field--name-field-tipbloq-desti-title h2 {
font-size: 16px;
color: white;
font-weight: 700;
}
/* == ./Section Footer == */
/* == SECTION TAX BLOG == */
.view-vista-tax-blog-slider>.view-content>.views-row {
position: relative;
}
.view-vista-tax-blog-slider .field-tax-image {
position: absolute;
width: 100%;
height: 100%;
}
.media-image-only,
.field--type-image {
height: 100%;
}
.view-vista-tax-blog-slider .field-tax-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.view-vista-tax-blog-slider .gr-taxblog-content {
position: relative;
padding: 20% 0;
}
.gr-taxblog-content {
color: white;
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.gr-taxblog-content h1 {
padding: 0;
margin: 0;
}
.view-vista-tax-blog-slider .field-tax-image .field--type-image::before {
content: '';
position: absolute;
background: #0000002e;
height: 100%;
width: 100%;
}
.view-vista-tax-blog-slider .field-tax-body {
font-size: 14px;
margin-top: 10px;
}
.view-vista-tax-list-blog {
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.view-vista-tax-list-blog>.view-content {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.view-vista-tax-list-blog>.view-content>.views-row {
display: grid;
grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
height: 220px;
background: #fff;
border-radius: 12px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.view-vista-tax-list-blog .gr-blog-content {
padding: 15px;
font-size: 13px;
}
.view-vista-tax-list-blog .field-blog-thumbnail {
height: 220px;
}
.view-vista-tax-list-blog .field-blog-thumbnail img {
object-fit: cover;
width: 100%;
height: 100%;
}
.view-vista-tax-list-blog .field-blog-introduction {}
.view-vista-tax-list-blog .field-blog-title {
margin-bottom: 10px;
}
.view-vista-tax-list-blog .field-blog-title a {
font-weight: 700;
line-height: 1.4;
color: var(--color-text);
}
.view-vista-tax-list-blog .gr-authored-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
color: var(--color-text-muted);
border-top: 1px solid #e9ecef;
padding-top: 8px;
text-transform: capitalize;
}
.taxonomy-vocabulary--tax-blog .ct-main {
padding: 2rem 0;
}
/* == ./SECTION TAX BLOG == */
/* == PAGINA SINGLE BLOG == */
.view-vista-slider-blog .view-content {
position: relative;
}
.view-vista-slider-blog .field-thumbnail {
position: absolute;
width: 100%;
height: 100%;
& .field--type-image::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.7) 100%);
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.view-vista-slider-blog .slider__content {
position: relative;
padding: 15% 0;
color: white;
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.view-vista-slider-blog .field-title h1 {
font-size: 1.5em;
margin: 0 0 10px;
}
.view-vista-slider-blog .field-authored {
font-size: 13px;
font-weight: 700;
text-transform: capitalize;
}
.page-node-type-page-blog .ct-main {
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
/* == ./PAGINA SINGLE BLOG == */
/* == PAGINA ABOUT US == */
.view-vista-slider-about-us {}
.view-vista-slider-about-us .field-abtus-slider {
max-height: 100px;
height: auto;
overflow: hidden;
}
.view-vista-slider-about-us .field-abtus-slider img {
width: 100%;
margin-top: -80px;
}
/* == ./PAGINA ABOUT US == */
.node--type-page-about-us {
width: 75%;
margin: 0 auto;
}
.node--type-page-about-us .advanced-container:nth-child(1) {
h3 {
color: var(--color-brand);
text-decoration: underline;
text-decoration-color: var(--color-yellow);
text-decoration-thickness: 3px;
}
}
.node--type-page-about-us .advanced-container:nth-child(2) {
flex-direction: column-reverse;
}
.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(1) img {
border-radius: 1rem 1rem 0 0;
}
.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(1) .advanced-container {
flex-direction: row;
display: flex;
margin: 0;
}
.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(1) .advanced-container .advanced-column p {
background-color: var(--color-blue);
color: white;
border-radius: 0 0 1rem 1rem;
border: none;
width: 100%;
font-size: 1rem;
text-align: center;
margin: 0;
}
.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(2) h3 {
margin-bottom: 1rem;
}
.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(2) h3 span {
font-size: 1.5rem;
text-decoration: underline;
text-underline-offset: 0.5rem;
text-decoration-color: var(--color-yellow);
text-decoration-thickness: 3px;
}
.node--type-page-about-us .advanced-container:nth-child(2) .advanced-container p {
color: var(--color-brand);
border: 1px solid var(--color-yellow);
padding: 0.5rem;
border-radius: 0.5rem;
font-size: 0.8rem;
margin: 1rem;
}
.node--type-page-about-us .advanced-container:nth-child(3) .advanced-column {
margin: 1rem 0;
h3 {
color: var(--color-blue);
text-decoration: underline;
text-decoration-color: var(--color-yellow);
text-decoration-thickness: 3px;
text-underline-offset: 5px;
font-size: 1.5rem;
}
p {
margin: 0;
}
.advanced-container {
.advanced-column:nth-child(1) {
box-shadow: 1px 1px 1px var(--color-blue);
border-radius: 1.5rem;
padding: 1rem;
margin: 0.5rem 0.5rem;
h5 {
color: var(--color-brand);
font-size: 1.2rem;
text-decoration: underline;
text-decoration-color: var(--color-yellow);
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
}
.advanced-column:nth-child(2) {
box-shadow: 1px 1px 1px var(--color-blue);
border-radius: 1.5rem;
padding: 1rem;
margin: 0.5rem 0.5rem;
h5 {
color: var(--color-brand);
font-size: 1.2rem;
text-decoration: underline;
text-decoration-color: var(--color-yellow);
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
}
.advanced-column:nth-child(3) {
box-shadow: 1px 1px 1px var(--color-blue);
border-radius: 1.5rem;
padding: 1rem;
margin: 0.5rem 0.5rem;
h5 {
color: var(--color-brand);
font-size: 1.2rem;
text-decoration: underline;
text-decoration-color: var(--color-yellow);
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
}
}
}
.node--type-page-about-us .advanced-container:nth-child(4) {
.advanced-column {
margin: auto 0;
h3 {
color: var(--color-brand);
font-size: 1.5rem;
text-decoration: underline;
text-decoration-color: var(--color-yellow);
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
p {
margin: auto 0;
}
}
.advanced-column {
img {
display: none;
}
}
}
.node--type-page-about-us .advanced-container:nth-child(5) {
.advanced-column {
img {
margin-top: 2rem;
border-radius: 1rem 1rem 0 0;
}
h6 {
color: var(--color-brand);
font-size: 1.2rem;
text-decoration: underline;
text-decoration-color: var(--color-yellow);
text-underline-offset: 3px;
text-decoration-thickness: 3px;
margin-bottom: 0.5rem;
}
p {
box-shadow: 2px 2px 1px 1px var(--color-blue);
border-radius: 0rem 0rem 1rem 1rem;
padding: 0.5rem;
}
}
}
/* == PAGINA TOUR == */
/* Estilos generales solo para la pagina tour */
@scope (.page-node-type-package-tour) {
main {}
.ct-main {
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
}
.entity-ref-tab-formatter-tabs>ul {
list-style: none;
display: flex;
background-color: var(--color-blue);
border-radius: var(--border-radius);
margin-top: 40px;
align-items: center;
overflow: auto;
}
.entity-ref-tab-formatter-tabs>ul a {}
.entity-ref-tab-formatter-tabs>ul a {
padding: 10px 20px;
position: relative;
color: white;
font-weight: 500;
text-transform: uppercase;
display: flex;
gap: 5px;
align-items: center;
:hover {
color: var(--color-hover);
}
}
.entity-ref-tab-formatter-tabs>ul a::after {
position: absolute;
transition: all 0.5s;
width: var(--width);
height: 100px;
border-radius: 3px;
background: linear-gradient(to right,
rgb(226, 126, 9) 17%,
rgb(226, 126, 9) 17%,
rgb(226, 126, 9) 42%,
#ffe4af 42%);
top: 0;
left: 0;
}
.entity-ref-tab-formatter-tabs>ul svg {
width: 24px;
height: 24px;
}
.field--name-field-pgtour-short-description {
background-color: white;
padding: 20px;
border-radius: var(--border-radius);
}
.field--name-field-pgtour-parag-tabs-tour {
background-color: white;
}
.tabs-items {
background-color: white;
border: 1px solid #dee2e6;
padding: 20px;
border-radius: 15px;
margin-top: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tabs-items ul {
padding-left: 1rem;
}
/* Tarjetas de detalles: etiqueta arriba, valor debajo, alineadas a la
izquierda y con el icono pequeno, como el diseno de referencia.
Antes eran neumorficas, centradas y con el icono a 55px. */
.view-parg-detl-tour {
.view-content {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 8px;
background-color: var(--color-background);
transition: background-color 0.2s ease;
&:hover {
background-color: #eceff1;
}
}
.field-parg-icon>.field__item {
display: inline-flex;
justify-content: center;
align-items: center;
}
.field-parg-icon svg {
width: 24px;
height: 24px;
}
.field-parg-icon path {
fill: var(--color-text-muted);
}
/* Ojo: aqui habia 'font-size: bold', que no es una declaracion valida. */
.field-parg-name {
font-size: 13px;
font-weight: 400;
color: var(--color-text-muted);
text-align: left;
line-height: 1.3;
}
.field-parg-valor {
font-size: 15px;
font-weight: 600;
color: var(--color-text);
text-align: left;
line-height: 1.3;
}
}
.views-field-field-pgtour-parag-det-tour {
> .field-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: auto;
margin: 1rem 0;
}
}
}
/* ./Estilos generales solo para la pagina tour */
.block-views-blockvista-tour-booking-block-1 {
margin-top: 10px;
}
#block-sakuraexpeditions-bloqpricingtour {
border: 1px solid #dee2e6;
padding: 20px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin-top:30px;
}
#block-sakuraexpeditions-bloqpricingtour .field--name-field-tipbloq-trpring-descrip {
text-align: center;
}
.view-vista-tour-booking {
background-color: white;
padding: 15px;
border-radius: var(--border-radius);
position: relative;
>.view-content {}
.views-field-title{
text-align: left;
font-weight: 500;
font-size: 0.95rem;
color: var(--color-text-gray);
line-height: 1.35;
margin: 0;
}
.views-field-field-pgtour-price {
text-align: left;
margin-bottom: 30px;
margin-top: 20px;
color: var(--color-blue);
font-size: 13px;
line-height: 1.2;
.price {
color: var(--color-blue);
font-size: 30px;
font-weight: 700;
}
.field-content {
display: flex;
flex-direction: column;
justify-content: center;
}
}
.field-custom-booking {
position: absolute;
top: 20px;
left: 15px;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: bold;
border-radius: var(--border-radius);
color: white;
background-color: var(--color-blue);
}
.vw__field-enquire-now a {
background: var(--color-blue);
color: var(--color-white);
padding: 10px 20px;
font-size: 0.80rem;
text-transform: uppercase;
letter-spacing: 0.08em;
display: block;
width: 100%;
text-align: center;
box-shadow: 6px 7px 11px rgba(0,0,0,0.28),
-4px -4px 8px rgba(255,255,255,0.5),
inset 1px 1px 2px rgba(255,255,255,0.22),
inset -2px -2px 3px rgba(0,0,0,0.18);
transition: transform 0.25s ease,
box-shadow 0.25s ease;
border-radius: 0.4rem;
&:hover{
transform: translateY(-2px);
box-shadow: 8px 10px 14px rgba(0,0,0,0.3),
-5px -5px 9px rgba(255,255,255,0.55);
}
&:active{
transform: translateY(2px);
box-shadow: 3px 3px 6px rgba(0,0,0,0.25),
inset 3px 3px 5px rgba(0,0,0,0.2);
}
}
.vw__field-wha-enquire-now a{
background: var(--color-blue);
color: var(--color-white);
padding: 10px 20px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
display: block;
width: 100%;
text-align: center;
box-shadow: 6px 7px 11px rgba(0,0,0,0.28),
-4px -4px 8px rgba(255,255,255,0.5),
inset 1px 1px 2px rgba(255,255,255,0.22),
inset -2px -2px 3px rgba(0,0,0,0.18);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 0.4rem;
&:hover{
transform: translateY(-2px);
box-shadow: 8px 10px 14px rgba(0,0,0,0.3),
-5px -5px 9px rgba(255,255,255,0.55);
}
&:active{
transform: translateY(2px);
box-shadow: 3px 3px 6px rgba(0,0,0,0.25),
inset 3px 3px 5px rgba(0,0,0,0.2);
}
}
.vw__field-link-booking {}
.vw__field-link-booking a {
color: var(--color-white);
background-color: var(--color-yellow);
font-size: 1rem;
padding: 8px 20px;
border-radius: 0.375rem;
text-transform: uppercase;
box-shadow:
7px 8px 12px rgba(0,0,0,0.25),
-4px -4px 8px rgba(255,255,255,0.65),
inset 2px 2px 3px rgba(255,255,255,0.35),
inset -2px -2px 4px rgba(0,0,0,0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
margin: auto;
width: 70%;
display: block;
text-align: center;
&:hover{
transform: translateY(-2px);
box-shadow: 9px 11px 15px rgba(0,0,0,0.28),
-5px -5px 9px rgba(255,255,255,0.7),
inset 3px 3px 5px rgba(0,0,0,0.18),
inset -2px -2px -2px 4px rgba(255,255,255,0.25);
}
&:active{
transform: translateY(2px);
box-shadow: 3px 3px 6px rgba(0,0,0,0.18),
inset 3px 3px 5px rgba(0,0,0,0.18),
inset -2px -2px 4px rgba(255,255,255, 0.25);
}
}
}
.gr__booking-links {
display: flex;
flex-direction:row;
gap: 20px;
margin-bottom: 10px;
align-items: center;
>.views-field {
width: 100%;
}
}
/* == CAJA DE RESERVA: ajustes de ancho, alto y tipografia fluida ==
Los botones tenian sombras neumorficas de 4 capas y BOOK NOW iba al 70%
con margin:auto. Se igualan los tres a ancho completo y misma altura.
Tamanos con clamp(), que es lo que manda paso2-scripts.md para responsive
sin abrir un tercer archivo de breakpoint. */
#block-sakuraexpeditions-bloqpricingtour {
padding: 16px;
}
.view-vista-tour-booking {
padding: 0;
}
/* Word "Cambios faltantes": nombre del tour mas grande en la caja de reserva. */
.view-vista-tour-booking .views-field-title {
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
font-weight: 700;
color: var(--color-blue);
line-height: 1.25;
}
.view-vista-tour-booking .views-field-field-pgtour-price {
margin-top: 10px;
margin-bottom: 18px;
}
.view-vista-tour-booking .views-field-field-pgtour-price .price {
font-size: clamp(1.6rem, 2.6vw, 2rem);
}
.view-parg-detl-tour .field-parg-name {
font-size: clamp(11px, 0.9vw, 13px);
}
.view-parg-detl-tour .field-parg-valor {
font-size: clamp(13px, 1.1vw, 15px);
}
/* Los tres botones, con la misma caja */
.view-vista-tour-booking .vw__field-link-booking a,
.view-vista-tour-booking .gr__booking-links a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
margin: 0;
padding: 10px 12px;
border-radius: 0.4rem;
font-size: clamp(0.72rem, 0.9vw, 0.85rem);
line-height: 1.2;
letter-spacing: 0.06em;
text-align: center;
text-transform: uppercase;
box-shadow: none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.view-vista-tour-booking .vw__field-link-booking a {
font-size: clamp(0.85rem, 1.1vw, 1rem);
font-weight: 700;
}
.view-vista-tour-booking .vw__field-link-booking a:hover,
.view-vista-tour-booking .gr__booking-links a:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.view-vista-tour-booking .vw__field-link-booking a:active,
.view-vista-tour-booking .gr__booking-links a:active {
transform: translateY(1px);
box-shadow: none;
}
/* Los dos de contacto, a la misma altura aunque uno parta en dos lineas */
.gr__booking-links {
gap: 12px;
margin-bottom: 0;
align-items: stretch;
}
/* flex:1 1 0 y no width:100%: dentro de un contenedor flex, width no impide
que el item se encoja al ancho de su texto. Asi cada boton ocupa la mitad
exacta y cuadra con las dos columnas de tarjetas de arriba. */
.gr__booking-links > .views-field {
display: flex;
flex: 1 1 0;
min-width: 0;
}
/* Hay un .field-content intermedio que tambien es item flex y se encogia al
ancho del texto: sin esta regla los .views-field median 183 pero el boton
de dentro solo 130. */
.gr__booking-links > .views-field > .field-content {
display: flex;
flex: 1 1 0;
min-width: 0;
}
/* == ./CAJA DE RESERVA == */
.view-vista-slider-tour {
position: relative;
}
.view-vista-slider-tour .views-field-title {
z-index: 2;
}
/* Titulo del hero: linea de acento + titular en mayusculas, como el diseno
de referencia. La linea usa el rojo de marca; con cambiar la variable
pasa a dorado. */
.view-vista-slider-tour .views-field-title h1 {
text-transform: uppercase;
font-size: 2rem;
line-height: 1.05;
font-weight: 800;
}
/* Subtitulo del hero: la duracion del tour. Es un bloque hermano del slider
dentro de la misma region, asi que se posiciona contra ella. */
.region-slider {
position: relative;
}
#block-sakuraexpeditions-hero-tour-dur {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 18px;
text-align: center;
color: var(--color-white);
font-size: 15px;
}
.view-vista-slider-tour .views-field-title h1::before {
content: "";
display: block;
width: 70px;
height: 4px;
margin: 0 auto 14px;
background-color: var(--color-brand);
}
.open-gallery {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 1;
background: hsla(0, 0%, 100%, 0.15);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 5px;
border: 1px solid hsla(0, 0%, 100%, 0.3);
display: inline-flex;
font-size: 11px;
color: white;
gap: 5px;
align-items: center;
font-weight: 700;
text-transform: uppercase;
}
/* Solo aplicar para mobile */
@media (max-width: 1023px) {
.view-vista-slider-tour {
overflow: hidden;
height: 450px;
>.view-content {
height: 100%;
}
.gallery-grid {
height: 100%;
position: relative;
/* El velo plano #00000082 tapaba la foto entera. Se sustituye por el
degradado inferior, que solo oscurece donde va el texto. */
&::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.2) 70%,
rgba(0, 0, 0, 0.5) 80%,
rgba(0, 0, 0, 0.7) 90%,
rgba(0, 0, 0, 0.9) 100%);
}
>a:not(:first-child) {
display: none;
}
}
.image-gallery {
height: 100%;
}
.views-field-field-pgtour-slider-image {
position: absolute;
height: 100%;
width: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.views-field-title {
position: relative;
}
.views-field-title {
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 52px;
}
h1 {
margin: 0;
color: white;
text-align: center;
}
}
}
.field--name-field-pgtour-short-description {
border: 1px solid #dee2e6;
padding: 20px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* === SECTION RELATED TOURS === */
#block-sakuraexpeditions-bloqrelatedtours {
background-color: #fdf5ed;
margin-top: 30px;
}
.related__group-main {
--padding: 1rem;
width: var(--width);
max-width: var(--max-width);
margin: 0 auto;
padding-top: var(--padding);
padding-bottom: var(--padding);
}
.field--name-field-tip-bloq-reltr-title {
margin-bottom: 20px;
}
.field--name-field-tip-bloq-reltr-title h2 {
text-align: center;
font-size: 2em;
}
.view-vista-related-tours>.view-content {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.view-vista-related-tours>.view-content>.views-row {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
background-color: white;
display: flex;
flex-direction: column;
}
.view-vista-related-tours .related__group-content {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.view-vista-related-tours .related__field-thumbnail img {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
}
.view-vista-related-tours .related__field-title {
border-bottom: 1px solid var(--color-border);
margin-bottom: 15px;
}
.view-vista-related-tours .related__field-title a {
color: var(--color-text);
font-size: 1.25rem;
font-weight: 700;
}
.view-vista-related-tours .related__field-description {
font-size: 16px;
}
.view-vista-related-tours .related__field-details {
margin-top: 20px;
margin-bottom: 20px;
line-height: 1.2;
font-size: 14px;
}
.view-vista-related-tours .related__field-details ol {
list-style: disc;
}
.view-vista-related-tours .paragraph--type--tip-parag-deta-tour {
display: flex;
gap: 8px;
}
.view-vista-related-tours .field--name-field-tipparag-dettour-taxdettou {
font-weight: 700;
}
.view-vista-related-tours .field--name-field-tipparag-dettour-taxdettou::after {
content: ':';
}
.view-vista-related-tours .field--name-field-tipparag-dettour-difvalue {
display: none;
}
.view-vista-related-tours .related__group-princing {
display: flex;
margin-top: auto;
justify-content: space-between;
padding-top: 15px;
align-items: center;
border-top: 1px solid var(--color-border);
}
.view-vista-related-tours .related__field-price {
display: flex;
flex-direction: column;
text-align: start;
color: var(--color-text-gray);
font-size: 13px;
text-transform: uppercase;
line-height: 1.2;
}
.view-vista-related-tours .related__field-linktx a {
background: linear-gradient(135deg,
var(--color-brand) 0%,
rgb(136.4927536232, 29.7072463768, 36.9333333333) 100%);
border: none;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
padding: 0.65rem 1.2rem;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(170, 37, 46, 0.3);
position: relative;
overflow: hidden;
line-height: 1.4;
display: inline-block;
width: 100%;
text-align: center;
}
.view-vista-related-tours .related__field-price .price {
font-size: 30px;
font-weight: bold;
color: var(--color-brand);
letter-spacing: -0.04em;
text-shadow: 0 2px 4px rgba(170, 37, 46, 0.1);
}
/* === SECTION RELATED TOURS === */
/* == ./PAGINA TOUR == */
/* == PAGINA CATEGORIA == */
/* == ./PAGINA CATEGORIA == */
/* === SECCION BOTON FLOTANTE ===*/
#block-sakuraexpeditions-bloqwhatsapp .contextual .trigger {
right: 0px;
top: -30px;
}
#block-sakuraexpeditions-bloqwhatsapp .contextual-region .contextual .contextual-links {
top: -40px;
}
#block-sakuraexpeditions-bloqwhatsapp {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
}
.field--name-field-tipbloq-what-link a {
background-color: #25d366;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
text-decoration: none;
}
.field--name-field-tipbloq-what-link svg {
width: 35px;
height: 35px;
fill: white;
}
.field--name-field-tipbloq-what-link path {
fill: white;
}
.field--name-field-tipbloq-what-link a:hover {
transform: scale(1.1);
background-color: #128c7e;
}
/* === ./SECCION BOTON FLOTANTE ===*/
/* === SECCION TOC JS */
/* === SECCION TOC JS */
/* Contenedor principal */
.page-node-type-page-blog #sidebar_right {
height: 100%;
}
.page-node-type-page-blog .region-sidebar-right {
height: 100%;
}
.toc-js-container {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.toc-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
color: #333;
display: inline-block;
padding-bottom: 5px;
}
.toc-js-container ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.toc-js-container ul ul {
padding-left: 1.5rem;
margin-top: 0.5rem;
}
.toc-js-container li {
margin-bottom: 0.75rem;
}
.toc-js-container a {
text-decoration: none;
color: var(--color-text);
transition: color 0.2s ease;
font-size: 0.95rem;
line-height: 1.4;
}
.toc-js-container a:hover {
color: var(--color-brand);
text-decoration: underline;
}
.toc-js-container .toc-active>a {
color: var(--color-brand);
font-weight: 600;
}
.toc-js-container .toc-active {
padding-left: 10px;
margin-left: -13px;
}
/* === ./SECCION TOC JS */
/* == PAGINA CATEGORIA TOURS (TAX) == */
.view-vista-tax-paq-tour {
width: 90%;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
.view-vista-slider-tax-paq>.view-content {
position: relative;
height: 450px;
}
.view-vista-slider-tax-paq .tax-field-image {
position: absolute;
width: 100%;
height: 100%;
}
.view-vista-slider-tax-paq .tax-field-image ::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
opacity: 0.7;
background: linear-gradient(180deg, #000 0%, transparent 100%);
}
/* height:100% en el img necesita que TODA la cadena tenga altura definida.
Entre .tax-field-image y el ![]()
hay dos envoltorios del media sin altura
(uno de ellos el .contextual-region), asi que el porcentaje quedaba
indeterminado y la imagen salia a su alto natural, desbordando la banda. */
.view-vista-slider-tax-paq .tax-field-image > *,
.view-vista-slider-tax-paq .tax-field-image > * > *,
.view-vista-slider-tax-paq .tax-field-image > * > * > * {
height: 100%;
}
.view-vista-slider-tax-paq .tax-field-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.view-vista-slider-tax-paq .gr-slider-content {
position: relative;
width: 100%;
max-width: 90%;
margin: 0 auto;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: white;
text-align: center;
}
.view-vista-slider-tax-paq .tax-field-name h1 {
margin: 0;
color: white;
}
.view-vista-slider-tax-paq .tax-field-description {
margin-top: 10px;
}
/* == ./PAGINA CATEGORIA TOURS (TAX) == */
.webform--wf_contactenos #contenedor {
width: 100%;
max-width: 85%;
margin: 0 auto;
}
#edit-wf-contactenos-layout {
flex-direction: column-reverse;
}
#edit-wf-contactenos-det>.field--name-field-media-image img {
width: 100%;
max-width: 10%;
margin: 0 auto;
}
#edit-wf-contactenos-det>.field--name-field-media-image img {
width: 100%;
height: auto;
}
#edit-wf-contactenos-det>p {
font-size: 1rem;
font-weight: 100;
}
#edit-wf-contactenos-det ul {
list-style: none;
}
#edit-wf-contactenos-det .icon-message {
color: var(--color-blue);
border: 1px solid var(--color-brand);
padding: 10px;
border-radius: 10px;
margin-bottom: 1rem;
}
#edit-wf-contactenos-det>.advanced-container {
color: var(--color-blue);
border: 1px solid var(--color-brand);
padding: 10px;
border-radius: 10px;
}
#edit-wf-contactanos-titulo-form h2 {
text-decoration: underline;
text-decoration-color: var(--color-yellow);
text-decoration-thickness: 3px;
text-underline-offset: 8px;
}
#edit-wf-contactenos-nomb-comp {
width: 100%;
padding: 10px;
color: var(--color-blue);
border: 1px solid white;
border-radius: 5px;
box-sizing: border-box;
box-shadow: -1px 1px 1px 1px var(--color-yellow);
}
#edit-wf-contactenos-nomb-comp--description {
color: var(--color-blue);
}
#edit-wf-contactenos-correo {
width: 100%;
padding: 10px;
color: var(--color-blue);
border: 1px solid white;
border-radius: 5px;
box-sizing: border-box;
box-shadow: -1px 1px 1px 1px var(--color-yellow);
}
#edit-wf-contactenos-correo--description {
color: var(--color-blue);
}
#edit-wf-contactenos-celular {
width: 100%;
padding: 10px 10px 10px 50px;
color: var(--color-blue);
border: 1px solid white;
border-radius: 5px;
box-sizing: border-box;
box-shadow: -1px 1px 1px 1px var(--color-yellow);
}
#edit-wf-contactenos-celular--description {
color: var(--color-blue);
}
.iti {
width: 100%;
}
#edit-wf-contactenos-mensaje {
width: 100%;
padding: 10px;
color: var(--color-blue);
border: 1px solid white;
border-radius: 5px;
box-sizing: border-box;
box-shadow: -1px 1px 1px 1px var(--color-yellow);
}
#edit-wf-contactenos-mensaje--description {
color: var(--color-blue);
}
#edit-actions-submit {
background-color: var(--color-brand);
color: white;
float: right;
padding: 10px 20px;
border: 1 solid var(--color-brand);
border-radius: 3px;
margin-bottom: 1rem;
}
#edit-wf-contactenos-ubi iframe {
width: 100%;
}
/* aqui tenemos letras con linea dorada*/
.txt-under::after {
content: "";
display: block;
width: 30px;
height: 2px;
background-color: var(--color-yellow);
margin-bottom: 1rem;
}
/*usando el icono datos*/
.dt-dato{
display: inline-flex;
align-items: center;
}
.dt-dato::before{
content: "";
display: inline-block;
width: 30px;
height: 30px;
margin-right: 3px;
background-image: url("./../resources/icons/datos.svg");
background-size: contain;
background-repeat: no-repeat;
}
/*usando el icono de recomendaciones*/
.dt-check{
display: flex;
align-items: flex-start;
}
.dt-check::before{
content: "";
width: 15px;
height: 15px;
margin-right: 3px;
margin-top: 6px;
flex-shrink: 0;
background-image: url("./../resources/icons/check.svg");
background-size: contain;
background-repeat: no-repeat;
}
/*lista de datos tecnicos*/
.dt-tec{
list-style-type: none;
}
.dt-tec::before{
content: "";
width: 15px;
height: 15px;
float: left;
margin-right: 10px;
background-image: url("./../resources/icons/cube.svg");
background-size: contain;
background-repeat: no-repeat;
}
/*usando el icono d estrella*/
.dt-star::before{
content: "";
width: 15px;
height: 15px;
float: left;
margin-right: 10px;
margin-top: 4px;
background-image: url("./../resources/icons/star-model.svg");
background-size: contain;
background-repeat: no-repeat;
}
/*usando el icono de marcadura de mapa*/
.dt-maplu::before{
content: "";
width: 15px;
height: 15px;
float: left;
margin-right: 10px;
margin-top: 4px;
background-image: url("./../resources/icons/maplu.svg");
background-size: contain;
background-repeat: no-repeat;
}
/*usando el icono de incluye*/
.i-incluye{
display: inline-flex;
align-items: center;
}
.i-incluye::before{
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background-image: url("./../resources/icons/incluye.svg");
background-size: contain;
background-repeat: no-repeat;
}
/*usando el icono de no incluye*/
.i-noincluye::before{
content: "";
width: 20px;
height: 20px;
float: left;
margin-right: 3px;
margin-top: 2px;
background-image: url("./../resources/icons/noincluye.svg");
background-size: contain;
background-repeat: no-repeat;
}
/*usando el icono de flecha*/
.p-flecha{
display: inline-flex;
align-items: center;
}
.p-flecha::before{
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background-image: url("./../resources/icons/puntoflecha.svg");
background-size: contain;
background-repeat: no-repeat;
}
.view-vista-parr-tax-det-pag-paq-tou .view-content {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.view-vista-parr-tax-det-pag-paq-tou .view-content .views-row {
display: flex;
align-items: center;
gap: 10px;
}
.view-vista-parr-tax-det-pag-paq-tou .view-content .views-row .views-field-field-tax-dettour-icon svg {
width: 30px;
height: 30px;
flex-shrink: 0;
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 2: cabecera
========================================================================== */
/* Fuera los iconos de redes sociales. Se oculta el field__item entero para que
no quede el hueco del contenedor. */
#block-sakuraexpeditions-bt-head .field__item:has(.hdr-social-item) {
display: none;
}
/* BOOK NOW en azul y algo mas largo. */
#block-headercta .field--name-field-bt-head-cta-lnk a {
background-color: var(--color-blue);
padding-left: 32px;
padding-right: 32px;
}
/* Iconos de correo y telefono en azul. Los dos svg usan fill="currentColor",
asi que basta con el color heredado; se mantienen los mismos iconos. */
#block-sakuraexpeditions-bt-head .hdr-contact-item svg {
color: var(--color-blue);
}
/* Banderas fuera: los idiomas pasan a texto EN / ES. El texto real del enlace
se anula con font-size 0 y se repone por hreflang, que no depende del idioma
en que este la pagina. */
/* Solo la bandera. Los PNG tienen proporciones distintas (24x12 la britanica,
18x12 la espanola): con height fijo salian de ancho desigual. Caja fija y
object-fit cover para que las dos midan lo mismo. */
/* Por CLASE, no por id: el id del bloque (#block-languageswitcher) sale de su
etiqueta y en /es/ se convierte en #block-alternadordeidioma. */
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .language-icon {
display: block;
width: 30px;
height: 20px;
object-fit: cover;
border-radius: 2px;
}
/* `flex`, no `inline-flex`: en linea el enlace apoya en la linea base y el li
crece 7px por debajo de la bandera, que queda alta respecto al resto. */
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface li,
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface a {
display: flex;
align-items: center;
line-height: 0;
font-size: 0;
text-decoration: none;
}
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .links {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .is-active a {
text-decoration: underline;
}
/* Cabecera mas delgada: el logo manda la altura. */
#block-sakuraexpeditions-bt-head .site-logo img {
max-width: 180px;
height: auto;
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 2: menu desplegable
Mas aire entre tipos de tour y filas mas finas, para que quepan mas
alternativas sin que el panel crezca.
========================================================================== */
.tbm-subnav .tbm-item,
.tbm-submenu .tbm-item {
margin-bottom: 2px;
}
.tbm-submenu .tbm-link {
padding-top: 6px;
padding-bottom: 6px;
line-height: 1.3;
}
.tbm-submenu .tbm-column + .tbm-column {
padding-left: 28px;
}
.tbm-submenu .tbm-block > .tbm-link,
.tbm-submenu .tbm-item.level-2 > .tbm-link {
margin-bottom: 6px;
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 4: botones de las tarjetas de tour
Los botones que van SOBRE una fotografia usan el blanco translucido de los
botones del slider principal; el resto se queda en rojo de marca.
========================================================================== */
.view-vista-tourh-best-inca .field-pgtour-link-content a,
.view-vista-tourh-salka-trek .field-pgtour-link-content a {
background: rgba(255, 255, 255, 0.12);
background-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
padding-left: 34px;
padding-right: 34px;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.view-vista-tourh-best-inca .field-pgtour-link-content a:hover,
.view-vista-tourh-salka-trek .field-pgtour-link-content a:hover {
background-color: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.7);
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 4: experiencias vivenciales
Solo el texto manda, la imagen crece y los botones son blancos y mas largos.
========================================================================== */
/* El campo real es field-tipbloq-sld-machh-links; los botones pasan al blanco
translucido del slider principal y se alargan. */
.gr-machu-content .field--name-field-tipbloq-sld-machh-links a,
.field--name-field-tipbloq-sld-machh-links .field__item:first-child a {
background: rgba(255, 255, 255, 0.12);
background-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
padding-left: 38px;
padding-right: 38px;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.gr-machu-content .field--name-field-tipbloq-sld-machh-links a:hover {
background-color: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.7);
}
/* Solo el texto manda: un velo uniforme lo hace legible de lado a lado de la
foto, en vez del oscurecido parcial que dejaba media frase sobre el fondo
claro. */
/* El velo de vivenciales es el del propio tema (.field--type-image:before);
aqui solo se le da ancla y se aclara, ver la seccion Slider Machu. */
.gr-machu-content {
z-index: 2;
}
/* Iconos de "More than a journey" subidos como PNG (D10): se pintan con ![]()
y no como SVG en linea, asi que hay que darles caja. */
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon img {
width: 48px;
height: 48px;
object-fit: contain;
display: block;
margin: 0 auto;
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 7: pie de pagina
========================================================================== */
/* Los colores de arriba de la imagen se funden con el blanco de la pagina. */
#block-sakuraexpeditions-bt-foot .ft-bg {
position: relative;
}
/* El azul de la imagen del pie es #012143; el del bloque era el de marca
(#002b4f) y se veia la costura justo donde acaba la foto. */
#block-sakuraexpeditions-bt-foot {
background-color: #012143;
}
#block-sakuraexpeditions-bt-foot .ft-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
background: linear-gradient(to bottom,
#fff 0%,
rgba(255, 255, 255, 0.85) 35%,
rgba(255, 255, 255, 0.45) 65%,
rgba(255, 255, 255, 0) 100%);
pointer-events: none;
z-index: 1;
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 8: paginas de tour
========================================================================== */
/* La linea de acento pasa de roja a amarilla. */
.view-vista-slider-tour .views-field-title h1::before {
background-color: var(--color-yellow);
}
/* Duracion mas grande y en mayusculas. */
.view-vb-pgtour-hero-dur .views-row,
.view-vb-pgtour-hero-dur .field-content {
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* En movil la galeria es de una columna y ya ocupa lo que necesita; el alto
del hero se sube solo en escritorio, donde estan las tres fotos. */
/* Primer parrafo de la ficha: capital amarilla que le da peso. */
.field--name-field-pgtour-short-description > p:first-of-type::first-letter {
color: var(--color-yellow);
font-size: 3.2em;
font-weight: 700;
line-height: 0.85;
float: left;
padding-right: 10px;
padding-top: 4px;
}
/* Menos sangria en el itinerario. */
.field--name-field-pgtour-parag-itinerary ul,
.field--name-field-pgtour-parag-itinerary ol,
.paragraph--type--tip-parag-itinerary ul,
.paragraph--type--tip-parag-itinerary ol {
padding-left: 18px;
margin-left: 0;
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 9: caja de reserva y caracteristicas
========================================================================== */
/* El BOOK NOW amarillo pasa a rojo de marca. */
.vw__field-link-booking a,
.view-vista-tour-booking .vw__field-link-booking a {
background-color: var(--color-brand);
}
/* Titulos de las caracteristicas mas grandes. */
.gr-details-descrip .field-parg-taxo,
.gr-details-descrip .field-content:first-child {
font-size: 1.05rem;
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 10: mas tours
Segmento mas reducido y con el mismo blanco del resto de la pagina.
========================================================================== */
#block-sakuraexpeditions-bloqrelatedtours {
background-color: #fff;
margin-top: 20px;
padding-top: 18px;
padding-bottom: 18px;
}
/* ==========================================================================
CAMBIOS REQUERIDOS (PDF) - pagina 6: fondo de las resenas
El bloque no tiene campo de imagen (solo parg_rewv y title), asi que el
fondo va por CSS desde resources/img en vez de crear un campo nuevo.
========================================================================== */
#block-sakuraexpeditions-bloqreviewstrip {
position: relative;
background: url("./../resources/img/fondo-reviews.jpg") no-repeat center / cover;
padding-top: 3rem;
padding-bottom: 3rem;
}
/* Velo para que las tarjetas blancas y el titulo sigan leyendose sobre la foto. */
#block-sakuraexpeditions-bloqreviewstrip::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(0, 43, 79, 0.72) 0%,
rgba(0, 43, 79, 0.58) 100%);
pointer-events: none;
}
#block-sakuraexpeditions-bloqreviewstrip > * {
position: relative;
z-index: 1;
}