/*
* Portada — portado desde el componente HTML embebido del sitio en Wix.
* Generado por extract/src/06-portada.mjs: no editar a mano, se regenera.
* Todo el CSS está acotado a .transal-home para que no afecte al resto del sitio.
*/
.transal-home{
--navy: #032238;
--navy-hover: #0a3b50;
--aqua: #76e4bc;
--aqua-hover: #91ebca;
--green-dark: #198867;
--text: #173142;
--muted: #5f7481;
--border: #dce7eb;
--soft-green: #f4faf8;
--white: #ffffff;
}.transal-home *{
box-sizing: border-box;
}.transal-home,.transal-home{
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}.transal-home{
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif;
background: #ffffff;
color: var(--text);
}.transal-home a,.transal-home button{
font: inherit;
}.transal-home{
width: 100%;
overflow: hidden;
background: #ffffff;
}.transal-home .transal-hero{
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 510px;
padding:
58px
clamp(28px, 7vw, 110px)
82px;
color: #ffffff;
background-image:
linear-gradient(
90deg,
rgba(2, 24, 41, 0.97) 0%,
rgba(2, 28, 47, 0.85) 40%,
rgba(2, 31, 50, 0.40) 72%,
rgba(2, 31, 50, 0.08) 100%
),
linear-gradient(
0deg,
rgba(2, 23, 40, 0.54) 0%,
rgba(2, 23, 40, 0.02) 60%
),
url("portada/9e5e95_b33de5fa9e7b4b1fa192944aaab4237a.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}.transal-home .hero-content{
width: 100%;
max-width: 800px;
}.transal-home .hero-eyebrow{
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
color: rgba(255, 255, 255, 0.94);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.11em;
line-height: 1.2;
text-transform: uppercase;
}.transal-home .hero-eyebrow::before{
content: "";
width: 40px;
height: 3px;
flex: 0 0 40px;
border-radius: 10px;
background: var(--aqua);
}.transal-home .hero-title{
max-width: 800px;
margin: 0;
color: #ffffff;
font-size: clamp(48px, 5.5vw, 76px);
font-weight: 820;
letter-spacing: -0.05em;
line-height: 0.98;
text-wrap: balance;
}.transal-home .hero-title span{
display: block;
color: var(--aqua);
}.transal-home .hero-description{
max-width: 650px;
margin: 24px 0 0;
color: rgba(255, 255, 255, 0.92);
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.55;
}.transal-home .hero-actions{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}.transal-home .hero-button{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 50px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: 9px;
font-size: 14px;
font-weight: 750;
line-height: 1;
text-decoration: none;
transition:
transform 180ms ease,
background-color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}.transal-home .hero-button:hover{
transform: translateY(-2px);
}.transal-home .hero-button-primary{
color: #03291f;
background: var(--aqua);
box-shadow:
0 11px 28px rgba(0, 0, 0, 0.22);
}.transal-home .hero-button-primary:hover{
background: var(--aqua-hover);
box-shadow:
0 15px 32px rgba(0, 0, 0, 0.28);
}.transal-home .hero-button-secondary{
color: #ffffff;
border-color: rgba(255, 255, 255, 0.48);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}.transal-home .hero-button-secondary:hover{
border-color: rgba(255, 255, 255, 0.80);
background: rgba(255, 255, 255, 0.16);
}.transal-home .hero-time{
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: rgba(255, 255, 255, 0.82);
font-size: 12px;
font-weight: 650;
line-height: 1.4;
}.transal-home .hero-time svg{
width: 14px;
height: 14px;
flex: 0 0 14px;
color: var(--aqua);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}.transal-home .routes-section{
position: relative;
width: 100%;
padding:
0
clamp(22px, 6vw, 90px)
72px;
background: #ffffff;
}.transal-home .routes-container{
width: 100%;
max-width: 1240px;
margin: 0 auto;
}.transal-home .benefit-box{
position: relative;
z-index: 3;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 17px;
width: 100%;
margin: -38px 0 52px;
padding: 18px 22px;
border: 1px solid rgba(35, 167, 127, 0.28);
border-radius: 13px;
background: #ffffff;
box-shadow:
0 16px 44px rgba(11, 54, 75, 0.14);
}.transal-home .benefit-icon{
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
flex: 0 0 45px;
border-radius: 50%;
color: #05332a;
background: var(--aqua);
}.transal-home .benefit-icon svg{
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}.transal-home .benefit-copy{
min-width: 0;
}.transal-home .benefit-label{
display: block;
margin-bottom: 3px;
color: var(--green-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.11em;
line-height: 1.2;
text-transform: uppercase;
}.transal-home .benefit-title{
margin: 0;
color: var(--navy);
font-size: clamp(17px, 1.7vw, 22px);
font-weight: 780;
letter-spacing: -0.02em;
line-height: 1.25;
}.transal-home .benefit-description{
margin: 4px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}.transal-home .benefit-link{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 42px;
padding: 0 17px;
border: 1px solid #a7d8c9;
border-radius: 8px;
color: var(--navy);
background: #f4fbf8;
font-size: 12px;
font-weight: 750;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition:
transform 180ms ease,
background-color 180ms ease,
border-color 180ms ease;
}.transal-home .benefit-link:hover{
transform: translateY(-2px);
border-color: #60caa8;
background: #eaf8f3;
}.transal-home .routes-heading{
max-width: 720px;
margin-bottom: 28px;
}.transal-home .routes-eyebrow{
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 12px;
color: var(--green-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.2;
text-transform: uppercase;
}.transal-home .routes-eyebrow::before{
content: "";
width: 36px;
height: 3px;
border-radius: 5px;
background: var(--aqua);
}.transal-home .routes-title{
margin: 0;
color: var(--navy);
font-size: clamp(32px, 3.8vw, 48px);
font-weight: 810;
letter-spacing: -0.04em;
line-height: 1.04;
}.transal-home .routes-intro{
max-width: 650px;
margin: 14px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 1.5;
}.transal-home .routes-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 19px;
}.transal-home .route-card{
display: flex;
flex-direction: column;
min-width: 0;
min-height: 465px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 13px;
background: #ffffff;
box-shadow:
0 11px 32px rgba(16, 61, 80, 0.09);
transition:
transform 200ms ease,
box-shadow 200ms ease,
border-color 200ms ease;
}.transal-home .route-card:hover{
transform: translateY(-4px);
border-color: #acd9cc;
box-shadow:
0 18px 40px rgba(16, 61, 80, 0.14);
}.transal-home .route-image{
position: relative;
width: 100%;
height: 180px;
flex: 0 0 180px;
background-image:
linear-gradient(
0deg,
rgba(3, 34, 56, 0.38) 0%,
rgba(3, 34, 56, 0) 62%
),
var(--route-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}.transal-home .route-number{
position: absolute;
top: 13px;
right: 13px;
display: flex;
align-items: center;
justify-content: center;
min-width: 29px;
height: 29px;
padding: 0 7px;
border-radius: 20px;
color: #ffffff;
background: rgba(3, 34, 56, 0.70);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}.transal-home .route-content{
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
padding: 20px;
}.transal-home .route-label{
margin: 0 0 9px;
color: var(--green-dark);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}.transal-home .route-title{
margin: 0;
color: var(--navy);
font-size: 21px;
font-weight: 790;
letter-spacing: -0.025em;
line-height: 1.15;
}.transal-home .route-description{
margin: 12px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}.transal-home .route-tags{
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 17px;
}.transal-home .route-tag{
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 5px 9px;
border: 1px solid #d5e7e2;
border-radius: 999px;
color: #345867;
background: var(--soft-green);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}.transal-home .route-tag::before{
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: #49c49f;
}.transal-home .route-action{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: fit-content;
min-height: 42px;
margin-top: auto;
padding: 0 16px;
border: 0;
border-radius: 8px;
color: #03291f;
background: var(--aqua);
font-size: 12px;
font-weight: 750;
line-height: 1;
text-decoration: none;
transition:
transform 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}.transal-home .route-action:hover{
transform: translateY(-2px);
background: var(--aqua-hover);
box-shadow:
0 8px 18px rgba(31, 145, 111, 0.18);
}@media (max-width: 940px){.transal-home .transal-hero{
min-height: 550px;
}.transal-home .benefit-box{
grid-template-columns: auto minmax(0, 1fr);
}.transal-home .benefit-link{
grid-column: 2;
justify-self: start;
}.transal-home .routes-grid{
grid-template-columns: 1fr;
}.transal-home .route-card{
display: grid;
grid-template-columns: minmax(250px, 38%) minmax(0, 1fr);
min-height: 290px;
}.transal-home .route-image{
width: 100%;
height: 100%;
min-height: 290px;
flex: none;
}.transal-home .route-content{
padding: 25px;
}}@media (max-width: 640px){.transal-home .transal-hero{
min-height: 670px;
align-items: flex-end;
padding:
54px
19px
88px;
background-image:
linear-gradient(
0deg,
rgba(2, 23, 40, 0.98) 0%,
rgba(2, 27, 45, 0.86) 58%,
rgba(2, 28, 46, 0.24) 100%
),
url("portada/9e5e95_b33de5fa9e7b4b1fa192944aaab4237a.webp");
background-position: 58% center;
}.transal-home .hero-eyebrow{
gap: 9px;
margin-bottom: 17px;
font-size: 10px;
}.transal-home .hero-eyebrow::before{
width: 29px;
flex-basis: 29px;
}.transal-home .hero-title{
font-size: clamp(39px, 12vw, 51px);
line-height: 1;
}.transal-home .hero-description{
margin-top: 19px;
font-size: 15px;
}.transal-home .hero-actions{
display: grid;
grid-template-columns: 1fr;
gap: 9px;
margin-top: 23px;
}.transal-home .hero-button{
width: 100%;
min-height: 47px;
}.transal-home .routes-section{
padding:
0
15px
55px;
}.transal-home .benefit-box{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-top: -45px;
margin-bottom: 43px;
padding: 18px;
}.transal-home .benefit-link{
width: 100%;
}.transal-home .routes-title{
font-size: 35px;
}.transal-home .routes-intro{
font-size: 14px;
}.transal-home .routes-grid{
gap: 15px;
}.transal-home .route-card{
display: flex;
min-height: 0;
}.transal-home .route-image{
height: 175px;
min-height: 175px;
flex: 0 0 175px;
}.transal-home .route-content{
padding: 19px;
}.transal-home .route-action{
width: 100%;
margin-top: 22px;
}.transal-home .route-tag{
font-size: 9px;
}}.transal-home .hero-button:focus-visible,.transal-home .benefit-link:focus-visible,.transal-home .route-action:focus-visible{
outline: 3px solid rgba(44, 173, 134, 0.58);
outline-offset: 3px;
}@media (prefers-reduced-motion: reduce){.transal-home .hero-button,.transal-home .benefit-link,.transal-home .route-card,.transal-home .route-action{
transition: none;
}.transal-home .hero-button:hover,.transal-home .benefit-link:hover,.transal-home .route-card:hover,.transal-home .route-action:hover{
transform: none;
}}