:root{

--blue:#2563EB;

--red:#cc0000;

--dark:#0F172A;

--light:#F8FAFC;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#F8FAFC;
color:#0F172A;
}

a{
text-decoration:none;
color:#464feb;
}

tr th,
tr td{
border:1px solid #e6e6e6;
}

tr th{
background-color:#f5f5f5;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

section{
padding:100px 0;
}

/* NAVIGATION */

.site-header{
position:sticky;
top:0;
background:rgba(255,255,255,.94);
border-bottom:1px solid rgba(226,232,240,.8);
box-shadow:0 6px 24px rgba(15,23,42,.06);
backdrop-filter:blur(14px);
z-index:1000;
}

.site-nav{
display:flex;
align-items:center;
justify-content:space-between;
min-height:82px;
padding:12px 0;
}

.brand{
display:inline-flex;
align-items:center;
gap:11px;
color:#0F172A;
text-decoration:none;
}

.brand-mark{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:14px;
background:linear-gradient(140deg, #2563EB, #1D4ED8);
box-shadow:0 7px 16px rgba(37,99,235,.24);
color:white;
font-size:16px;
font-weight:800;
letter-spacing:-.06em;
}

.brand-copy{
display:flex;
flex-direction:column;
gap:1px;
}

.brand-name{
font-size:18px;
font-weight:600;
letter-spacing:-.04em;
line-height:1.1;
}

.brand-name strong{
color:#CC0000;
}

.brand-caption{
color:#64748B;
font-size:10px;
font-weight:700;
letter-spacing:.19em;
line-height:1;
text-transform:uppercase;
}

.primary-nav ul{
display:flex;
align-items:center;
gap:34px;
list-style:none;
}

.primary-nav a{
position:relative;
padding:10px 0;
color:#475569;
font-size:14px;
font-weight:650;
text-decoration:none;
transition:color .2s ease;
}

.primary-nav a::after{
position:absolute;
right:0;
bottom:3px;
left:0;
height:2px;
background:#2563EB;
content:"";
transform:scaleX(0);
transform-origin:left;
transition:transform .2s ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible{
color:#0F172A;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after{
transform:scaleX(1);
}

.header-cta{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 19px;
border-radius:10px;
font-size:14px;
font-weight:700;
box-shadow:0 8px 18px rgba(204,0,0,.16);
transition:transform .2s ease, box-shadow .2s ease;
}

.header-cta:hover{
transform:translateY(-2px);
box-shadow:0 11px 22px rgba(204,0,0,.24);
}

.menu-toggle{
display:none;
width:44px;
height:44px;
padding:11px;
border:1px solid #E2E8F0;
border-radius:12px;
background:white;
cursor:pointer;
}

.menu-toggle span{
display:block;
height:2px;
margin:4px 0;
border-radius:2px;
background:#0F172A;
transition:transform .2s ease, opacity .2s ease;
}

.menu-toggle[aria-expanded="true"] span:first-child{
transform:translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2){
opacity:0;
}

.menu-toggle[aria-expanded="true"] span:last-child{
transform:translateY(-6px) rotate(-45deg);
}

/* BUTTONS */

.btn-red{

background:#cc0000;
color:white;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
display:inline-block;
border:none;
cursor:pointer;
}

.btn-blue{

background:#2563EB;
color:white;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
display:inline-block;
}

/* HERO */

.hero{
position:relative;
isolation:isolate;
overflow:hidden;
min-height:100vh;
min-height:100svh;
display:flex;
align-items:center;
padding:80px 0;
color:white;
background:
radial-gradient(ellipse at 80% 20%, rgba(37,99,235,.38), transparent 38%),
radial-gradient(ellipse at 12% 90%, rgba(204,0,0,.2), transparent 36%),
linear-gradient(135deg, #071126 0%, #0F172A 55%, #111d38 100%);
}

.hero::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
opacity:.16;
background-image:radial-gradient(rgba(255,255,255,.7) .7px, transparent .7px);
background-size:26px 26px;
mask-image:linear-gradient(to right, transparent, black 60%);
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.hero-content{
animation:hero-content-enter .8s ease-out both;
}

.hero-eyebrow{
display:inline-block;
margin-bottom:20px;
color:#93C5FD;
font-size:13px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
}

.hero-image{
width:min(100%, 420px);
aspect-ratio:1;
display:block;
margin:auto;
object-fit:cover;
border:8px solid white;
border-radius:50%;
box-shadow:0 10px 0 rgba(15,23,42,.12), 0 22px 35px rgba(15,23,42,.25);
transform:perspective(900px) rotateY(-8deg) rotateX(4deg);
transition:transform .3s ease, box-shadow .3s ease;
}

.hero-image:hover{
transform:perspective(900px) rotateY(0) rotateX(0) translateY(-4px);
box-shadow:0 12px 0 rgba(15,23,42,.12), 0 28px 40px rgba(15,23,42,.28);
}

.hero h1{
font-size:clamp(42px, 5vw, 68px);
line-height:1.1;
margin-bottom:20px;
}

.hero p{
font-size:20px;
color:#CBD5E1;
margin-bottom:30px;
line-height:1.6;
}

.hero-buttons{
display:flex;
gap:15px;
}

.hero-stats{
display:flex;
flex-wrap:wrap;
gap:36px;
margin-top:48px;
}

.hero-stat{
display:flex;
flex-direction:column;
gap:7px;
animation:hero-stat-enter .65s ease-out both;
}

.hero-stat:nth-child(2){
animation-delay:.18s;
}

.hero-stat strong{
color:white;
font-size:clamp(28px, 3vw, 38px);
line-height:1;
}

.hero-stat span{
color:#CBD5E1;
font-size:14px;
}

@keyframes hero-content-enter{
from{opacity:0; transform:translateY(18px);}
to{opacity:1; transform:translateY(0);}
}

@keyframes hero-stat-enter{
from{opacity:0; transform:translateY(14px) scale(.96);}
to{opacity:1; transform:translateY(0) scale(1);}
}

/* ABOUT */

#about{
position:relative;
overflow:hidden;
background:linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
}

.about-layout{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:72px;
align-items:center;
}

.about-intro{
max-width:480px;
}

.about-eyebrow{
display:inline-block;
margin-bottom:16px;
color:#2563EB;
font-size:13px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
}

#about h2{
margin-bottom:18px;
font-size:clamp(34px, 4vw, 48px);
line-height:1.12;
letter-spacing:-.03em;
}

#about p{
color:#64748B;
line-height:1.75;
}

.about-link{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:26px;
color:#0F172A;
font-weight:700;
text-decoration:none;
}

.about-link span{
color:#CC0000;
font-size:22px;
transition:transform .2s ease;
}

.about-link:hover span{
transform:translateX(4px);
}

.about-cards{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:16px;
}

.about-card{
min-height:190px;
padding:24px;
border:1px solid rgba(148,163,184,.2);
border-radius:18px;
background:rgba(255,255,255,.85);
box-shadow:0 12px 32px rgba(15,23,42,.05);
transition:transform .25s ease, box-shadow .25s ease;
}

.about-card:hover{
transform:translateY(-5px);
box-shadow:0 18px 38px rgba(15,23,42,.1);
}

.about-card:last-child{
grid-column:1 / -1;
min-height:auto;
}

.about-card-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
margin-bottom:22px;
border-radius:12px;
background:#DBEAFE;
color:#2563EB;
font-size:12px;
font-weight:800;
}

