#modal-video { border: none; width: auto; max-width: 90vw; }
#modal-video .modal-content { padding: 1rem; display: grid; place-items: center; }
#modal-video video { display: block; width: 80%; max-width: 1200px; height: auto; max-height: 80vh; margin: 0 auto; object-fit: contain; }
@font-face {
font-family: 'Gotham';
src: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/fonts/Gotham-Book.woff2) format('woff2'),
url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/fonts/Gotham-Book.woff) format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gotham';
src: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/fonts/Gotham-Medium.woff2) format('woff2'),
url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/fonts/Gotham-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gotham';
src: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/fonts/Gotham-Bold.woff2) format('woff2'),
url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/fonts/Gotham-Bold.woff) format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gotham';
src: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/fonts/Gotham-Black.woff2) format('woff2'),
url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/fonts/Gotham-Black.woff) format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
*,::after,::before,::backdrop,::file-selector-button { margin: 0; padding: 0;}
*,::after,::before,::backdrop,::file-selector-button { box-sizing: border-box; border: 0 solid;}
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit;}
ol,ul,menu { list-style: none;}
img,svg,video,canvas,audio,iframe,embed,object { display: block; vertical-align: middle;}
img,video { max-width: 100%; height: auto;}
hr {height: 0; color: inherit; border-top-width: 1px;}
b, strong {font-weight: 700;}
a {color: inherit;-webkit-text-decoration: inherit;text-decoration: inherit;}
:root {
--color-yellow: #f3d03d;
--color-orange: #fc963e;
--color-blue: #009ade;
--color-foreground: #1d1d1b;
--color-gray: #6f6f6e;
--color-darkblue: #003057;
--color-btn-darkblue: #25335c;
--container-max-width: 1400px;
--container-padding: 1.5rem;
}
html {
font-family: Gotham, system-ui, sans-serif;
color:  var(--color-foreground);
font-size: 16px;
font-weight: 300;
scroll-behavior: smooth;
overflow-x: hidden;
} #inicio, #cotiza, #nosotros, #caracteristicas, #instalaciones, #fichas, #ubicacion, #empresas, #contacto { scroll-margin-top: 120px; }
body {
position: relative;
overflow-x: hidden;
}
h2 {
font-size: 1.75rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: .5rem;
}
h3 {
text-transform: uppercase;
text-align: center;
font-size: 1.75rem;
margin-bottom: .5rem;
strong {
font-weight: 900;
}
}
p {margin-bottom: 2rem;}
.font-book {font-weight: 300;}
.font-medium {font-weight: 500;}
.font-bold {font-weight: 700;}
.font-black {font-weight: 900;}
.font-2xl {font-size: 1.5rem;} .font-6xl {font-size: 1.75rem;} .block {display: block;}
.flex {display: flex;}
.mb-4 {margin-bottom: 1rem;}
.container {
max-width: var(--container-max-width);
padding: 0 var(--container-padding);
margin: 0 auto;
}
header {
background: #ffffff; color: var(--color-darkblue);
padding: 1rem 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
a {
color: var(--color-darkblue); }
.spacing {
flex-grow: 1;
}
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
&.solid {
background: #ffffff;
}
}
.logo {
filter: none;
width: 180px;
display: grid;
place-items: center;
}
#hamburger {
color:white;
background: none;
border: none;
cursor: pointer;
padding: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.1);
svg {
width: 24px;
height: 24px;
display: none;
transition: opacity 0.3s ease;
}
.icon-menu {
display: block;
}
}
.nav-open #hamburger .icon-menu {
display: none;
}
.nav-open #hamburger .icon-close {
display: block;
}
.nav-right {
max-height: 0;
overflow: hidden;
width: 100%;
transition: max-height 0.3s ease;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
&.open {
max-height: calc(100vh - 80px);
height: 100dvh;
}
}
.main-nav, .social-nav {
font-size: 1.125rem;
}
.main-nav {
--inline-padding: .5rem;
a {
display: block;
text-transform: uppercase;
padding: 1rem;
}
> li > ul {
font-size: 1rem;
}
}
.social-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
margin: 0 0 0;
padding: 1rem 0 1rem 1rem;
li a {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
line-height: 1;
}
li { display: inline-flex; align-items: center; }
svg { display: block; }
}
ul.check  {
font-size: 1.125rem;
margin: 2rem 0;
li {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
}
li:before {
content: '';
background: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/img/svg/check.svg) no-repeat top left / contain;
width: 50px;
flex: 0 0 auto;
height: auto;
aspect-ratio: 7/6;
}
} .carousel {
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
margin: auto;
}
.carousel-track {
display: flex;
scroll-snap-type: x mandatory;
overflow-x: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slide {
flex: 0 0 100%;
scroll-snap-align: start;
width: 100%;
height: 970px;
background: #eee;
display: flex;
align-items: center;
justify-content: flex-start;
user-select: none;
touch-action: pan-y;
position:relative;
&:before {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.28);
z-index: 2;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
}
.carousel-dots {
display: none;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
position: absolute;
right: .5rem;
top: 50%;
transform: translateY(-50%);
padding: 0;
width: auto;
}
.carousel-dots button {
width: 15px;
height: 15px;
border-radius: 50%;
background: transparent;
border: 2px solid white;
cursor: pointer;
padding: 0;
transition: all 0.3s ease-in;
}
.carousel-dots button.active {
background: white;
}
.slide-wrapper {
padding: var(--container-padding);
position: relative;
z-index: 3;
max-width: var(--container-max-width);
width: 100%;
margin: 0 auto;
}
.content-scope {
background: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/img/svg/scope-top-left.svg) no-repeat top left,
url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/img/svg/scope-bottom-right.svg) no-repeat bottom right;
background-size: 50px 53px;
padding: 2rem;
position:relative;
max-width: 830px;
color:white;
margin-top: -22rem;
p {
font-size: 1.125rem;
}
}
.main-form {
position: relative;
margin-bottom: 50px;
}
.form {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: none;
color: white;
color-scheme: dark;
position: absolute;
bottom: 0;
z-index: 2;
padding: 0.5rem 0;
width: 100%;
text-align: center;
.form-inner {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding);
width: 100%;
position: relative;
min-height: 60px; }
.form-block { text-align: left; width: 100%; }
.form-block form .inputs { text-align: left; }
.form-block address { text-align: center; display: block; width: 100%; }
form {
margin-bottom: 0;
}
h3 { 
margin-bottom: -1rem !important;
}
address {
display: inline;
font-style: normal;
> img, > a {
display: inline;
}
img {
filter: brightness(100);
vertical-align: text-bottom;
}
}
p {
display: flex;
}
h3 {
color: white;
text-transform: uppercase;
font-size: 1.25rem;
font-weight: 300;
margin-bottom: .5rem;
}
input {
width: 100%;
padding: 0.75rem;
border-radius:5px;
margin: 0 0 0.75rem;
border: 1px solid #cacaca;
background-color: rgba(0,0,0,.46);
font-size: 1.125rem;
}
button {
display: block;
width: 100%;
}
} .form .carousel-dots { align-self: center; }
.form .carousel-dots button {
width: 15px !important;
height: 15px !important;
display: inline-block;
padding: 0;
border-radius: 50%;
flex: 0 0 auto;
}
button.btn-main, a.btn-main {
font-family: Gotham, system-ui, sans-serif;
background-color: var(--color-yellow);
color: var(--color-foreground);
padding: 0.75rem 1.5rem;
border-radius: 5px;
font-weight: 300;
font-size: 1.125rem;
text-transform: uppercase;
border: 1px solid var(--color-yellow);
cursor: pointer;
display: inline-block;
transition: background-color .3s ease-in-out, color .3s ease-in-out;
white-space: nowrap;
vertical-align: middle;
&:hover {
background-color: hsl(from var(--color-yellow) h s 70% / 1);
}
img {
max-height: 20px;
margin: 0 .5rem;
display: inline-block;
vertical-align: sub;
}
strong {
font-weight: 900;
}
&.btn-secondary {
background-color: var(--color-blue);
border: 1px solid var(--color-blue);
&:hover {
background-color: hsl(from var(--color-blue) h s 60% / 1);
}
}
&.btn-darkblue {
color: white;
background-color: var(--color-darkblue);
border: 1px solid var(--color-darkblue);
white-space: normal;
span {
display: block;
font-size: 80%;
}
&:hover {
background-color: hsl(from var(--color-darkblue) h s 30% / 1);
}
}
&.btn-orange {
color: white;
background-color: var(--color-orange);
border: 1px solid var(--color-orange);
&:hover {
background-color: hsl(from var(--color-orange) h s 60% / 1);
}
}
}
input.btn-main {
font-family: Gotham, system-ui, sans-serif;
background-color: var(--color-yellow);
color: var(--color-foreground);
padding: 0.75rem 1.5rem;
border-radius: 5px;
font-weight: 300;
font-size: 1.125rem;
text-transform: uppercase;
border: 1px solid var(--color-yellow);
cursor: pointer;
display: inline-block;
transition: background-color .3s ease-in-out, color .3s ease-in-out;
white-space: nowrap;
vertical-align: middle;
}
input.btn-main:hover {
background-color: hsl(from var(--color-yellow) h s 70% / 1);
}
.buttons-right {
text-align: center;
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
align-items: center;
}
.action-buttons {
position: fixed;
bottom: 0;
right: 0;
width: auto;
display: block; z-index: 3;
background-color: transparent;
backdrop-filter: none;
padding: 0;
margin-right: -5px;
}
.action-buttons .btn-main { display: block; margin-bottom: .75rem; text-align: center; }
.fade-in-scroll {
opacity: 0;
transform: translateY(35px);
animation: fadeInUp linear both;
animation-timeline: scroll(root);
animation-range: 100vh 115vh;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(35px);
pointer-events: none;
}
to {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
.spacer {height: 200px;}
.section-title {
margin: 1.5rem 0 2rem;
color: var(--color-gray);
&:before {
content: '';
background: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/img/svg/isotipo.svg) no-repeat top center / 60px 60px;
width: 60px;
height: 60px;
display: inline-block;
margin-right: 1.125rem;
vertical-align: bottom;
}
} .modal-head-inline { display: flex; align-items: center; gap: 1rem; margin-top: 20px; }
.modal-head-inline .section-badge { align-self: center; }
.modal-head-title { margin: 0; text-transform: uppercase; font-size: 1.5rem; color: var(--color-gray); font-weight: 700; line-height: 1; display: inline-flex; align-items: center; }
.label-fullbleed {
width: 100vw;
margin-bottom: 50px;
}
.label-modal {
width: auto;
margin: 0 0 3rem;
margin-left: -24px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--color-orange);
color: #fff;
padding: .75rem 1.25rem;
border-radius: 0 14px 14px 0; }
.section-badge .badge-title {
font-size: 1.4rem;
font-weight: 900;
text-transform: uppercase;
padding-left: 20px;
}
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
gap: 2fr;
}
.nosotros .nosotros-content {
width: 100%;
margin: 0;
text-align: left;
}
.features {
padding: 4rem 0;
ul { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.feature-card { text-align: left; }
.feature-icon { width: auto; height: auto; border-radius: 0; background: transparent; display: inline-block; margin-bottom: 1rem; }
.feature-card h4 { text-transform: uppercase; font-weight: 900; color: #1d1d1b; font-size: 1rem; margin-bottom: .25rem; }
.feature-underline { width: 50px; height: 8px; background: var(--color-blue); margin: 0 0 1rem; }
.feature-underline.is-blue { background: #273162; width: 45px; }
.feature-underline.is-green { background: #e8de4f; width: 45px; }
.feature-card p { font-size: 0.9rem; color: var(--color-foreground); line-height: 1.4; }
}
.bg-instalaciones {
background: rgba(0,0,0,.28) no-repeat center / cover;
background-blend-mode: multiply;
color: white;
padding: 2rem 0 12rem;
h2 {
color: white;
}
h3 {
margin-top: 8rem;
}
}
.instalaciones-intro {
padding: 2rem 0 0;
color: var(--color-foreground);
}
.instalaciones-intro p {
font-size: 1.25rem;
line-height: 1.5;
margin: 0 0 1rem;
} .intro-grid {
display: grid;
gap: 2rem;
align-items: center;
}
.intro-figure {
display: grid;
} .orange-frame {
border: 22px solid var(--color-orange);
border-radius: 24px;
}
.frame-inner {
position: relative;
background: #000;
overflow: clip;
}
.frame-inner img { position: relative; z-index: 0; }
.frame-inner:after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,.5);
pointer-events: none; z-index: 1;
}
.frame-inner img {
display: block;
width: 100%;
height: auto;
}
.frame-overlay {
position: absolute;
inset: 0;
display: grid;
align-items: end;
justify-items: center;
padding: 1.25rem 1.25rem 1.75rem;
z-index: 2;
}
.frame-caption {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 9rem; display: grid;
place-items: center;
text-align: center;
color: #fff;
padding: 1rem;
pointer-events: none; }
.frame-text { font-size: clamp(1rem, 2.4vw, 1.75rem); line-height: 1.25; text-transform: uppercase; }
.frame-text strong { font-weight: 900; }
.overlay-cta { position: relative; z-index: 3; pointer-events: auto; }
.overlay-cta {
background-color: var(--color-yellow);
border-color: var(--color-yellow);
}
.btn-bottom {
text-align: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.gray-section {
padding: 1.25rem;
background-color: #b2b2b1;
display: flex;
flex-direction: column;
gap: 1.25rem;
margin: 3rem 0;
}
.gray-section-box {
aspect-ratio: 4 / 3;
width: 100%;
position: relative;
text-transform: uppercase;
display: grid;
align-items: center;
color: white;
background-color: black;
img {
position: absolute;
inset: 0;
object-fit: cover;
width: 100%;
height: 100%;
opacity: .66;
}
.gray-content {
position: relative;
z-index: 1;
padding: 1.25rem;
text-align: center;
font-size: 1.5rem;
}
h4 {
font-weight: 900;
margin-bottom: 1rem;
}
p {
margin-bottom: 0;
}
}
.section-paragraph {
font-size: 1.125rem;
text-align: center;
}
.section-paragraph.strong { 
font-weight: 400; 
}
.section-padding {  
padding: 2rem 0 8rem;
}
.section-map {
background-color: #f4f5f7;
padding: 3rem 0;
overflow-x: clip;
ul {
margin: 4rem 0;
}
li {
padding: 1rem 0;
border-bottom: 1px solid #c2c2c1;
text-transform: uppercase;
font-size: 1.125rem;
list-style-type: disc;
}
}
.video-thumbnail {
aspect-ratio: 16 / 9;
border: 7px solid white;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
display: grid;
place-items: center;
text-align: center;
position: relative;
& > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
div {
position: relative;
z-index: 1;
}
}
.map {
aspect-ratio: 1 / 1;
width: 100%;
border-radius: 50%;
border: 7px solid white;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
background: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/img/map.webp) no-repeat center / cover;
}
.composed-video-map {
position: relative;
margin-bottom: 1.5rem;
.map {
margin-top: -60px;
}
}
.empresas {
padding: 3rem 0;
.item { width: 200px; height: 144px; display: grid; place-items: center; }
.item > img { width: 100%; height: 100%; object-fit: contain; }
.list {
position: relative;
padding-inline: 80px;
overflow: hidden;
}
.logos-track {
display: flex;
gap: 1.5rem;
transition: transform .4s ease-in-out;
will-change: transform;
}
.logos-track .item { flex: 0 0 auto; }
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
border: none;
padding: .25rem;
border-radius: 8px;
z-index: 2;
}
.prev {
left: 0;
}
.next {
right: 0;
}
} .wpcf7-form {
margin-bottom: .5rem;
} div#wpcf7-f738-o1 {
margin-bottom: 10px;
}
.wpcf7-form .inputs {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: .75rem;
margin-bottom: .75rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
width: 100%;
padding: 0.75rem;
border-radius: 5px;
margin: 0;
border: 1px solid #cacaca;
background-color: rgba(0,0,0,.46);
font-size: 1.125rem;
color: white;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
color: rgba(255,255,255,0.7);
}
.wpcf7-form .wpcf7-submit {
display: block;
width: 100%;
} .wpcf7-not-valid-tip {
color: #ff6b6b;
font-size: 0.9rem;
margin-top: 0.25rem;
}
.wpcf7-response-output {
margin-top: 1rem;
padding: 1rem;
border-radius: 5px;
text-align: center;
}
.wpcf7-mail-sent-ok {
background-color: rgba(72, 187, 120, 0.1);
color: #48bb78;
border: 1px solid #48bb78;
}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
background-color: rgba(245, 101, 101, 0.1);
color: #f56565;
border: 1px solid #f56565;
}
footer {
background-color: #f4f5f7;
padding: 2rem 0 5rem;
color: var(--color-darkblue);
}
.footer-admin {
font-size: 0.938rem;
margin-bottom: 2rem;
}
.footer-admin h4 {
text-transform: uppercase;
margin-bottom: 1rem;
}
.footer-admin address {
font-style: normal;
}
.footer-admin img {
display: inline-block;
vertical-align: middle;
}
.logo-footer {
text-align: center;
width: 100%;
}
.logo-footer img {
width: 260px;
margin: 0 auto 1rem;
}
.logo-footer p { margin-top: 40px; }
dialog {
box-sizing: border-box;
border: 10px solid var(--color-yellow);
border-radius: 15px;
padding: 0;
width: 90vw;
max-width: 90vw;
height: 90vh;
max-height: 90vh;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
font-size: 1.125rem;
margin: 5vh auto 0;
ul {
padding-left: 1rem;
}
li {
list-style-type: disc;
margin-bottom: .5rem;
}
strong {font-weight: 700;}
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
} #modal-seguridad { border: none; max-width: 1100px; width: 95%; }
#modal-seguridad .modal-sec-grid { align-items: start; }
#modal-seguridad .modal-sec-image { align-self: start; } @media (min-width: 100rem) { .modal-content {
overflow: hidden;
}
}
.modal-content {
padding: 0.5rem 1.5rem 2rem;
position: relative;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.close-btn {
position: absolute;
top: 0.5rem;
right: 0.75rem;
background: transparent;
border: none;
font-size: 1.25rem;
cursor: pointer;
color: #666;
}
.close-btn:hover {
color: black;
font-size: 1.125rem;
}
.section-map ul.bullet {
font-size: 1.125rem;
li {
list-style-type: none;
text-transform: none;
vertical-align: middle;
color: var(--color-foreground);
&:before {
content: "• ";
color: var(--color-yellow);
font-size: 2rem;
vertical-align: middle;
}
}
}
.flipped {
padding: 3rem 0 6rem;
}
.modal-image-frame { position: relative; }
.modal-image-frame .modal-image { 
display:block; 
height:93%; 
margin: 0 auto;
}
.zoom-btn { position:absolute; top:.5rem; right:.5rem; background:white; border:1px solid #ddd; border-radius:6px; padding:.25rem; cursor:pointer; }
.modal-image-frame.zoomed .modal-image { transform: scale(1.4); transform-origin: center; transition: transform .2s ease-in-out; }
#imageWrapper.zoomed img { transform: scale(1.4); transform-origin:center; transition: transform .2s ease-in-out; }
#index-input, #totalImages { color: inherit; }
.gallery {
width: 100%;
text-align: center;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0; }
.tab-panel { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.form-panel .wpcf7-form { color-scheme: light; } .image-wrapper {
width: 100%; flex: 1 1 auto;
position: relative;
overflow: hidden; }
.image-wrapper.zoomed {
overflow: auto; cursor: grab;
}
.image-wrapper.zoomed:active {
cursor: grabbing;
}
.image-wrapper img {
width: 100%;
height: 100%;
max-width: 1200px; object-fit: contain;
display: none;
transition: transform 0.25s ease;
transform-origin: center center;
will-change: transform;
margin: 0 auto; }
.image-wrapper.zoomed img.active { width: 140%; max-width: none; cursor: inherit; transform: none; }
.image-wrapper img.active { display: block; }
.controls {
text-transform: uppercase;
display: flex;
gap: .75rem;
justify-content: space-between;
align-items: center;
font-size: 1rem;
padding: 1.25rem 0;
}
.controls .flex { gap: .25rem .75rem; align-items: center; }
.index-input { width: 64px; text-align: center; padding: 4px 6px; border: 1px solid var(--color-yellow); }
.nav-buttons { border: 1px solid var(--color-yellow); display: flex; }
.nav-buttons button { min-width: 44px; }
.nav-buttons button { border: none; background: var(--color-btn-darkblue); font-size: 20px; cursor: pointer; padding: 5px 10px; }
.nav-buttons button:disabled { opacity: .3; cursor: not-allowed; }
.end-button { flex: 1 1 auto; text-align: right; }
.magnifier { background: none; display: inline-block; cursor: pointer; } .controls-form { border-top: 1px solid #eee; margin-top: 50px; } @media (max-width: 48rem) {
dialog { border-width: 0; }
.controls { align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
.controls .flex { width: 100%; flex-wrap: wrap; align-items: center; gap: .5rem; }
.controls .flex > div:first-child { width: 100%; display: flex; align-items: center; gap: .5rem; }
.nav-buttons { border: none; margin-left: 0; width: auto; align-self: flex-start; }
.magnifier { margin-left: .5rem; align-self: flex-start; }
.magnifier img { width: 26px; height: 26px; }
.controls .end-button { width: 100%; text-align: right; }
.controls .end-button .btn-main { font-size: .95rem; padding: .5rem .875rem; border-radius: 8px; }
} .error-page {
padding: 120px 0 160px;
background: linear-gradient(180deg, rgba(0,48,87,0.04) 0%, rgba(255,255,255,1) 40%);
}
.error-shell {
margin-top: 2.5rem;
display: grid;
gap: 2.5rem;
}
.error-copy {
max-width: 540px;
}
.error-heading {
font-size: clamp(1.4rem, 4vw, 2.4rem);
font-weight: 900;
line-height: 1.05;
text-transform: uppercase;
}
.error-lead {
margin-top: 1.5rem;
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-gray);
}
.error-actions {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem 1.25rem;
}
.error-actions .btn-main {
min-width: 220px;
text-align: center;
}
.error-panel {
display: grid;
gap: 1.5rem;
}
.error-card {
background: #fff;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 48, 87, 0.05);
}
.error-card h2 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
text-transform: uppercase;
}
.error-card p {
font-size: 1rem;
line-height: 1.6;
color: var(--color-gray);
margin-bottom: 1rem;
}
.error-card .search-form {
display: flex;
flex-wrap: wrap;
gap: .75rem;
}
.error-card .search-form label {
flex: 1 1 260px;
}
.error-card .search-form .search-field {
width: 100%;
padding: .75rem 1rem;
border-radius: 12px;
border: 1px solid rgba(0, 48, 87, 0.15);
font-size: 1rem;
}
.error-card .search-form .search-submit {
background: var(--color-darkblue);
color: #fff;
border: none;
border-radius: 12px;
padding: .75rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: transform .2s ease, background .2s ease;
}
.error-card .search-form .search-submit:hover {
transform: translateY(-2px);
background: var(--color-btn-darkblue);
}
.error-contact .btn-main {
align-self: flex-start;
}
@media (min-width: 62rem) {
.error-shell {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
align-items: start;
}
.error-panel {
justify-self: stretch;
}
}
@media (max-width: 48rem) {
.error-page {
padding: 96px 0 120px;
}
.error-card {
padding: 1.5rem;
}
.error-actions .btn-main {
width: 100%;
}
}
.modal-sec-header { margin: 1rem 0 2rem; }
.modal-sec-header .title-xl { font-size: 1.5rem; text-align: left; text-transform: uppercase; margin: 0.5rem 0 0; line-height: 1.15; font-weight: 900; }
@media (min-width:48rem){ .modal-sec-header .title-xl{ font-size: 2.25rem; line-height: 1.1; } }
.modal-sec-grid { display:grid; gap:2rem; align-items:center; }
@media (min-width:67.5rem){ .modal-sec-grid { grid-template-columns: 1.3fr 1fr; gap: 3rem; } }
.modal-sec-text p { font-size:1rem; margin-bottom:1.5rem; line-height: 1.5; }
.modal-sec-text ul.check { margin: 0; }
.modal-sec-text ul.check li:before { background: url(//litoral.truemarketingpartner.cl/wp-content/themes/tmp2025litoral/assets/img/svg/check.svg) no-repeat center / contain; width: 40px; height: 30px; }
.modal-sec-text ul.check li { font-size: 0.9rem; margin-bottom: 1rem; gap: 0.75rem; }
.modal-sec-image { position:relative; margin-right: -1.5rem; }
.modal-sec-image .image-wrapper { aspect-ratio: 16 / 9; overflow: hidden; }
@media (max-width: 67.438rem) {  .social-nav {
order: -1; display: flex;
align-items: center;
justify-content: flex-start;
gap: .75rem;
padding: .75rem 1.25rem;
border-bottom: 2px solid #eaeaea;
width: 100%;
}
.nav-right {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background-color: #ffffff;
backdrop-filter: none;
border-radius: 0 0 16px 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
}
.nav-right.open {
height: auto !important;
max-height: none !important;
} .social-section {
display: flex;
align-items: center;
justify-content: flex-start; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 2px solid #eaeaea;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.social-label {
color: var(--color-darkblue);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.social-links {
display: flex;
gap: .5rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--color-darkblue);
color: white;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.social-link:hover {
background: var(--color-yellow);
color: var(--color-darkblue);
transform: translateY(-2px);
}
.social-link svg {
width: 18px;
height: 18px;
} .main-navigation {
width: 100%;
}
.main-nav {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
}
.main-nav li {
width: 100%;
border-bottom: 1px solid #eaeaea;
}
.main-nav li:last-child {
border-bottom: none;
}
.main-nav li a { 
color: var(--color-darkblue);
padding: 1.25rem 1.5rem;
display: block;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.main-nav a::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background: var(--color-yellow);
transition: width 0.3s ease;
z-index: -1;
}
.main-nav a:hover { 
background: transparent; 
color: #e8de4f; 
text-decoration: underline;
padding-left: 2rem;
}
.main-nav a:hover::before {
width: 4px;
}
.main-nav > li:not(:last-child) > a {
border-bottom: none;
}
} @media (min-width:67.5rem) {
.main-nav > li:hover { background-color: transparent; }
.main-nav > li:hover > a,
.main-nav > li > a:hover {
color: #e8de4f !important;
text-decoration: underline;
border-bottom-color: transparent !important;
background: transparent;
}
} @media (max-width: 67.438rem) {
.action-buttons { left: 0; right: 0; bottom: 0; top: auto; width: 100%; display: flex; justify-content: center; gap: .75rem; background-color: rgba(255,255,255,.6); backdrop-filter: blur(8px); padding: .75rem var(--container-padding); margin-right: 0; border-top: 1px solid #eaeaea; box-shadow: 0 -6px 16px rgba(0,0,0,.05); }
.action-buttons .btn-main { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; height: 36px; font-size: .9rem; border-radius: 8px; padding: 0 .875rem; line-height: 1; }
.action-buttons .btn-back { display: none; }
}
@media (min-width:48rem) { .logo {
width: 240px;
}
header {
padding: 0.5rem 0;
}
h2 {
font-size: 2rem;
}
.font-6xl {font-size: 3.2rem;} .content-scope {
background-size: 65px 70px;
margin-top: 0;
padding: 1.5rem;
p {
font-size: 1.25rem;
}
}
.form {
padding: 0.75rem 0;
.inputs {
display:grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: .75rem;
margin-bottom: .75rem
}
input {
margin-bottom: 0;
}
}
.slide {
height: 700px;
}
.carousel-dots { display: none; }
.section-title {
margin-bottom: 4.6rem;
}
.section-deck {
font-size: 3.15rem; margin-bottom: 5.625rem;
}
.section-paragraph {
font-size: 1.75rem; ;
}
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 2rem;
}
.main-nav {
font-size: 1.125rem;
--inline-padding: .75rem;
gap: 1.5rem;
> li > ul {
font-size: 1rem;
}
}
.social-nav {
margin: 0 0 20px;
justify-content: flex-start;
}
.gray-section {
flex-direction: row;
}
.composed-video-map .video-thumbnail {
width: 50%;
position: relative;
z-index: 1;
}
.composed-video-map .map {
margin-top: 0px;
width: 65%;
position: absolute;
right: -100px;
top: -300px;
}
.footer-admin {
font-size: 1.125rem;
line-height: 1.4;
address img {
width: 20px;
height: 20px;
}
}
.logo-footer img {
width: 100%;
max-width: 320px;
}
.logo-footer {
font-size: 1.125rem;
}
.nosotros .section-paragraph {
text-align: left;
}
dialog {
font-size: 1.75rem;
}
ul.check, .section-map ul.bullet {
font-size: 1.75rem;
li:before {
font-size: 4rem;
}
}
}
@media (min-width:67.5rem) { header .spacing {display: none;}  
#hamburger {
display: none;
}
.nav-right {
max-height: none;
display: flex;
align-items: center;
gap: 1.25rem;
overflow: visible;
flex: 1 1 auto;
width: auto;
&.open {
max-height: none;
height: auto;
}
} .social-section {
display: flex;
align-items: center;
gap: 1rem;
padding: 0 0 0 1rem;
}
.social-label {
color: var(--color-darkblue);
font-weight: 500;
font-size: 0.9rem;
}
.social-links {
display: flex;
gap: 0.5rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
background: transparent;
color: var(--color-darkblue);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.social-link:hover {
background: var(--color-yellow);
color: var(--color-darkblue);
border-color: var(--color-yellow);
}
.social-link svg {
width: 16px;
height: 16px;
}
.main-nav {
width: auto;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: .225rem;
flex: 1 1 auto;
> li {
padding: .5rem var(--inline-padding) 0;
background-color: hsla(0 0% 0% / 0);
transition: background-color 0.2s ease-in;
position: relative;
> ul {
display: none;
opacity: 0;
position: absolute;
transition: opacity 0.2s ease-in, display .2s ease-in allow-discrete;
background-color: hsla(0 0% 0% / .6);
width: 100%;
left: 0;
top: 100%;
padding-inline: var(--inline-padding);
font-size: 1rem;
a {
color: white;
border-bottom: 2px solid white;
}
}
&:has(ul):hover {
background-color: hsla(0 0% 0% / .6);
> ul {
transition: opacity 0.2s ease-in;
opacity: 1;
display: block;
@starting-style {
opacity: 0;
}
}
} &:hover > ul,
&:focus-within > ul {
transition: opacity 0.2s ease-in;
opacity: 1;
display: block;
}
&:hover > ul,
&:focus-within > ul {
background-color: hsla(0 0% 0% / .6);
}
&:hover {
> a {
color: white;
border-bottom: 2px solid white;
}
}
&:hover:has(ul) {
background-color: hsla(0 0% 0% / .6);
}
}
a {
text-align: center;
border-bottom: 2px solid transparent;
padding: 0.5rem 1rem;
font-size: medium;
}
ul li:last-child a {
border-bottom: none;
}
}
.slide {
height: 720px;
}
.carousel-dots { display: none; }
.form .inputs {
grid-template-columns: repeat(4, 1fr);
}
.wpcf7-form .inputs {
grid-template-columns: repeat(4, 1fr);
}
.form button {
display: inline-block;
width: auto;
padding-inline: 3rem;
}
.wpcf7-form .wpcf7-submit {
display: inline-block;
width: auto;
padding-inline: 3rem;
}
.composed-video-map .map {
top:-370px;
right: -140px
} .features ul {
grid-template-columns: repeat(6, 1fr);
}
.footer-admin {
display: flex;
h4 {
flex: 0 0 40%;
}
}
.action-buttons {
top: 16vh;
bottom: auto;
width: auto;
display: block;
background-color: transparent;
backdrop-filter: none;
padding: 0;
margin-right: -5px;
.btn-main {
margin-bottom: .75rem;
}
}
.grid-70-30 {
display: grid;
grid-template-columns: 7fr 3fr;
gap: 1fr;
}
.intro-grid {
grid-template-columns: 7fr 3fr;
}
}
@media (min-width:75rem) { .logo {
width: 250px;
}
.form {
padding: 0.75rem 0;
.inputs {
margin-bottom: 0;
grid-gap: 1rem;
width: 100%;
}
form {
display: flex;
gap: 1rem;
}
}
.slide {
height: 670px;
}
.carousel-dots { display: none; }
.section-paragraph {
font-size: 1.75rem;
}
.footer-admin {
font-size: 1.25rem;
line-height: 1.4;
address img {
width: 22px;
height: 22px;
}
}
.logo-footer img {
width: 100%;
max-width: 340px;
}
.logo-footer {
font-size: 1.25rem;
}
} @media (min-width: 60rem) and (max-width: 80rem) { .flex-xxl {
display: flex;
gap: 1rem;
}
.footer-left {
flex: 1 1 70%;
}
.footer-admin {
font-size: 1rem;
line-height: 1.3;
margin-bottom: 1.25rem;
address img {
width: 18px;
height: 18px;
}
}
.logo-footer {
flex: 1 1 30%;
width: auto;
text-align: center;
}
.logo-footer img {
width: 100%;
max-width: 280px;
margin: 0 auto 0.5rem;
}
.logo-footer {
font-size: 1rem;
}
} @media (min-width: 80rem) { .carousel-dots {
display: flex !important;
justify-content: flex-end;
}
.content-scope p {
display: block !important;
}
} @media (min-width: 87.5rem) { .slide {
height: 800px;
}
} @media (min-width: 80rem) and (max-width: 90rem) { .flex-xxl {
display: flex;
gap: 1.5rem;
}
.footer-left {
flex: 1 1 65%;
}
.footer-admin {
font-size: 1.125rem;
line-height: 1.4;
margin-bottom: 1.5rem;
address img {
width: 20px;
height: 20px;
}
}
.logo-footer {
flex: 1 1 35%;
width: auto;
text-align: center;
}
.logo-footer img {
width: 100%;
max-width: 300px;
margin: 0 auto 0.75rem;
}
.logo-footer {
font-size: 1.125rem;
}
}
@media (min-width:90rem) { .main-nav, .social-nav {
font-size: 1.313rem;
}
.main-nav {
--inline-padding: 1rem;
gap: 2rem;
> li > ul {
font-size: 1.125rem;
}
}
.social-nav {
margin: 0;
}
.features ul { grid-template-columns: repeat(6, 1fr); }
.features h4 { font-size: 1.125rem; }
.gray-section-box .gray-content {
font-size: 2.813rem;
}
.section-map li {
font-size: 1.75rem;
}
.flex-xxl {
display: flex;
gap: 2rem;
}
.footer-left {
flex: 1 1 70%;
}
.logo-footer {
flex: 1 1 30%;
width: auto;
}
ul.check li:before {
width: 72px;
}
.carousel-dots { display: flex; justify-content: flex-end; }
}
@media (min-width:100.0625rem) { .slide {
height: 960px;
}
}
@media (min-width:102.5rem) { .slide {
height: calc(100dvh - 3rem);
min-height: 920px;
}
.carousel-dots { justify-content: flex-end; }
}
@media (min-width:108.75rem) { .carousel-dots { }
}
.content-scope {
width: 100%;
}