:root{
--color-1:#063349;
--color-2:#3a5770;
--color-3:#f3a102;
--color-4:#fca880;
--color-5:#fde1a8}
@font-face{
font-family:'Psilograph';
src:url('../fonts/psilograph-regular.ttf') format('truetype');
font-weight:400;
font-style:normal;
font-display:swap}
@font-face{
font-family:'Psilograph';
src:url('../fonts/psilograph-bold.ttf') format('truetype');
font-weight:700;
font-style:normal;
font-display:swap}
html{
scroll-behavior:smooth;
overflow-x:hidden}
body{
font-family:'Psilograph',Arial,sans-serif;
margin:0;
padding:0}
*,*::before,*::after{
box-sizing:border-box}
h1,h2,h3,h4,h5,h6{
font-weight:700}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0}
nav{
position:sticky;
top:0;
z-index:1000;
width:100%;
background:var(--color-1);
padding:0.75rem 1rem;
display:flex;
align-items:center;
gap:0;
left:0;
right:0}
nav img{
max-height:50px;
width:auto;
flex-shrink:0}
.menu-toggle{
width:40px;
height:40px;
border:none;
cursor:pointer;
display:none;
padding:0;
flex-shrink:0;
background:transparent;
position:relative}
.menu-toggle::before,.menu-toggle::after,.menu-toggle span{
content:"";
display:block;
width:28px;
height:3px;
background:white;
border-radius:2px;
position:absolute;
left:50%;
transform:translateX(-50%);
transition:background 0.2s}
.menu-toggle::before{
top:9px}
.menu-toggle span{
top:18px}
.menu-toggle::after{
top:27px}
nav ul.menu-list{
display:flex;
align-items:center;
justify-content:flex-end;
list-style:none;
margin:0;
padding:0}
nav li{
display:flex;
align-items:center;
position:relative}
nav li + li::before{
content:"";
display:inline-block;
width:24px;
height:24px;
margin:0 0.75rem;
background:url('../icon/tresrayas.png') center / contain no-repeat;
flex-shrink:0}
nav a{
color:var(--color-3);
text-decoration:none;
font-family:'Segoe UI','Arial',sans-serif;
font-weight:700;
font-size:1.25rem;
letter-spacing:0.04em;
padding:0.5rem 0}
nav a:hover{
opacity:0.9}
nav .has-submenu{
position:relative}
nav .submenu-toggle::after{
content:"▾";
display:inline-block;
margin-left:0.4rem;
font-size:0.7em;
vertical-align:middle}
nav .submenu{
display:none;
position:absolute;
top:100%;
left:0;
min-width:240px;
background:var(--color-1);
border-radius:0 0 8px 8px;
box-shadow:0 8px 24px rgba(0,0,0,0.2);
list-style:none;
margin:0;
padding:0.5rem 0;
z-index:1001}
nav .has-submenu:hover .submenu{
display:block}
nav .submenu li{
display:block}
nav .submenu li::before{
display:none !important}
nav .submenu li a{
display:block;
padding:0.6rem 1.25rem;
font-size:1rem;
white-space:nowrap}
nav .submenu li a:hover{
background:rgba(255,255,255,0.1)}
@media (max-width:768px){
nav{
flex-wrap:nowrap}
.nav-right{
flex-wrap:nowrap;
margin-left:auto}
.menu-toggle{
display:inline-flex;
align-items:center;
justify-content:center}
nav ul.menu-list{
position:absolute;
top:100%;
left:0;
width:100%;
flex-direction:column;
align-items:stretch;
gap:0;
max-height:0;
overflow:hidden;
transition:max-height 0.3s ease;
z-index:999}
nav ul.menu-list.open{
max-height:800px;
display:flex;
background:var(--color-1);
padding:0.75rem 0;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.3)}
nav li + li::before{
display:none}
nav li{
justify-content:flex-start}
nav a{
display:block;
width:100%;
padding:0.75rem 1rem;
font-size:1.15rem;
touch-action:manipulation}
nav > a:first-child{
display:inline-flex;
width:auto;
padding:0;
flex:0 0 auto}
nav .has-submenu{
display:block;
touch-action:manipulation}
nav .submenu-toggle{
touch-action:manipulation}
nav .submenu-toggle::after{
content:"▾";
display:inline-block;
margin-left:0.4rem;
font-size:0.7em;
vertical-align:middle;
transition:transform 0.3s ease}
nav .has-submenu.open .submenu-toggle::after{
transform:rotate(180deg)}
nav .submenu{
display:none;
position:static;
min-width:0;
background:rgba(255,255,255,0.05);
border-radius:0;
box-shadow:none;
padding:0;
max-height:0;
overflow:hidden;
transition:max-height 0.3s ease}
nav .submenu.open{
display:block;
max-height:600px}
nav .submenu li a{
padding:0.6rem 1rem 0.6rem 2rem;
font-size:1rem}
}
header{
position:relative;
width:100%;
height:100vh;
min-height:360px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden}
header .header-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
image-rendering:-webkit-optimize-contrast;
image-rendering:auto}
header .logo-header{
position:relative;
z-index:2;
width:220px;
max-width:40%;
height:auto;
opacity:0;
animation:fadeIn 2s ease-out forwards}
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(8px) scale(0.98)}
to{
opacity:1;
transform:translateY(0) scale(1)}
}
#quien-somos{
padding:4rem 0;
background-color:transparent;
position:relative;
overflow:hidden}
#titulo-quien-somos h2{
color:var(--color-1);
margin:0;
font-size:clamp(2.5rem,10vw,120px);
transform:scaleX(1.8);
transform-origin:left;
width:100%;
box-sizing:border-box;
letter-spacing:0.02em}
.icon-vertical{
position:absolute;
right:0;
top:50%;
transform:translate(50%,-50%);
height:600px;
width:auto;
mix-blend-mode:multiply;
pointer-events:none}
@media (min-width:1025px){
.quien-somos-grid{
display:grid;
grid-template-columns:60fr 40fr;
grid-template-rows:auto auto;
width:100%}
#titulo-quien-somos{
grid-column:1;
grid-row:1;
z-index:10;
padding:0 7rem 0 0;
display:flex;
align-items:flex-end}
#titulo-quien-somos h2{
text-align:right;
transform-origin:right;
line-height:1;
margin:0;
margin-bottom:-0.3em}
#quien-somos-content{
grid-column:1;
grid-row:2;
background-color:var(--color-3);
padding:3rem 7rem 3rem 5rem;
color:white;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
max-height:350px;
overflow-y:auto;
border-bottom-right-radius:100px}
#quien-somos-content p{
margin:0;
font-family:'Segoe UI','Arial',sans-serif;
font-size:clamp(16px,1.5vw,20px);
font-weight:400;
line-height:1.8;
text-align:justify}
#quien-somos-content::-webkit-scrollbar{
width:6px}
#quien-somos-content::-webkit-scrollbar-track{
background:rgba(255,255,255,0.2);
border-radius:3px}
#quien-somos-content::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.6);
border-radius:3px}
#quien-somos-image{
grid-column:2;
grid-row:1 / 3;
display:flex;
align-items:flex-end;
justify-content:flex-start}
#quien-somos-image img{
width:400px;
height:600px;
object-fit:cover;
border-radius:12px;
box-shadow:0 12px 30px rgba(0,0,0,0.12),0 4px 10px rgba(0,0,0,0.06);
flex-shrink:0}
}
@media (max-width:1024px) and (min-width:769px){
.quien-somos-grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:auto auto;
width:100%;
background-color:var(--color-3);
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,0.15)}
#titulo-quien-somos{
grid-column:1;
grid-row:1;
display:flex;
align-items:center;
justify-content:center;
padding:1.5rem;
z-index:10}
#quien-somos-content{
grid-column:1;
grid-row:2;
color:white;
padding:2rem;
display:flex;
align-items:center;
justify-content:center;
text-align:center}
#quien-somos-content p{
margin:0;
font-family:'Segoe UI','Arial',sans-serif;
font-size:clamp(0.95rem,1.5vw,16px);
line-height:1.7;
font-weight:400;
text-align:justify}
#quien-somos-image{
grid-column:2;
grid-row:1 / 3;
display:flex;
align-items:center;
justify-content:flex-start}
#quien-somos-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:0;
box-shadow:none;
min-height:420px}
.icon-vertical{
height:420px}
}
@media (max-width:768px){
.quien-somos-grid{
display:flex;
flex-direction:column;
width:100%;
background-color:var(--color-3);
border-radius:16px;
overflow:hidden}
#quien-somos-image{
order:1;
width:100%}
#quien-somos-image img{
width:100%;
height:auto;
aspect-ratio:4 / 3;
object-fit:cover;
min-height:280px}
.icon-vertical{
display:none}
#titulo-quien-somos{
order:2;
text-align:center;
padding:1.5rem 2rem 0}
#titulo-quien-somos h2{
font-size:clamp(3rem,10vw,6rem);
font-weight:700;
transform:scaleX(1.2);
transform-origin:center;
margin:0;
text-align:center}
#quien-somos-content{
order:3;
padding:0.75rem 2rem 2rem;
color:white;
text-align:center;
display:flex;
flex-direction:column;
align-items:center}
#quien-somos-content p{
margin:0;
font-family:'Segoe UI','Arial',sans-serif;
font-size:clamp(0.9rem,2.5vw,14px);
line-height:1.6;
text-align:center}
}
@media (max-width:600px){
header{
height:60vh;
min-height:260px}
header .logo-header{
width:160px;
max-width:60%}
#titulo-quien-somos h2{
font-size:clamp(2.5rem,8vw,3.5rem)}
#quien-somos-content{
padding:1.5rem;
font-size:0.9rem}
}
#servicios{
padding:0;
background-color:transparent;
position:relative;
overflow:hidden}
#servicios .icon-vertical{
right:auto;
left:0;
transform:translate(-50%,-50%)}
.servicios-cards-wrapper{
width:100%;
position:relative}
.servicios-cards-wrapper .slide{
position:absolute;
inset:0;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:auto auto;
width:100%;
padding:0;
box-sizing:border-box;
opacity:0;
pointer-events:none;
transition:opacity 0.4s ease}
.servicios-cards-wrapper .slide.active{
opacity:1;
pointer-events:auto;
z-index:12;
position:relative}
.servicios-image{
grid-column:1;
grid-row:1 / 3;
width:auto;
display:flex;
justify-content:flex-end;
align-items:center;
padding:0;
z-index:15}
.servicios-image img{
width:100%;
max-width:440px;
max-height:600px;
object-fit:cover;
border-radius:12px;
box-shadow:0 12px 30px rgba(0,0,0,0.12),0 4px 10px rgba(0,0,0,0.06)}
.servicios-titulo{
grid-column:2;
grid-row:1;
z-index:15;
padding-left:3rem;
display:flex;
align-items:flex-end}
.servicios-titulo h3{
color:var(--color-1);
margin:0;
margin-bottom:-0.3em;
font-size:clamp(2.5rem,10vw,120px);
transform:scaleX(1);
transform-origin:left;
text-align:left;
line-height:1;
width:100%;
box-sizing:border-box;
word-break:break-word;
letter-spacing:0.02em}
.servicios-titulo.titulo-largo h3{
transform:scaleX(1.3)}
.servicios-content{
grid-column:2;
grid-row:2;
background-color:var(--color-3);
padding:3rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:white;
line-height:1.8;
border-bottom-left-radius:100px;
z-index:10;
position:relative}
.servicios-content p{
margin:0;
font-family:'Segoe UI','Arial',sans-serif;
font-size:clamp(1rem,1.5vw,21px);
font-weight:400;
text-align:justify}
.servicios-content .servicios-next{
width:50px;
height:50px;
border:none;
background:url('../icon/flecha_derecha.png') center / contain no-repeat transparent;
cursor:pointer;
transition:transform 0.2s ease,opacity 0.2s ease;
opacity:0.85}
.servicios-content .servicios-next:hover{
transform:scale(1.05);
opacity:1}
.servicios-content .servicios-prev{
width:50px;
height:50px;
border:none;
background:url('../icon/flecha_izquierda.png') center / contain no-repeat transparent;
cursor:pointer;
transition:transform 0.2s ease,opacity 0.2s ease;
opacity:0.85;
margin-right:4rem}
.servicios-content .servicios-prev:hover{
transform:scale(1.05);
opacity:1}
.servicios-nav-buttons{
display:flex;
gap:4rem;
margin-top:auto;
align-items:center;
justify-content:center}
.servicios-content .servicios-leer-mas{
display:inline-block;
margin-top:0.75rem;
color:#fff;
font-family:'Segoe UI',Arial,sans-serif;
font-size:0.95rem;
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
text-decoration-color:rgba(255,255,255,0.5);
transition:text-decoration-color 0.2s ease,opacity 0.2s ease}
.servicios-content .servicios-leer-mas:hover{
text-decoration-color:#fff;
opacity:0.9}
.servicios-cards-wrapper .slide:not(.active) .servicios-image{
transform:translateX(-120%)}
.servicios-cards-wrapper .slide:not(.active) .servicios-content,.servicios-cards-wrapper .slide:not(.active) .servicios-titulo{
transform:translateX(120%)}
.slide.out .servicios-image{
transform:translateX(-120%)}
.slide.out .servicios-content,.slide.out .servicios-titulo{
transform:translateX(120%)}
.slide.in .servicios-image,.slide.in .servicios-content,.slide.in .servicios-titulo{
transform:translateX(0)}
@media (min-width:1025px){
.servicios-cards-wrapper .slide .servicios-image,.servicios-cards-wrapper .slide .servicios-content,.servicios-cards-wrapper .slide .servicios-titulo{
transition:transform 0.8s ease}
}
@media (max-width:1024px){
.servicios-cards-wrapper{
display:flex !important;
flex-direction:column;
align-items:center;
gap:0;
padding-bottom:2rem}
.servicios-cards-wrapper .slide:not(.active){
display:none !important}
.servicios-cards-wrapper .slide{
display:grid !important;
grid-template-columns:1fr 1fr;
grid-template-rows:auto auto;
width:calc(100% - 2rem);
max-width:900px;
pointer-events:auto !important;
z-index:1 !important;
margin:0 auto 1rem;
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.servicios-cards-wrapper .slide.active{
opacity:1;
z-index:12}
.servicios-cards-wrapper .slide .servicios-image{
grid-column:1;
grid-row:1 / 3;
width:auto;
justify-content:flex-end;
align-items:center;
padding:1.5rem 0 1.5rem 1.5rem}
.servicios-cards-wrapper .slide .servicios-image img{
width:100%;
max-width:380px;
max-height:500px;
object-fit:cover;
border-radius:12px;
box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.servicios-cards-wrapper .slide .servicios-titulo{
grid-column:2;
grid-row:1;
z-index:10;
padding:1.5rem 2rem 0;
display:flex;
align-items:flex-end}
.servicios-cards-wrapper .slide .servicios-titulo h3{
margin:0;
color:var(--color-1);
font-size:clamp(2rem,5vw,3.5rem);
transform:scaleX(1.8);
transform-origin:left;
text-align:left;
line-height:1;
width:100%;
letter-spacing:0.02em}
.servicios-cards-wrapper .slide .servicios-titulo.titulo-largo h3{
transform:scaleX(1.3)}
.servicios-cards-wrapper .slide .servicios-content{
grid-column:2;
grid-row:2;
padding:2rem;
background-color:var(--color-3);
border-radius:0}
.servicios-cards-wrapper .slide .servicios-content p{
margin-right:0;
font-size:1rem}
}
@media (max-width:768px){
html{
overscroll-behavior-x:none;
background:#fff}
body{
width:100%;
overflow-x:clip}
.servicios-cards-wrapper{
display:flex !important;
flex-direction:row;
flex-wrap:nowrap;
align-items:stretch;
overflow:auto hidden;
scroll-snap-type:x mandatory;
width:100%;
padding:0 0.5rem;
gap:0.5rem;
-ms-overflow-style:none;
scrollbar-width:none}
.servicios-cards-wrapper::-webkit-scrollbar{
display:none}
.servicios-cards-wrapper .slide:not(.active){
display:flex !important}
.servicios-cards-wrapper .slide{
flex:0 0 85%;
scroll-snap-align:center;
position:relative !important;
display:flex !important;
flex-direction:column;
opacity:1 !important;
pointer-events:auto !important;
z-index:1 !important;
margin:0 !important;
border-radius:16px;
overflow:hidden;
box-shadow:none;
background-color:var(--color-3);
transform:none !important;
transition:none !important}
.servicios-cards-wrapper .slide .servicios-image{
width:100% !important;
flex:0 0 auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:1rem 0 !important;
grid-column:auto !important;
grid-row:auto !important}
.servicios-cards-wrapper .slide .servicios-image img{
width:100%;
height:auto;
aspect-ratio:4/3;
object-fit:cover;
border-radius:0;
box-shadow:none;
display:block;
min-height:200px}
.servicios-cards-wrapper .slide .servicios-titulo{
position:static !important;
width:100%;
text-align:center;
padding:1.5rem 2rem 0;
order:1}
.servicios-cards-wrapper .slide .servicios-titulo h3{
margin:0;
color:var(--color-1);
font-size:clamp(3rem,10vw,6rem);
transform:scaleX(1.8);
transform-origin:center;
line-height:1;
text-align:center;
letter-spacing:0.02em}
.servicios-cards-wrapper .slide .servicios-titulo.titulo-largo h3{
transform:scaleX(1.3)}
.servicios-cards-wrapper .slide .servicios-content{
order:2}
.servicios-cards-wrapper .slide .servicios-content p{
margin:0;
font-size:1rem;
line-height:1.6;
text-align:center}
.servicios-cards-wrapper .slide .servicios-content{
display:flex !important;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:0.75rem;
flex:1;
width:100%;
padding:2rem;
border-radius:0;
text-align:center}
.servicios-cards-wrapper .slide .servicios-content .servicios-next{
margin-top:auto;
position:static;
transform:none;
width:48px;
height:48px}
.servicios-cards-wrapper .slide .servicios-content .servicios-prev{
position:static;
transform:none;
width:48px;
height:48px}
.servicios-nav-buttons{
display:flex;
gap:4rem;
margin-top:auto;
align-items:center;
justify-content:center;
width:100%;
align-self:stretch}
.servicios-cards-wrapper .slide .servicios-content .servicios-leer-mas{
margin-top:0}
.servicios-timeline{
display:flex;
align-items:center;
justify-content:center;
padding:0.75rem 1rem;
gap:6px}
.servicios-timeline .line{
display:none}
.servicios-timeline .dot{
width:8px;
height:8px;
border-width:1.5px;
transition:background 0.3s,transform 0.3s}
.servicios-timeline .dot.active{
transform:scale(1.4)}
.servicios-cards-wrapper .slide:not(.active) .servicios-image,.servicios-cards-wrapper .slide:not(.active) .servicios-content,.servicios-cards-wrapper .slide:not(.active) .servicios-titulo,.slide.out .servicios-image,.slide.out .servicios-content,.slide.out .servicios-titulo,.slide.in .servicios-image,.slide.in .servicios-content,.slide.in .servicios-titulo{
transform:none !important}
}
@media (max-width:480px){
.servicios-cards-wrapper .slide .servicios-image img{
aspect-ratio:16/9;
min-height:160px}
.servicios-cards-wrapper .slide .servicios-content{
padding:1.25rem}
.servicios-cards-wrapper .slide .servicios-titulo h3{
font-size:clamp(2.2rem,8vw,3rem);
line-height:1;
letter-spacing:0.02em}
.servicios-cards-wrapper .slide .servicios-content p{
font-size:0.85rem}
}
.servicios-timeline{
display:flex;
align-items:center;
justify-content:center;
padding:1.5rem 0}
.servicios-timeline .dot{
width:14px;
height:14px;
border-radius:50%;
background:var(--color-5);
border:2px solid var(--color-5);
cursor:pointer;
transition:background 0.3s,transform 0.3s;
flex-shrink:0}
.servicios-timeline .dot.active{
background:var(--color-3);
border-color:var(--color-3);
transform:scale(1.3)}
.servicios-timeline .line{
width:3rem;
height:2px;
background:var(--color-5);
flex-shrink:0}
.separador{
margin:0;
padding:0;
height:10px;
display:block;
width:100%;
background-color:var(--color-3)}
#galeria{
padding:60px 20px;
background-color:var(--color-1)}
#titulo-galeria{
text-align:center;
margin-bottom:1.5rem}
#titulo-galeria h2{
color:var(--color-3);
font-size:clamp(2rem,6vw,90px);
transform:scaleX(1.8);
margin:0;
letter-spacing:0.05em}
#galeria-content{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
max-width:1100px;
margin:0 auto}
.galeria-item{
position:relative;
border-radius:12px;
overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,0.12);
cursor:pointer}
.galeria-item img{
width:100%;
height:300px;
object-fit:cover;
display:block;
transition:transform 0.4s ease;
cursor:pointer}
.galeria-item:hover img{
transform:scale(1.08)}
#lightbox{
display:none;
position:fixed;
z-index:9999;
inset:0;
background:rgba(0,0,0,0.9);
align-items:center;
justify-content:center;
padding:2rem}
#lightbox.active{
display:flex}
#lightbox img{
max-width:90vw;
max-height:85vh;
object-fit:contain;
border-radius:8px;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
animation:lbFadeIn 0.3s ease}
@keyframes lbFadeIn{
from{
opacity:0;
transform:scale(0.92)}
to{
opacity:1;
transform:scale(1)}
}
#lightbox-close{
position:absolute;
top:1.5rem;
right:2rem;
width:48px;
height:48px;
border:none;
background:transparent;
cursor:pointer;
color:#fff;
font-size:40px;
line-height:1;
opacity:0.7;
transition:opacity 0.2s;
display:flex;
align-items:center;
justify-content:center}
#lightbox-close:hover{
opacity:1}
.lightbox-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50px;
height:50px;
border:none;
background:rgba(255,255,255,0.15);
border-radius:50%;
cursor:pointer;
color:#fff;
font-size:28px;
display:flex;
align-items:center;
justify-content:center;
opacity:0.7;
transition:opacity 0.2s,background 0.2s}
.lightbox-btn:hover{
opacity:1;
background:rgba(255,255,255,0.25)}
.lightbox-prev{
left:1.5rem}
.lightbox-next{
right:1.5rem}
#contacto{
padding:80px 20px;
background-color:#f4f4f4}
#titulo-contacto{
text-align:center;
margin-bottom:3rem}
#titulo-contacto h2{
color:var(--color-1);
font-size:clamp(2rem,6vw,90px);
transform:scaleX(1.8);
margin:0;
letter-spacing:0.05em}
#contacto-form{
max-width:680px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:0.75rem;
background:#fff;
padding:2.5rem;
border-radius:16px;
box-shadow:0 8px 30px rgba(0,0,0,0.08)}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem}
.form-group{
display:flex;
flex-direction:column;
gap:0.35rem}
#contacto-form label{
font-family:'Segoe UI','Arial',sans-serif;
font-weight:600;
font-size:0.9rem;
color:var(--color-1)}
#contacto-form .checkbox-label{
display:flex;
align-items:center;
gap:0.5rem;
font-weight:400;
font-size:0.85rem;
color:#555;
margin:0.25rem 0}
#contacto-form .error-msg{
color:#d32f2f;
font-size:0.78rem;
font-family:'Segoe UI','Arial',sans-serif;
min-height:1rem}
#contacto-form input.error,#contacto-form textarea.error{
border-color:#d32f2f}
#contacto-form input,#contacto-form textarea{
width:100%;
padding:0.7rem 1rem;
border:1.5px solid #e0e0e0;
border-radius:10px;
font-family:'Segoe UI','Arial',sans-serif;
font-size:0.95rem;
transition:border-color 0.3s ease,box-shadow 0.3s ease;
box-sizing:border-box;
background:#fafafa}
#contacto-form input:focus,#contacto-form textarea:focus{
outline:none;
border-color:var(--color-3);
box-shadow:0 0 0 3px rgba(243,161,2,0.15);
background:#fff}
#contacto-form input::placeholder,#contacto-form textarea::placeholder{
color:#bbb;
font-weight:400}
#contacto-form textarea{
min-height:120px;
resize:vertical}
#contacto-form button[type="submit"]{
background:linear-gradient(135deg,var(--color-3),#e08e00);
color:white;
border:none;
padding:1rem 2rem;
font-size:1.05rem;
font-weight:700;
border-radius:10px;
cursor:pointer;
transition:transform 0.2s ease,box-shadow 0.2s ease;
font-family:'Segoe UI','Arial',sans-serif;
letter-spacing:0.03em;
margin-top:0.5rem}
#contacto-form button[type="submit"]:hover{
transform:translateY(-1px);
box-shadow:0 6px 20px rgba(243,161,2,0.35)}
#contacto-form button[type="submit"]:active{
transform:translateY(0)}
#contacto-form input[type="checkbox"]{
width:auto;
margin-right:0}
#contacto-form a{
color:var(--color-3);
font-weight:600}
.recaptcha-group{
margin:1rem 0 0.5rem;
display:flex;
flex-direction:column;
align-items:center}
#recaptcha-error{
text-align:center;
margin-top:0.4rem}
footer{
background-color:var(--color-1);
padding:4rem 2rem 0;
display:flex;
flex-direction:column;
align-items:center}
.footer-logo{
margin-bottom:2.5rem;
transition:opacity 0.2s}
.footer-logo img{
max-height:65px;
width:auto;
opacity:0.9}
.footer-columns{
display:grid;
grid-template-columns:1fr 1fr 1fr;
width:100%;
max-width:1100px;
gap:2rem}
.footer-col{
text-align:center}
.footer-col h4{
color:var(--color-3);
font-family:'Psilograph',Arial,sans-serif;
font-size:2.4rem;
font-weight:700;
margin:0 0 1.2rem;
text-transform:uppercase;
letter-spacing:0.06em;
position:relative;
display:inline-block}
.footer-col h4::after{
content:'';
display:block;
width:36px;
height:2px;
background:var(--color-3);
margin:0.5rem auto 0;
opacity:0.4}
.footer-col ul{
list-style:none;
margin:0;
padding:0}
.footer-col li{
margin-bottom:0.6rem;
font-family:'Segoe UI',Arial,sans-serif;
font-size:0.95rem;
color:#ccc;
line-height:1.6}
.footer-col a{
color:#ccc;
text-decoration:none;
transition:color 0.2s}
.footer-col a:hover{
color:var(--color-3)}
.footer-label{
color:var(--color-5);
font-weight:600;
margin-right:0.4em}
.footer-whatsapp{
display:inline-flex;
align-items:center;
gap:0.4rem;
color:#25D366}
.footer-whatsapp img{
width:18px;
height:18px}
.footer-whatsapp:hover{
color:#1ebe5a}
.footer-bottom{
margin-top:3rem;
padding:1.4rem 2rem;
border-top:1px solid rgba(255,255,255,0.08);
width:100%;
max-width:1100px;
box-sizing:border-box;
text-align:center}
.footer-bottom p{
margin:0;
font-family:'Segoe UI',Arial,sans-serif;
font-size:0.85rem;
color:rgba(255,255,255,0.4)}
@media (max-width:768px){
footer{
padding:2.5rem 1.5rem 0}
.footer-logo{
margin-bottom:2rem}
.footer-logo img{
max-height:45px}
.footer-columns{
grid-template-columns:1fr;
gap:0;
padding:0}
.footer-col{
padding:1.5rem 0;
border-bottom:1px solid rgba(255,255,255,0.06)}
.footer-col:last-child{
border-bottom:none}
.footer-col h4{
font-size:1.8rem;
margin-bottom:1rem}
.footer-col h4::after{
margin-top:0.4rem}
.footer-col li{
font-size:0.9rem;
margin-bottom:0.5rem}
.footer-bottom{
margin-top:1.5rem;
padding:1.2rem 0}
#titulo-quien-somos{
position:static;
padding:1rem 0}
#galeria-content{
grid-template-columns:repeat(2,1fr);
gap:1rem}
.galeria-item img{
height:220px}
}
@media (max-width:600px){
.form-row{
grid-template-columns:1fr}
#contacto-form{
padding:1.5rem}
#galeria-content{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
gap:1rem;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-ms-overflow-style:none;
scrollbar-width:none;
padding:1.5rem 2rem;
margin:0;
max-width:none;
width:auto;
cursor:grab;
user-select:none;
-webkit-overflow-scrolling:touch}
#galeria-content::-webkit-scrollbar{
display:none}
.galeria-item{
flex:0 0 78vw;
scroll-snap-align:center;
border-radius:24px;
overflow:hidden;
box-shadow:0 15px 45px rgba(0,0,0,0.18);
position:relative;
transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),box-shadow 0.4s ease;
cursor:pointer}
.galeria-item img{
width:100%;
height:68vh;
min-height:380px;
object-fit:cover;
display:block;
transition:transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94)}
.galeria-item:active img{
transform:scale(1.05)}
#galeria-content:active{
cursor:grabbing}
#galeria{
padding:40px 0;
overflow:hidden}
#contacto{
padding:40px 16px}
}
#cookie-banner{
display:none;
position:fixed;
bottom:0;
left:0;
right:0;
z-index:9999;
background:#fff;
box-shadow:0 -8px 32px rgba(0,0,0,0.15);
padding:0.5rem 1.5rem;
font-family:'Segoe UI',Arial,sans-serif}
#cookie-banner-inner{
max-width:1200px;
margin:0 auto;
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:space-between;
gap:0.75rem}
#cookie-banner-text{
flex:1 1 0;
font-size:0.75rem;
line-height:1.3;
color:#444}
#cookie-banner-text p{
margin:0}
#cookie-banner-text a{
color:var(--color-3);
text-decoration:underline;
font-weight:600}
#cookie-banner-buttons{
display:flex;
gap:0.75rem;
flex-shrink:0}
.cookie-btn{
padding:0.3rem 1rem;
border:none;
border-radius:6px;
font-family:'Segoe UI',Arial,sans-serif;
font-size:0.8rem;
font-weight:700;
cursor:pointer;
transition:transform 0.2s ease,box-shadow 0.2s ease}
.cookie-btn:hover{
transform:translateY(-1px)}
.cookie-btn-accept{
background:var(--color-3);
color:#fff}
.cookie-btn-accept:hover{
box-shadow:0 4px 12px rgba(243,161,2,0.35)}
.cookie-btn-reject{
background:transparent;
color:#888;
border:1px solid #ccc}
.cookie-btn-reject:hover{
background:#f5f5f5;
box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.privacy-hero{
position:relative;
width:100%;
height:45vh;
min-height:320px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:var(--color-1)}
.privacy-hero::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,var(--color-1) 0%,var(--color-2) 100%)}
.privacy-hero::after{
content:'';
position:absolute;
bottom:-2px;
left:0;
width:100%;
height:80px;
background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80"><path fill="%23fff" d="M0,40 C360,80 720,0 1080,40 C1260,60 1380,50 1440,40 L1440,80 L0,80 Z"/></svg>') bottom / cover no-repeat;
pointer-events:none;
z-index:2}
.privacy-hero-accent{
position:absolute;
top:0;
right:0;
width:40%;
height:100%;
background:linear-gradient(135deg,transparent 0%,rgba(243,161,2,0.08) 100%);
clip-path:polygon(30% 0,100% 0,100% 100%,0% 100%);
pointer-events:none}
.privacy-hero-content{
position:relative;
z-index:3;
text-align:center;
padding:0 2rem}
.privacy-hero-content h1{
color:var(--color-3);
font-size:clamp(3rem,10vw,120px);
font-weight:700;
transform:scaleX(1.3);
transform-origin:center;
margin:0 0 0.75rem;
line-height:1.1;
letter-spacing:0.05em}
.privacy-hero-content p{
color:rgba(255,255,255,0.75);
font-family:'Segoe UI',Arial,sans-serif;
font-size:clamp(1rem,1.5vw,1.2rem);
margin:0;
max-width:600px;
margin:0 auto;
line-height:1.6}
.privacy-main{
max-width:860px;
margin:0 auto;
padding:4rem 2rem}
.privacy-section{
background:#fff;
border-radius:16px;
padding:2.5rem 3rem;
margin-bottom:1.5rem;
box-shadow:0 4px 20px rgba(0,0,0,0.06);
border:1px solid rgba(0,0,0,0.04);
border-left:4px solid var(--color-3);
transition:box-shadow 0.3s ease,transform 0.3s ease}
.privacy-section:hover{
box-shadow:0 8px 32px rgba(0,0,0,0.1);
transform:translateY(-2px)}
.privacy-section h2{
color:var(--color-1);
font-family:'Psilograph',Arial,sans-serif;
font-size:clamp(2rem,6vw,3.5rem);
font-weight:700;
margin:0 0 1.25rem;
line-height:1.15;
position:relative;
padding-bottom:0.8rem;
letter-spacing:0.04em}
.privacy-section h2::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:50px;
height:3px;
background:var(--color-3);
border-radius:2px}
.privacy-section p{
font-family:'Segoe UI',Arial,sans-serif;
font-size:clamp(0.95rem,1.2vw,1.05rem);
line-height:1.85;
color:#444;
margin:0;
text-align:justify}
.privacy-section p + p{
margin-top:1rem}
.privacy-section a{
color:var(--color-3);
font-weight:600;
text-decoration:underline;
text-decoration-color:rgba(243,161,2,0.3);
text-underline-offset:3px;
transition:text-decoration-color 0.2s ease,color 0.2s ease}
.privacy-section a:hover{
text-decoration-color:var(--color-3)}
.privacy-section ul{
font-family:'Segoe UI',Arial,sans-serif;
font-size:clamp(0.95rem,1.2vw,1.05rem);
line-height:1.85;
color:#444;
margin:0.75rem 0 0;
padding-left:1.5rem}
.privacy-section ul li{
margin-bottom:0.35rem}
.privacy-section ul li:last-child{
margin-bottom:0}
.privacy-section table{
width:100%;
border-collapse:separate;
border-spacing:0;
margin-top:1.5rem;
font-family:'Segoe UI',Arial,sans-serif;
font-size:clamp(0.85rem,1.1vw,0.95rem);
border-radius:10px;
overflow:hidden;
border:1px solid #e8e8e8}
.privacy-section th,.privacy-section td{
padding:0.85rem 1.1rem;
text-align:left;
border:none}
.privacy-section th{
background:var(--color-1);
color:#fff;
font-weight:700;
letter-spacing:0.02em}
.privacy-section th:not(:last-child){
border-right:1px solid rgba(255,255,255,0.15)}
.privacy-section td{
color:#444;
border-top:1px solid #f0f0f0}
.privacy-section tbody tr:nth-child(even) td{
background:#fafafa}
.privacy-section strong{
color:var(--color-1)}
.privacy-back{
display:inline-flex;
align-items:center;
gap:0.5rem;
margin-top:2.5rem;
padding:0.9rem 2.2rem;
background:linear-gradient(135deg,var(--color-3),#e08e00);
color:#fff;
text-decoration:none;
border-radius:10px;
font-family:'Segoe UI',Arial,sans-serif;
font-weight:700;
font-size:0.95rem;
transition:transform 0.2s ease,box-shadow 0.2s ease;
letter-spacing:0.02em}
.privacy-back:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(243,161,2,0.35)}
.privacy-back:active{
transform:translateY(0)}
@media (max-width:1024px){
.privacy-hero{
height:40vh;
min-height:300px}
.privacy-section{
padding:2rem 2.5rem}
}
@media (max-width:768px){
.privacy-hero{
height:35vh;
min-height:260px}
.privacy-hero-content h1{
transform:scaleX(1.2)}
.privacy-main{
padding:2.5rem 1.25rem}
.privacy-section{
padding:1.75rem 1.5rem;
margin-bottom:1rem}
.privacy-section h2{
font-size:clamp(1.8rem,7vw,3rem);
transform:scaleX(1.2);
transform-origin:left}
.privacy-section h2::after{
width:40px}
.privacy-section table{
margin-top:1rem}
.privacy-section table,.privacy-section thead,.privacy-section tbody,.privacy-section th,.privacy-section td,.privacy-section tr{
display:block}
.privacy-section table tr{
margin-bottom:0.5rem;
border:1px solid #e0e0e0;
border-radius:8px;
overflow:hidden}
.privacy-section th{
display:none}
.privacy-section td{
padding:0.6rem 0.85rem;
border:none;
position:relative}
.privacy-section td::before{
content:attr(data-label);
font-weight:700;
color:var(--color-1);
display:block;
margin-bottom:0.2rem;
font-size:0.75rem;
text-transform:uppercase;
letter-spacing:0.04em}
.privacy-section tbody tr:nth-child(even) td{
background:transparent}
#cookie-banner{
padding:0.35rem 0.6rem}
#cookie-banner-inner{
flex-wrap:wrap;
gap:0.3rem 0.5rem}
#cookie-banner-text{
flex:1 1 100%;
font-size:0.65rem;
line-height:1.2}
#cookie-banner-buttons{
flex:1 1 100%;
display:flex;
gap:0.4rem}
.cookie-btn{
flex:1;
padding:0.2rem 0.5rem;
font-size:0.7rem}
}
@media (max-width:480px){
.privacy-hero{
min-height:220px;
height:30vh}
.privacy-hero-content h1{
transform:scaleX(1.15);
font-size:clamp(2rem,9vw,3.5rem)}
.privacy-hero-content p{
font-size:0.9rem}
.privacy-main{
padding:2rem 1rem}
.privacy-section{
padding:1.5rem 1.15rem;
border-radius:12px}
.privacy-section h2{
font-size:clamp(1.5rem,6vw,2.5rem);
transform:scaleX(1.15);
transform-origin:left}
}
.lang-selector{appearance:none;-webkit-appearance:none;background:transparent;border:1.5px solid var(--color-3);color:var(--color-3);padding:4px 24px 4px 8px;border-radius:4px;font-family:'Segoe UI',Arial,sans-serif;font-size:13px;font-weight:700;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f3a102'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;flex-shrink:0}
.lang-selector:hover{background-color:rgba(243,161,2,0.15)}
.lang-selector option{background:var(--color-1);color:#fff;padding:6px 12px}
.nav-right{display:flex;align-items:center;margin-left:auto;gap:1rem}
@media (max-width:768px){.nav-right{gap:0.5rem}.lang-selector{font-size:15px;padding:6px 30px 6px 12px}}
.whatsapp-float{position:fixed;bottom:2rem;right:2rem;z-index:999;transition:transform 0.3s;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25))}
.whatsapp-float:hover{transform:scale(1.15);filter:drop-shadow(0 2px 8px rgba(0,0,0,0.35))}
.whatsapp-float img{width:60px;height:60px}
@media (max-width:768px){.whatsapp-float{bottom:1.2rem;right:1.2rem}.whatsapp-float img{width:52px;height:52px}}