.about-card:nth-child(2) .about-card-icon{
background:#FEE2E2;
color:#CC0000;
}

.about-card h3{
margin-bottom:8px;
font-size:18px;
}

.about-card p{
font-size:14px;
}

@media(max-width:900px){
.about-layout{
grid-template-columns:1fr;
gap:40px;
}

.about-intro{
max-width:620px;
}
}

@media(max-width:600px){
.about-cards{
grid-template-columns:1fr;
}

.about-card,
.about-card:last-child{
grid-column:auto;
min-height:auto;
}
}

/* PRICING */

.pricing-section{
background:#fff;
}

.pricing-intro{
max-width:700px;
margin:0 auto 42px;
text-align:center;
}

.pricing-eyebrow{
display:inline-block;
margin-bottom:14px;
color:#2563EB;
font-size:13px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
}

.pricing-intro h2{
margin-bottom:14px;
font-size:clamp(34px, 4vw, 48px);
line-height:1.12;
letter-spacing:-.03em;
}

.pricing-intro p{
color:#64748B;
line-height:1.7;
}

.pricing-card{
display:grid;
grid-template-columns:1fr .85fr;
max-width:1000px;
margin:0 auto;
overflow:hidden;
border:1px solid #DBEAFE;
border-radius:24px;
background:white;
box-shadow:0 24px 64px rgba(15,23,42,.1);
}

.pricing-card-main{
padding:clamp(28px, 5vw, 52px);
}

.pricing-label{
display:inline-block;
margin-bottom:18px;
padding:7px 12px;
border-radius:999px;
background:#DBEAFE;
color:#1D4ED8;
font-size:12px;
font-weight:750;
letter-spacing:.04em;
text-transform:uppercase;
}

.pricing-card-main h3{
max-width:450px;
font-size:clamp(24px, 3vw, 32px);
line-height:1.2;
letter-spacing:-.025em;
}

.pricing-features{
display:grid;
gap:14px;
margin:28px 0 32px;
list-style:none;
}

