:root{
–rep-green:#93F1C9;–rep-forest:#1E2F23;–rep-teal:#41999F;–rep-sun:#F7D450;
–rep-mint:#92F1CB;–rep-white:#FFFFFF;–rep-bg-light:#F7FBF9;
–rep-text-secondary:#3B4B45;–rep-text-tertiary:#547065;–rep-text-muted:#6B7D76;
–rep-border:#E6F3EF;
–rep-grad:linear-gradient(135deg,#93F1C9 0%,#41999F 50%,#2A6B70 100%);
–rep-shadow-sm:0 1px 2px 0 rgba(30,47,35,.05);
–rep-shadow-md:0 4px 6px -1px rgba(30,47,35,.10),0 2px 4px -1px rgba(30,47,35,.06);
–rep-shadow-lg:0 10px 15px -3px rgba(30,47,35,.10),0 4px 6px -2px rgba(30,47,35,.05);
–rep-font-display:’Sora’,system-ui,-apple-system,sans-serif;
–rep-font-body:’Inter’,system-ui,-apple-system,sans-serif;
–rep-radius-sm:8px;–rep-radius-md:12px;–rep-radius-lg:16px;
–rep-radius-xl:24px;–rep-radius-full:999px;
}
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;display:block;}
.rpl ul,.rpl ol{list-style:none;margin:0;padding:0;}
.rpl a{text-decoration:none;color:inherit;}
.rpl{font-family:var(–rep-font-body);color:var(–rep-text-secondary);line-height:1.6;}
.rpl h1,.rpl h2,.rpl h3,.rpl h4{font-family:var(–rep-font-display)!important;line-height:1.15!important;margin:0;}
.rpl h1{font-size:clamp(2.2rem,5vw,3.6rem)!important;font-weight:700!important;color:#fff!important;}
.rpl h2{font-size:clamp(1.7rem,3.2vw,2.4rem)!important;font-weight:600!important;color:var(–rep-forest);}
.rpl h3{font-size:clamp(1.05rem,1.8vw,1.3rem)!important;font-weight:600!important;color:var(–rep-forest);}
.rpl h4{font-size:clamp(.9rem,1.4vw,1.1rem)!important;font-weight:600!important;color:var(–rep-forest);}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
.kicker{display:inline-flex;align-items:center;gap:6px;font:600 .78rem/1 var(–rep-font-body);text-transform:uppercase;letter-spacing:.1em;color:var(–rep-teal);margin-bottom:12px;}
.kicker–light{color:var(–rep-green);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(–rep-radius-md);font:600 .95rem/1 var(–rep-font-body);transition:all .25s ease;min-height:48px;white-space:nowrap;text-decoration:none;}
.btn-primary{background:var(–rep-teal);color:#fff!important;}
.btn-primary:hover{background:#368F95;transform:translateY(-2px);box-shadow:var(–rep-shadow-md);}
.btn-outline-dark{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff!important;}
.btn-outline-dark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);}
.btn-green{background:var(–rep-green);color:var(–rep-forest);}
.btn-green:hover{background:#7de5b5;transform:translateY(-2px);}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal[data-delay=»1″]{transition-delay:.1s!important;}
.reveal[data-delay=»2″]{transition-delay:.2s!important;}
.reveal[data-delay=»3″]{transition-delay:.3s!important;}
.reveal[data-delay=»4″]{transition-delay:.4s!important;}
/* ===== 1. HERO ===== */
.inf-hero{
min-height:88vh;display:flex;align-items:center;
background:linear-gradient(155deg,#060E08 0%,#0E1D13 40%,#16291D 80%,#0E1D13 100%);
position:relative;overflow:hidden;padding:100px 0 80px;
}
.inf-hero::before{
content:»»;position:absolute;inset:0;
background:
radial-gradient(ellipse 60% 60% at 20% 50%,rgba(65,153,159,.15) 0%,transparent 55%),
radial-gradient(ellipse 40% 50% at 85% 15%,rgba(147,241,201,.07) 0%,transparent 50%),
radial-gradient(ellipse 50% 40% at 70% 80%,rgba(65,153,159,.06) 0%,transparent 50%);
pointer-events:none;
}
.inf-hero::after{
content:»»;position:absolute;inset:0;
background-image:
linear-gradient(rgba(147,241,201,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(147,241,201,.018) 1px,transparent 1px);
background-size:60px 60px;
pointer-events:none;
}
.inf-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.inf-eyebrow{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border:1px solid rgba(147,241,201,.2);border-radius:var(–rep-radius-full);
font:600 .75rem/1 var(–rep-font-body);color:var(–rep-green);letter-spacing:.08em;text-transform:uppercase;
margin-bottom:22px;background:rgba(147,241,201,.05);
}
.inf-hero-content h1{margin-bottom:20px;}
.inf-hero-sub{font-size:1.1rem;color:rgba(255,255,255,.65);line-height:1.75;margin-bottom:30px;max-width:520px;}
.inf-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px;}
.inf-badge{
display:inline-flex;align-items:center;gap:5px;
padding:6px 12px;border-radius:var(–rep-radius-full);
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
font:500 .78rem/1 var(–rep-font-body);color:rgba(255,255,255,.7);
}
.inf-badge i{color:var(–rep-green);font-size:13px;}
.inf-hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
/* Stack tech visual */
.inf-stack{display:flex;flex-direction:column;gap:8px;}
.inf-stack-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.inf-tech{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:var(–rep-radius-md);padding:10px 12px;
display:flex;align-items:center;gap:10px;
transition:border-color .25s;
}
.inf-tech:hover{border-color:rgba(147,241,201,.25);}
.inf-tech-ico{
width:32px;height:32px;border-radius:var(–rep-radius-sm);flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:16px;
}
.inf-tech-ico.green{background:rgba(147,241,201,.15);color:var(–rep-green);}
.inf-tech-ico.teal{background:rgba(65,153,159,.15);color:var(–rep-teal);}
.inf-tech-ico.sun{background:rgba(247,212,80,.12);color:var(–rep-sun);}
.inf-tech-ico.white{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);}
.inf-tech div{flex:1;line-height:1em;}
.inf-tech strong{display:block;font:600 .8rem/1.2 var(–rep-font-body);color:#fff;margin-bottom:1px;}
.inf-tech span{font-size:.72rem;color:rgba(255,255,255,.45);}
.inf-uptime{
background:linear-gradient(120deg,rgba(147,241,201,.08),rgba(65,153,159,.06));
border:1px solid rgba(147,241,201,.15);border-radius:var(–rep-radius-md);
padding:10px 14px;display:flex;align-items:center;gap:10px;
}
.inf-uptime-dot{
width:8px;height:8px;border-radius:50%;background:var(–rep-green);flex-shrink:0;
box-shadow:0 0 0 3px rgba(147,241,201,.2);
animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(147,241,201,.2);}50%{box-shadow:0 0 0 6px rgba(147,241,201,.1);}}
.inf-uptime span{font:600 .78rem/1 var(–rep-font-body);color:var(–rep-green);}
.inf-uptime small{display:block;font-size:.7rem;color:rgba(255,255,255,.4);margin-top:2px;}
/* ===== 2. CENTROS DE DATOS ===== */
.inf-dcs{padding:96px 0;background:#fff;}
.inf-dcs-head{text-align:center;max-width:680px;margin:0 auto 60px;}
.inf-dcs-head h2{margin-bottom:16px;}
.inf-dcs-head p{font-size:1.05rem;color:var(–rep-text-tertiary);}
.inf-dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:48px;}
.inf-dc{
background:var(–rep-bg-light);border:1px solid var(–rep-border);
border-radius:var(–rep-radius-xl);padding:36px;
position:relative;overflow:hidden;
transition:transform .25s,box-shadow .25s;
}
.inf-dc:hover{transform:translateY(-3px);box-shadow:var(–rep-shadow-lg);}
.inf-dc-flag{font-size:2.5rem;margin-bottom:16px;}
.inf-dc-region{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:var(–rep-radius-full);
font:600 .72rem/1 var(–rep-font-body);letter-spacing:.07em;text-transform:uppercase;
background:rgba(65,153,159,.1);color:var(–rep-teal);margin-bottom:12px;
}
.inf-dc h3{margin-bottom:10px;}
.inf-dc p{font-size:.9rem;color:var(–rep-text-tertiary);line-height:1.65;margin-bottom:16px;}
.inf-dc-specs{display:flex;flex-wrap:wrap;gap:8px;}
.inf-dc-spec{
display:inline-flex;align-items:center;gap:5px;
padding:5px 10px;border-radius:var(–rep-radius-full);
background:rgba(30,47,35,.06);font:500 .77rem/1 var(–rep-font-body);
color:var(–rep-text-tertiary);
}
.inf-dc-spec i{color:var(–rep-teal);font-size:12px;}
.inf-dc::before{
content:»»;position:absolute;top:0;right:0;
width:120px;height:120px;
background:radial-gradient(ellipse at top right,rgba(147,241,201,.06),transparent 70%);
pointer-events:none;
}
/* CDN band */
.inf-cdn-band{
background:linear-gradient(135deg,var(–rep-forest) 0%,#142A1A 100%);
border-radius:var(–rep-radius-xl);padding:36px 40px;
display:flex;align-items:center;gap:32px;flex-wrap:wrap;
}
.inf-cdn-ico{
width:60px;height:60px;border-radius:var(–rep-radius-lg);flex-shrink:0;
background:rgba(147,241,201,.12);color:var(–rep-green);
display:flex;align-items:center;justify-content:center;font-size:28px;
}
.inf-cdn-text h3{color:#fff!important;margin-bottom:8px;}
.inf-cdn-text p{color:rgba(255,255,255,.6);font-size:.92rem;margin:0;}
.inf-cdn-stat{text-align:right;flex:1;min-width:120px;}
.inf-cdn-stat .value{font:700 2rem/1 var(–rep-font-display);color:var(–rep-green);}
.inf-cdn-stat .label{font-size:.8rem;color:rgba(255,255,255,.45);}
/* ===== 3. STACK TECNOLÓGICO ===== */
.inf-tech-s{padding:96px 0;background:var(–rep-bg-light);}
.inf-tech-s-head{text-align:center;max-width:680px;margin:0 auto 60px;}
.inf-tech-s-head h2{margin-bottom:16px;}
.inf-tech-s-head p{font-size:1.05rem;color:var(–rep-text-tertiary);}
.inf-tech-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.inf-cat{
background:#fff;border:1px solid var(–rep-border);
border-radius:var(–rep-radius-xl);padding:32px;
transition:transform .25s,box-shadow .25s;
}
.inf-cat:hover{transform:translateY(-4px);box-shadow:var(–rep-shadow-lg);}
.inf-cat-head{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.inf-cat-ico{
width:48px;height:48px;border-radius:var(–rep-radius-lg);
display:flex;align-items:center;justify-content:center;font-size:22px;
}
.inf-cat-ico.s1{background:rgba(147,241,201,.15);color:var(–rep-green);}
.inf-cat-ico.s2{background:rgba(65,153,159,.15);color:var(–rep-teal);}
.inf-cat-ico.s3{background:rgba(247,212,80,.15);color:#B8912A;}
.inf-cat-head h3{margin:0;}
.inf-tech-list{display:flex;flex-direction:column;gap:12px;}
.inf-tech-item{
display:flex;align-items:flex-start;gap:10px;
padding:12px 14px;background:var(–rep-bg-light);border-radius:var(–rep-radius-md);
}
.inf-tech-item i{font-size:16px;color:var(–rep-teal);margin-top:2px;flex-shrink:0;}
.inf-tech-item div p{font-size:.85rem;color:var(–rep-text-muted);margin:0;}
.inf-tech-item div strong{display:block;font-size:.88rem;color:var(–rep-forest);margin-bottom:2px;}
/* ===== 4. CLOUDFLARE ===== */
.inf-cf{
padding:96px 0;
background:linear-gradient(160deg,var(–rep-forest) 0%,#0E1D13 100%);
position:relative;overflow:hidden;
}
.inf-cf::before{
content:»»;position:absolute;inset:0;
background:radial-gradient(ellipse 65% 55% at 70% 50%,rgba(65,153,159,.12) 0%,transparent 60%);
pointer-events:none;
}
.inf-cf-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.inf-cf-content h2{color:#fff!important;margin-bottom:16px;}
.inf-cf-content h2 span{color:var(–rep-green);}
.inf-cf-content p{color:rgba(255,255,255,.65);line-height:1.75;margin-bottom:24px;}
.inf-cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.inf-cf-item{
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
border-radius:var(–rep-radius-md);padding:16px;
}
.inf-cf-item i{font-size:20px;color:var(–rep-green);margin-bottom:8px;display:block;}
.inf-cf-item strong{display:block;font-size:.88rem;color:#fff;margin-bottom:4px;}
.inf-cf-item p{font-size:.8rem;color:rgba(255,255,255,.5);margin:0;line-height:1.5;}
/* Cloudflare stats panel */
.inf-cf-panel{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
border-radius:var(–rep-radius-xl);padding:32px;backdrop-filter:blur(4px);
}
.inf-cf-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.inf-cf-panel-head i{font-size:28px;color:var(–rep-green);}
.inf-cf-panel-head h3{color:#fff!important;margin:0;}
.inf-cf-stats{display:flex;flex-direction:column;gap:14px;}
.inf-cf-stat-row{display:flex;align-items:center;gap:14px;}
.inf-cf-stat-ico{
width:36px;height:36px;border-radius:var(–rep-radius-md);flex-shrink:0;
background:rgba(147,241,201,.1);color:var(–rep-green);
display:flex;align-items:center;justify-content:center;font-size:16px;
}
.inf-cf-stat-row strong{font-size:.88rem;color:#fff;}
.inf-cf-stat-row span{font-size:.8rem;color:rgba(255,255,255,.45);}
/* ===== 5. PROVEEDORES CLOUD ===== */
.inf-cloud{padding:96px 0;background:#fff;}
.inf-cloud-head{text-align:center;max-width:680px;margin:0 auto 52px;}
.inf-cloud-head h2{margin-bottom:16px;}
.inf-cloud-head p{font-size:1.05rem;color:var(–rep-text-tertiary);}
.inf-cloud-logos{
display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-bottom:48px;
}
.inf-provider{
background:var(–rep-bg-light);border:1px solid var(–rep-border);
border-radius:var(–rep-radius-lg);padding:24px 16px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
transition:transform .25s,box-shadow .25s;min-height:100px;
}
.inf-provider:hover{transform:translateY(-3px);box-shadow:var(–rep-shadow-md);}
.inf-provider img{max-height:32px;width:auto;object-fit:contain;filter:grayscale(.3);transition:filter .25s;}
.inf-provider:hover img{filter:grayscale(0);}
.inf-provider span{font:600 .72rem/1 var(–rep-font-body);color:var(–rep-text-muted);text-align:center;margin-top:4px;}
/* por qué multi-cloud */
.inf-multicloud{
background:var(–rep-bg-light);border:1px solid var(–rep-border);
border-radius:var(–rep-radius-xl);padding:40px;
display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;
}
.inf-mc-item{display:flex;align-items:flex-start;gap:14px;}
.inf-mc-item i{font-size:22px;color:var(–rep-teal);flex-shrink:0;margin-top:2px;}
.inf-mc-item h4{margin-bottom:6px;}
.inf-mc-item p{font-size:.88rem;color:var(–rep-text-tertiary);margin:0;line-height:1.6;}
/* ===== 6. SOSTENIBILIDAD ===== */
.inf-green{padding:96px 0;background:var(–rep-bg-light);}
.inf-green-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.inf-green-content h2{margin-bottom:16px;}
.inf-green-content p{color:var(–rep-text-tertiary);line-height:1.75;margin-bottom:24px;}
.inf-green-list{list-style:none!important;padding:0!important;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.inf-green-list li{display:flex;align-items:flex-start;gap:12px;font-size:.93rem;color:var(–rep-text-tertiary);}
.inf-green-list li::before{
content:»»;flex-shrink:0;margin-top:7px;
width:7px;height:7px;border-radius:2px;
background:var(–rep-sun);transform:rotate(45deg);
}
.inf-green-certs{display:flex;flex-wrap:wrap;gap:10px;}
.inf-cert{
display:inline-flex;align-items:center;gap:7px;
padding:8px 14px;border-radius:var(–rep-radius-md);
background:#fff;border:1px solid var(–rep-border);
font:600 .8rem/1 var(–rep-font-body);color:var(–rep-forest);
}
.inf-cert i{color:var(–rep-teal);}
/* Stats visual */
.inf-green-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.inf-gstat{
background:#fff;border:1px solid var(–rep-border);
border-radius:var(–rep-radius-xl);padding:28px;text-align:center;
transition:transform .25s;
}
.inf-gstat:hover{transform:translateY(-3px);}
.inf-gstat .num{
font:700 2.4rem/1 var(–rep-font-display);
background:var(–rep-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;margin-bottom:8px;
}
.inf-gstat .desc{font-size:.85rem;color:var(–rep-text-muted);line-height:1.4;}
/* ===== 7. FINAL CTA ===== */
.inf-cta{
padding:96px 0;text-align:center;
background:linear-gradient(135deg,#0E1D13 0%,#1E2F23 100%);
position:relative;overflow:hidden;
}
.inf-cta::before{
content:»»;position:absolute;inset:0;
background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(65,153,159,.1) 0%,transparent 60%);
pointer-events:none;
}
.inf-cta-inner{position:relative;z-index:1;max-width:700px;margin:0 auto;}
.inf-cta h2{color:#fff!important;margin-bottom:16px;}
.inf-cta p{color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1.7;margin-bottom:36px;}
.inf-cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
/* ===== RESPONSIVE ===== */
@media(max-width:900px){
.inf-hero-inner,.inf-cf-inner,.inf-green-inner{grid-template-columns:1fr;gap:48px;}
.inf-dc-grid{grid-template-columns:1fr;}
.inf-tech-cats{grid-template-columns:1fr;}
.inf-cloud-logos{grid-template-columns:repeat(3,1fr);}
.inf-multicloud{grid-template-columns:1fr;}
.inf-green-stats{grid-template-columns:1fr 1fr;}
.inf-stack-row{grid-template-columns:1fr;}
}
@media(max-width:600px){
.inf-hero{padding:80px 0 60px;}
.inf-cloud-logos{grid-template-columns:repeat(2,1fr);}
.inf-cdn-band{flex-direction:column;gap:20px;}
.inf-cdn-stat{text-align:left;}
.inf-cf-grid{grid-template-columns:1fr;}
}/* End custom CSS */