.lp-section{padding:4rem 2rem;max-width:900px;margin:0 auto}
.lp-section h2{color:var(--color-1);font-size:clamp(2.8rem,6.5vw,4rem);margin:0 0 1.5rem;letter-spacing:0.04em}
.lp-section h3{color:var(--color-1);font-size:2.4rem;margin:2.5rem 0 1rem;letter-spacing:0.03em}
.lp-section p{font-family:'Segoe UI',Arial,sans-serif;font-size:1.15rem;line-height:1.85;color:#444;text-align:justify;margin:0 0 1.5rem}
.lp-section ul{font-family:'Segoe UI',Arial,sans-serif;font-size:1.1rem;line-height:1.8;color:#444;padding-left:1.5rem;margin-bottom:1.5rem}
.lp-section li{margin-bottom:0.4rem}
.lp-process{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:2rem 0}
.lp-process-item{text-align:center;padding:1.5rem;background:#f8f9fa;border-radius:12px}
.lp-process-num{display:inline-block;width:40px;height:40px;line-height:40px;background:var(--color-3);color:#fff;border-radius:50%;font-weight:700;font-size:1.2rem;margin-bottom:0.75rem;letter-spacing:0.02em}
.lp-process-item h4{color:var(--color-1);margin:0 0 0.5rem;font-size:1.8rem;letter-spacing:0.03em}
.lp-process-item p{font-family:'Segoe UI',Arial,sans-serif;font-size:1rem;margin:0;text-align:center}
.lp-testimonial{background:#f8f9fa;border-radius:12px;padding:1.5rem 2rem;margin-bottom:1rem;border-left:4px solid var(--color-3)}
.lp-testimonial p{font-family:'Segoe UI',Arial,sans-serif;font-style:italic;color:#555;margin:0 0 0.5rem;font-size:1.05rem}
.lp-testimonial strong{color:var(--color-1);font-size:1rem;font-family:'Segoe UI',Arial,sans-serif;letter-spacing:0.02em}
.lp-faq-item{border-bottom:1px solid #eee;padding:1.25rem 0}
.lp-faq-item h4{color:var(--color-1);margin:0 0 0.75rem;font-size:1.8rem;cursor:pointer;letter-spacing:0.03em}
.lp-faq-item p{margin:0;font-family:'Segoe UI',Arial,sans-serif;font-size:1.05rem;line-height:1.7;color:#555}
.lp-cta{background:var(--color-3);border-radius:16px;padding:2.5rem;margin-top:2rem;text-align:center;width:max-content;min-width:300px;width:100%;display:flex;flex-direction:column;align-items:center}
.lp-cta h3{color:#fff;margin:0 0 0.5rem;font-size:2.6rem;letter-spacing:0.04em}
.lp-cta p{color:#fff;margin:0 0 1.5rem;font-family:'Segoe UI',Arial,sans-serif;font-size:1.15rem}
.lp-cta a.cta-btn{display:inline-block;background:#fff;color:var(--color-1);padding:1rem 2.5rem;border-radius:10px;text-decoration:none;font-weight:700;font-family:'Segoe UI',Arial,sans-serif;font-size:1.05rem}
.lp-cta a.cta-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.lp-cta-contact{color:rgba(255,255,255,0.85);margin:1rem 0 0;font-family:'Segoe UI',Arial,sans-serif;font-size:1rem;text-align:center;display:inline-block;width:auto}
.lp-cta-contact a{color:#fff;text-decoration:underline;background:none;padding:0}