.pricing-features li{
position:relative;
padding-left:29px;
color:#475569;
line-height:1.5;
}

.pricing-features li::before{
position:absolute;
left:0;
top:1px;
display:grid;
place-items:center;
width:19px;
height:19px;
border-radius:50%;
background:#DCFCE7;
color:#15803D;
content:"✓";
font-size:12px;
font-weight:800;
}

.pricing-cta{
display:inline-flex;
align-items:center;
gap:12px;
}

.pricing-card-costs{
display:flex;
flex-direction:column;
justify-content:center;
gap:20px;
padding:clamp(28px, 5vw, 48px);
color:white;
background:
radial-gradient(ellipse at 90% 0%, rgba(37,99,235,.4), transparent 48%),
linear-gradient(145deg, #0F172A, #111d38);
}

.price-item{
display:flex;
flex-direction:column;
gap:7px;
}

.price-caption{
color:#CBD5E1;
font-size:13px;
font-weight:600;
}

.price-item strong{
font-size:clamp(34px, 4vw, 44px);
line-height:1.1;
}

.price-item strong span{
margin-left:5px;
color:#CBD5E1;
font-size:15px;
font-weight:500;
}

.price-detail{
color:#94A3B8;
font-size:13px;
}

.price-divider{
height:1px;
background:rgba(203,213,225,.2);
}

.own-hosting-note{
display:flex;
flex-direction:column;
gap:5px;
padding:15px;
border:1px solid rgba(147,197,253,.24);
border-radius:12px;
background:rgba(37,99,235,.13);
}

.own-hosting-note strong{
color:#BFDBFE;
font-size:13px;
}

.own-hosting-note span{
color:#E2E8F0;
font-size:13px;
line-height:1.5;
}

.pricing-notes{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:16px;
max-width:1000px;
margin:20px auto 0;
}

.pricing-note{
display:flex;
align-items:flex-start;
gap:12px;
padding:17px;
border:1px solid #E2E8F0;
border-radius:14px;
background:#F8FAFC;
}

.pricing-note-icon{
flex:0 0 24px;
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:50%;
background:#DBEAFE;
color:#2563EB;
font-size:14px;
font-weight:800;
}

.pricing-note p{
color:#64748B;
font-size:13px;
line-height:1.65;
}

.pricing-note strong{
color:#0F172A;
}

@media(max-width:700px){
.pricing-card{
grid-template-columns:1fr;
}

.pricing-notes{
grid-template-columns:1fr;
}
}

/* CONTACT */

#contact{
background:linear-gradient(180deg, #fff 0%, #F8FAFC 100%);
}

.contact-intro{
max-width:680px;
}

#contact h2{
margin-bottom:14px;
font-size:clamp(34px, 4vw, 48px);
letter-spacing:-.03em;
}

#contact .contact-intro p{
color:#64748B;
line-height:1.7;
}

.project-form{
max-width:900px;
margin-top:36px;
padding:clamp(22px, 4vw, 40px);
display:flex;
flex-direction:column;
gap:24px;
border:1px solid #E2E8F0;
border-radius:22px;
background:white;
box-shadow:0 20px 60px rgba(15,23,42,.07);
}

.form-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:22px 18px;
}

.form-field{
min-width:0;
display:flex;
flex-direction:column;
gap:9px;
}

.form-field-full{
grid-column:1 / -1;
}

.form-field label,
.form-field legend{
color:#0F172A;
font-size:14px;
font-weight:650;
}

.form-field label span,
.form-field legend span,
.form-note span{
color:#CC0000;
}

.form-field label .optional,
.form-field legend .optional{
color:#64748B;
font-size:12px;
font-weight:400;
}

.form-field input,
.form-field select,
.form-field textarea{
width:100%;
min-height:50px;
padding:13px 15px;
border:1px solid #CBD5E1;
border-radius:10px;
background:#fff;
color:#0F172A;
font:inherit;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
color:#94A3B8;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
outline:3px solid rgba(37,99,235,.16);
border-color:#2563EB;
}

.form-field textarea{
min-height:145px;
resize:vertical;
}

.form-field fieldset{
padding:0;
border:0;
}

.checkbox-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:10px;
}

.form-field .checkbox-option{
display:flex;
align-items:center;
gap:9px;
min-height:44px;
padding:10px 12px;
border:1px solid #E2E8F0;
border-radius:9px;
background:#F8FAFC;
font-size:13px;
font-weight:500;
cursor:pointer;
}

.form-field .checkbox-option input{
width:16px;
min-height:16px;
height:16px;
margin:0;
accent-color:#2563EB;
}

.form-note{
color:#64748B;
font-size:13px;
line-height:1.5;
}

.recaptcha-notice{
max-width:700px;
}

.recaptcha-notice a{
color:#464feb;
text-decoration:underline;
text-underline-offset:2px;
}

.form-error{
padding:12px 14px;
border:1px solid #FECACA;
border-radius:10px;
background:#FEF2F2;
color:#991B1B;
font-size:14px;
}

.form-submit{
align-self:flex-start;
}

.form-submit:disabled{
opacity:.55;
cursor:not-allowed;
}

.form-trap{
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden;
}

input,
textarea{
padding:15px;
border:1px solid #ddd;
border-radius:10px;
}

textarea{
height:150px;
resize:none;
}

@media(max-width:600px){
.form-grid,
.checkbox-grid{
grid-template-columns:1fr;
}

.form-field-full{
grid-column:auto;
}

.form-submit{
width:100%;
}
}

/* FOOTER */

.site-footer{
padding:64px 0 22px;
color:#CBD5E1;
background:
radial-gradient(ellipse at 85% 0%, rgba(37,99,235,.2), transparent 38%),
linear-gradient(135deg, #071126, #0F172A 65%, #111d38);
}

.footer-main{
display:grid;
grid-template-columns:1.2fr .65fr 1fr;
gap:60px;
padding-bottom:50px;
}

.footer-logo{
color:white;
}

.footer-brand p,
.footer-cta p{
max-width:310px;
margin-top:18px;
color:#94A3B8;
font-size:14px;
line-height:1.7;
}

.footer-nav,
.footer-cta{
display:flex;
flex-direction:column;
align-items:flex-start;
}

.footer-nav h3,
.footer-cta h3{
margin:4px 0 16px;
color:white;
font-size:15px;
}

.footer-nav a,
.footer-cta a,
.footer-bottom a{
color:#CBD5E1;
font-size:14px;
text-decoration:none;
transition:color .2s ease;
}

.footer-nav a{
margin:5px 0;
}

.footer-nav a:hover,
.footer-cta a:hover,
.footer-bottom a:hover{
color:white;
}

.footer-cta a{
display:inline-flex;
gap:10px;
margin-top:16px;
color:#93C5FD;
font-weight:700;
}

.footer-cta a span{
color:#FCA5A5;
}

.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-top:20px;
border-top:1px solid rgba(148,163,184,.2);
}

.footer-bottom p{
color:#94A3B8;
font-size:12px;
}

.footer-bottom a{
font-size:12px;
}

/* WHATSAPP */

.whatsapp{

position:fixed;

right:20px;

bottom:20px;

background:#25d366;

color:white;

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:30px;

text-decoration:none;
}

/* MOBILE */

@media(max-width:768px){

.hero{
min-height:auto;
padding:72px 0;
}

.hero-grid{
grid-template-columns:1fr;
gap:48px;
}

.hero h1{
font-size:clamp(38px, 10vw, 48px);
}

.hero-buttons{
flex-direction:column;
}

.hero-stats{
gap:24px;
margin-top:36px;
}

.hero-image{
width:min(82%, 360px);
}
}

@media(prefers-reduced-motion:reduce){
.hero-content,
.hero-stat{
animation:none;
}

.primary-nav a,
.header-cta,
.menu-toggle span,
.footer-nav a,
.footer-cta a,
.footer-bottom a{
transition:none;
}

.hero-image{
transition:none;
}

.about-link span,
.about-card{
transition:none;
}
}


/* ==========================
MOBILE MENU
========================== */

.menu-toggle{
display:none;
}

@media(max-width:768px){

.site-nav{
position:relative;
min-height:72px;
}

.header-cta{
display:none;
}

.menu-toggle{
display:block;
}

.primary-nav{
position:absolute;
top:calc(100% + 1px);
left:0;
width:100%;
padding:8px 5% 18px;
display:none;
border-bottom:1px solid #E2E8F0;
background:rgba(255,255,255,.98);
box-shadow:0 16px 24px rgba(15,23,42,.1);
}

.primary-nav.active{
display:block;
}

.primary-nav ul{
flex-direction:column;
align-items:stretch;
gap:4px;
}

.primary-nav a{
display:block;
padding:12px 8px;
}

.primary-nav a::after{
display:none;
}

.footer-main{
grid-template-columns:1fr 1fr;
gap:36px 28px;
}

.footer-brand{
grid-column:1 / -1;
}

.footer-cta{
grid-column:1 / -1;
}

.site-footer{
padding-top:48px;
}

}

@media(max-width:480px){
.footer-main{
grid-template-columns:1fr;
gap:30px;
}

.footer-brand,
.footer-cta{
grid-column:auto;
}

.footer-bottom{
align-items:flex-start;
flex-direction:column;
gap:10px;
}

}

/*success message*/

.success-message{

background:#d1fae5;
color:#065f46;

padding:15px;

border-radius:10px;

margin-bottom:20px;
}

/*hide honeypot field*/
.honeypot{
display:none;
}