Preview de mixed.css
/* MIXED CSS PACK */
/* Template: cortinasazulroller.com.ar/index.html */
/* Template mtime: 2026-04-10 13:58:07 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@400;500;600;700;800&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* =====================================================
VARIABLES Y RESET
===================================================== */
:root {
--accent: #0043a4;
--accent-2: #0b63d1;
--accent-light: #3d7dd9;
--text: #111111;
--muted: #5c6470;
--line: #e8edf5;
--soft: #f5f8fc;
--white: #ffffff;
--shadow-sm: 0 4px 12px rgba(0,67,164,.06);
--shadow: 0 22px 60px rgba(0,0,0,.08);
--shadow-lg: 0 32px 80px rgba(0,67,164,.12);
--shadow-accent: 0 16px 40px rgba(0,67,164,.25);
--radius: 24px;
--radius-sm: 16px;
--radius-xs: 12px;
--nav-h: 82px;
--transition: .35s cubic-bezier(.4,0,.2,1);
--transition-fast: .2s cubic-bezier(.4,0,.2,1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
color: var(--text);
background: var(--white);
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
transition: var(--transition-fast);
}
/* =====================================================
UTILIDADES
===================================================== */
.container-custom {
max-width: 1200px;
}
.section {
padding: 120px 0;
position: relative;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 100px;
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
background: linear-gradient(135deg, rgba(0,67,164,.08), rgba(11,99,209,.06));
border: 1px solid rgba(0,67,164,.12);
margin-bottom: 20px;
backdrop-filter: blur(4px);
}
.eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(1.2); }
}
.section-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(2.2rem, 4vw, 3.4rem);
line-height: 1.1;
font-weight: 800;
letter-spacing: -.03em;
margin: 0 0 18px;
background: linear-gradient(135deg, var(--text) 0%, #2a2a2a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
max-width: 680px;
margin: 0 auto;
color: var(--muted);
font-size: 1.1rem;
line-height: 1.8;
font-weight: 400;
}
.text-muted-custom {
color: var(--muted);
}
/* =====================================================
BOTONES PREMIUM
===================================================== */
.btn-main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 58px;
padding: 0 32px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
color: #fff;
font-weight: 700;
font-size: .95rem;
border: none;
transition: var(--transition);
box-shadow: var(--shadow-accent);
position: relative;
overflow: hidden;
}
.btn-main::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
opacity: 0;
transition: var(--transition);
}
.btn-main:hover {
color: #fff;
transform: translateY(-3px);
box-shadow: 0 20px 50px rgba(0,67,164,.35);
}
.btn-main:hover::before {
opacity: 1;
}
.btn-main span {
position: relative;
z-index: 1;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 58px;
padding: 0 32px;
border-radius: var(--radius-sm);
background: var(--white);
color: var(--text);
font-weight: 700;
font-size: .95rem;
border: 2px solid var(--line);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-ghost::before {
content: '';
position: absolute;
inset: 0;
background: var(--soft);
transform: scaleX(0);
transform-origin: left;
transition: var(--transition);
}
.btn-ghost:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-3px);
}
.btn-ghost:hover::before {
transform: scaleX(1);
}
.btn-ghost span {
position: relative;
z-index: 1;
}
/* =====================================================
NAVBAR PREMIUM
===================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background: rgba(255,255,255,.85);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(0,0,0,.04);
transition: var(--transition);
}
.site-header.scrolled {
box-shadow: 0 4px 30px rgba(0,0,0,.06);
}
.navbar {
min-height: var(--nav-h);
padding: 0;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 14px;
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 1.1rem;
letter-spacing: -.02em;
color: var(--text);
white-space: nowrap;
transition: var(--transition-fast);
}
.navbar-brand:hover {
color: var(--accent);
}
.brand-logo {
height: 46px;
width: auto;
object-fit: contain;
flex: 0 0 auto;
transition: var(--transition);
}
.navbar-brand:hover .brand-logo {
transform: scale(1.05);
}
.navbar-nav .nav-link {
color: var(--text);
font-weight: 600;
font-size: .92rem;
padding: 1rem .9rem;
position: relative;
transition: var(--transition-fast);
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: .6rem;
left: .9rem;
right: .9rem;
height: 2px;
background: var(--accent);
border-radius: 2px;
transform: scaleX(0);
transition: var(--transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--accent);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
transform: scaleX(1);
}
.navbar-toggler {
border: 1px solid rgba(0,0,0,.08);
box-shadow: none !important;
padding: .5rem .7rem;
border-radius: var(--radius-xs);
transition: var(--transition-fast);
}
.navbar-toggler:hover {
background: var(--soft);
}
/* =====================================================
HERO PREMIUM
===================================================== */
.hero {
padding: calc(var(--nav-h) + 44px) 0 110px;
min-height: min(940px, 100vh);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
color: var(--white);
isolation: isolate;
background: #07162f;
}
.hero-bg,
.hero-overlay,
.hero-pattern {
position: absolute;
inset: 0;
}
.hero-bg {
background:
linear-gradient(90deg, rgba(6, 20, 48, .18), rgba(6, 20, 48, .08)),
url('img/fav.png') center center / cover no-repeat;
transform: scale(1.04);
animation: heroZoom 18s ease-out forwards;
z-index: -3;
}
.hero-mobile-image {
display: none;
margin: 24px auto 0;
width: min(100%, 420px);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 42px rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
backdrop-filter: blur(8px);
}
.hero-mobile-image img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.hero-overlay {
background:
linear-gradient(180deg, rgba(5, 16, 36, .72) 0%, rgba(5, 18, 42, .52) 34%, rgba(5, 18, 42, .82) 100%),
linear-gradient(135deg, rgba(0, 67, 164, .30) 0%, rgba(11, 99, 209, .08) 48%, rgba(2, 11, 28, .34) 100%);
z-index: -2;
}
.hero-pattern {
background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M16 16h32v32H16zM0 0h8v8H0zm56 0h8v8h-8zM0 56h8v8H0zm56 56h8v8h-8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: .22;
z-index: -1;
mix-blend-mode: soft-light;
}
@keyframes heroZoom {
to { transform: scale(1); }
}
.hero-content {
position: relative;
z-index: 2;
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.hero .eyebrow {
color: #d7e6ff;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 10px 30px rgba(0,0,0,.12);
margin-bottom: 24px;
}
.hero .eyebrow::before {
background: #8fc1ff;
box-shadow: 0 0 14px rgba(143,193,255,.7);
}
.hero-content h1 {
font-family: 'Outfit', sans-serif;
font-size: clamp(2.8rem, 5.4vw, 4.95rem);
line-height: 1.03;
letter-spacing: -.045em;
font-weight: 800;
margin: 0 0 20px;
color: var(--white);
text-shadow: 0 10px 34px rgba(0,0,0,.18);
}
.hero-accent-line {
width: 86px;
height: 4px;
border-radius: 999px;
margin: 0 auto 24px;
background: linear-gradient(135deg, #6ab0ff 0%, #ffffff 55%, #7cc0ff 100%);
box-shadow: 0 10px 30px rgba(106,176,255,.35);
}
.hero-lead {
font-size: 1.16rem;
line-height: 1.9;
color: rgba(255,255,255,.92);
max-width: 840px;
margin: 0 auto;
text-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.hero-support {
font-size: 1.02rem;
line-height: 1.82;
color: rgba(255,255,255,.76);
max-width: 760px;
margin: 18px auto 0;
}
.hero-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin: 34px auto 0;
max-width: 920px;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: 999px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
color: rgba(255,255,255,.94);
font-size: .95rem;
font-weight: 600;
backdrop-filter: blur(10px);
box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.hero-pill-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: linear-gradient(135deg, #67b0ff 0%, #ffffff 100%);
box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 14px rgba(103,176,255,.6);
flex: 0 0 auto;
}
.hero-actions {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 36px;
}
.hero .btn-main {
box-shadow: 0 16px 45px rgba(0,67,164,.35);
}
.hero .btn-ghost {
background: rgba(255,255,255,.08);
color: var(--white);
border: 2px solid rgba(255,255,255,.18);
backdrop-filter: blur(8px);
}
.hero .btn-ghost::before {
background: rgba(255,255,255,.10);
}
.hero .btn-ghost:hover {
color: var(--white);
border-color: rgba(255,255,255,.42);
background: rgba(255,255,255,.12);
}
/* =====================================================
QUIENES SOMOS PREMIUM
===================================================== */
.content-grid {
display: grid;
gap: 48px;
align-items: center;
}
.about-wrap {
grid-template-columns: 1.1fr .9fr;
}
.about-text h2 {
margin-bottom: 24px;
}
.about-text p {
font-size: 1.08rem;
line-height: 1.9;
color: var(--muted);
margin-bottom: 16px;
}
.about-panel {
background: linear-gradient(145deg, var(--soft) 0%, var(--white) 100%);
border: 1px solid var(--line);
border-radius: 28px;
padding: 36px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.about-panel::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(0,67,164,.06) 0%, transparent 70%);
border-radius: 50%;
}
.about-points {
display: grid;
gap: 14px;
position: relative;
z-index: 1;
}
.point {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px;
border-radius: var(--radius-sm);
background: var(--white);
border: 1px solid var(--line);
transition: var(--transition);
cursor: default;
}
.point:hover {
transform: translateX(8px);
border-color: rgba(0,67,164,.2);
box-shadow: var(--shadow-sm);
}
.point-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-xs);
background: linear-gradient(135deg, rgba(0,67,164,.1), rgba(11,99,209,.06));
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
flex: 0 0 auto;
transition: var(--transition);
}
.point:hover .point-icon {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--white);
transform: scale(1.1);
}
.point strong {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 1.02rem;
font-weight: 700;
margin-bottom: 4px;
letter-spacing: -.01em;
}
.point span {
color: var(--muted);
line-height: 1.65;
font-size: .94rem;
}
/* =====================================================
SERVICIOS PREMIUM
===================================================== */
.section-services {
background: linear-gradient(180deg, var(--soft) 0%, var(--white) 100%);
position: relative;
}
.section-services::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
margin-top: 56px;
}
.service-card {
height: 100%;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 36px 32px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transform: scaleX(0);
transition: var(--transition);
}
.service-card::after {
content: '';
position: absolute;
bottom: -50%;
right: -30%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(0,67,164,.04) 0%, transparent 70%);
border-radius: 50%;
transition: var(--transition);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: rgba(0,67,164,.15);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover::after {
transform: scale(1.5);
}
.service-icon {
width: 64px;
height: 64px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
background: linear-gradient(135deg, rgba(0,67,164,.1), rgba(11,99,209,.06));
margin-bottom: 24px;
transition: var(--transition);
position: relative;
z-index: 1;
}
.service-card:hover .service-icon {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--white);
transform: scale(1.1) rotate(-5deg);
box-shadow: var(--shadow-accent);
}
.service-card h3 {
font-family: 'Outfit', sans-serif;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -.02em;
margin: 0 0 14px;
position: relative;
z-index: 1;
}
.service-card p {
margin: 0;
color: var(--muted);
line-height: 1.8;
font-size: .98rem;
position: relative;
z-index: 1;
}
.services-note {
margin-top: 36px;
background: linear-gradient(135deg, var(--white) 0%, var(--soft) 100%);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px 28px;
color: var(--text);
font-weight: 600;
display: flex;
align-items: center;
gap: 14px;
box-shadow: var(--shadow-sm);
}
.services-note::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
flex: 0 0 auto;
box-shadow: 0 0 12px rgba(0,67,164,.5);
}
/* =====================================================
POR QUE ELEGIRNOS PREMIUM
===================================================== */
.reasons-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 56px;
}
.reason-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px 28px;
box-shadow: var(--shadow-sm);
height: 100%;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.reason-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,67,164,.02), transparent);
opacity: 0;
transition: var(--transition);
}
.reason-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow);
border-color: rgba(0,67,164,.12);
}
.reason-card:hover::before {
opacity: 1;
}
.reason-card .reason-icon {
width: 60px;
height: 60px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
margin-bottom: 22px;
box-shadow: var(--shadow-accent);
transition: var(--transition);
position: relative;
z-index: 1;
}
.reason-card:hover .reason-icon {
transform: scale(1.1) rotate(5deg);
}
.reason-card h3 {
font-family: 'Outfit', sans-serif;
font-size: 1.18rem;
margin: 0 0 12px;
font-weight: 700;
letter-spacing: -.02em;
position: relative;
z-index: 1;
}
.reason-card p {
margin: 0;
color: var(--muted);
line-height: 1.8;
font-size: .96rem;
position: relative;
z-index: 1;
}
/* =====================================================
GALERIA (SIN CAMBIOS - SEGUN SOLICITUD)
===================================================== */
.gal-gallery .carousel {
max-width: 980px;
margin-inline: auto;
position: relative;
}
.gal-frame {
height: clamp(260px, 54vh, 500px);
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 18px 42px rgba(0,0,0,.08);
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.gal-img {
width: auto !important;
max-width: 100%;
height: auto !important;
max-height: 100%;
object-fit: contain !important;
object-position: center;
display: block;
cursor: zoom-in;
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20;
width: 54px;
height: 54px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
background: rgba(0,0,0,.60);
border-radius: 50%;
margin: 0 12px;
}
.gal-gallery .carousel-control-prev { left: 0; }
.gal-gallery .carousel-control-next { right: 0; }
.gal-gallery .gal-ctrl-icon {
width: 2.6rem;
height: 2.6rem;
background-size: 58% 58%;
}
.gal-gallery .carousel-indicators {
z-index: 10;
bottom: -56px;
}
.gal-gallery .carousel-indicators button {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0,0,0,.35);
border: none;
}
.gal-gallery .carousel-indicators button.active {
background: var(--accent);
}
.gal-gallery { padding-bottom: 66px; }
#galLightbox .modal-content { background: #000; }
#galLightboxImg {
max-height: 86vh;
width: 100%;
height: auto;
object-fit: contain;
background: #000;
}
.gal-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 0;
width: 46px;
height: 46px;
border-radius: 999px;
background: rgba(255,255,255,.18);
color: #fff;
font-size: 30px;
line-height: 46px;
text-align: center;
z-index: 5;
cursor: pointer;
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,.28); }
.gal-lightbox-nav.gal-prev { left: 12px; }
.gal-lightbox-nav.gal-next { right: 12px; }
/* =====================================================
FAQS PREMIUM
===================================================== */
.section-faqs {
background: linear-gradient(180deg, var(--soft) 0%, var(--white) 100%);
}
.faq-wrap {
max-width: 880px;
margin: 56px auto 0;
}
.accordion-item {
border: 1px solid var(--line);
border-radius: 20px !important;
overflow: hidden;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
background: var(--white);
transition: var(--transition);
}
.accordion-item:hover {
box-shadow: var(--shadow);
}
.accordion-button {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 1.08rem;
padding: 26px 28px;
box-shadow: none !important;
background: transparent;
letter-spacing: -.01em;
transition: var(--transition);
}
.accordion-button:not(.collapsed) {
background: linear-gradient(135deg, rgba(0,67,164,.04), rgba(11,99,209,.02));
color: var(--accent);
}
.accordion-button::after {
width: 20px;
height: 20px;
background-size: 20px;
transition: var(--transition);
}
.accordion-body {
color: var(--muted);
line-height: 1.85;
padding: 0 28px 28px;
font-size: 1.02rem;
}
/* =====================================================
CONTACTO PREMIUM
===================================================== */
.contact-wrap {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 36px;
align-items: start;
margin-top: 56px;
}
.contact-card,
.contact-info {
border: 1px solid var(--line);
border-radius: 28px;
background: var(--white);
box-shadow: var(--shadow);
transition: var(--transition);
}
.contact-card {
padding: 40px;
}
.contact-card:hover {
box-shadow: var(--shadow-lg);
}
.contact-info {
padding: 40px;
background: linear-gradient(145deg, var(--white) 0%, #f8faff 100%);
position: relative;
overflow: hidden;
}
.contact-info::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(0,67,164,.08) 0%, transparent 70%);
border-radius: 50%;
}
.form-label {
font-weight: 600;
font-size: .92rem;
margin-bottom: 8px;
color: var(--text);
}
.form-control,
.form-select {
min-height: 58px;
border-radius: var(--radius-sm);
border: 2px solid var(--line);
padding: 16px 20px;
font-size: 1rem;
box-shadow: none !important;
transition: var(--transition);
background: var(--white);
}
.form-control:focus,
.form-select:focus {
border-color: var(--accent);
background: var(--white);
}
textarea.form-control {
min-height: 140px;
resize: vertical;
}
.contact-info h3 {
font-family: 'Outfit', sans-serif;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -.02em;
margin: 0 0 14px;
position: relative;
z-index: 1;
}
.contact-info > p {
color: var(--muted);
line-height: 1.85;
margin: 0 0 24px;
font-size: 1.02rem;
position: relative;
z-index: 1;
}
.info-list {
display: grid;
gap: 14px;
position: relative;
z-index: 1;
}
.info-item {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
transition: var(--transition);
}
.info-item:hover {
transform: translateX(6px);
border-color: rgba(0,67,164,.15);
box-shadow: var(--shadow-sm);
}
.info-item .point-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-xs);
}
.info-item strong {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 700;
margin-bottom: 4px;
}
.info-item span {
color: var(--muted);
line-height: 1.65;
font-size: .94rem;
}
/* =====================================================
FOOTER PREMIUM
===================================================== */
.site-footer {
background: linear-gradient(145deg, var(--accent) 0%, #002d6b 100%);
color: rgba(255,255,255,.9);
padding: 80px 0 28px;
margin-top: 40px;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 60%);
border-radius: 50%;
}
.site-footer::after {
content: '';
position: absolute;
bottom: -150px;
left: -150px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,.03) 0%, transparent 60%);
border-radius: 50%;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr .7fr .7fr .9fr;
gap: 36px;
position: relative;
z-index: 1;
}
.footer-brand {
display: flex;
align-items: center;
gap: 14px;
color: #fff;
margin-bottom: 20px;
}
.footer-logo {
height: 44px;
width: auto;
object-fit: contain;
flex: 0 0 auto;
}
.footer-brand span {
font-family: 'Outfit', sans-serif;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.2;
}
.site-footer p {
margin: 0;
line-height: 1.85;
font-size: .98rem;
color: rgba(255,255,255,.75);
}
.site-footer h4 {
font-family: 'Outfit', sans-serif;
color: #fff;
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 18px;
letter-spacing: -.01em;
}
.footer-links {
display: grid;
gap: 12px;
}
.footer-links a,
.footer-links span {
color: rgba(255,255,255,.75);
font-size: .95rem;
transition: var(--transition-fast);
}
.footer-links a:hover {
color: #fff;
transform: translateX(4px);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 48px;
padding-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
align-items: center;
color: rgba(255,255,255,.7);
font-size: .92rem;
position: relative;
z-index: 1;
}
.footer-bottom a {
color: #fff;
font-weight: 700;
position: relative;
}
.footer-bottom a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: #fff;
transform: scaleX(0);
transition: var(--transition);
}
.footer-bottom a:hover::after {
transform: scaleX(1);
}
/* =====================================================
UTILIDADES OCULTAS
===================================================== */
.visually-hidden-field {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* =====================================================
ANIMACIONES DE ENTRADA
===================================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-in {
animation: fadeInUp .8s cubic-bezier(.4,0,.2,1) forwards;
}
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1199.98px) {
.section { padding: 100px 0; }
.hero-card { min-height: 460px; }
.services-grid,
.reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
:root { --nav-h: 74px; }
.section { padding: 80px 0; }
.hero {
min-height: auto;
padding: calc(var(--nav-h) + 34px) 0 88px;
}
.content-grid,
.about-wrap,
.contact-wrap { grid-template-columns: 1fr; }
.navbar-collapse {
background: var(--white);
border: 1px solid rgba(0,0,0,.06);
border-radius: var(--radius-sm);
padding: 16px 20px;
margin-top: 12px;
box-shadow: var(--shadow);
}
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
.section { padding: 70px 0; }
.hero-content h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
.hero-lead { font-size: 1.05rem; line-height: 1.82; }
.hero-support { font-size: .98rem; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn-main,
.hero-actions .btn-ghost { width: 100%; }
.hero-pills { grid-template-columns: 1fr; }
.services-grid,
.reasons-grid,
.footer-grid { grid-template-columns: 1fr; }
.contact-card,
.contact-info,
.about-panel { padding: 28px; }
.gal-frame { height: clamp(230px, 44vh, 380px); }
.site-footer { padding-top: 60px; }
}
@media (max-width: 575.98px) {
.brand-logo { height: 40px; }
.navbar-brand { font-size: .98rem; }
.section-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.hero {
padding: calc(var(--nav-h) + 26px) 0 72px;
min-height: auto;
}
.hero-bg {
background: linear-gradient(90deg, rgba(6, 20, 48, .18), rgba(6, 20, 48, .08));
transform: none;
animation: none;
}
.hero-content h1 { font-size: clamp(1.95rem, 10vw, 2.45rem); }
.hero-accent-line { margin-bottom: 20px; }
.hero-mobile-image {
display: block;
}
.hero-pills { gap: 10px; margin-top: 22px; }
.hero-pill { width: 100%; justify-content: center; border-radius: 18px; }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
width: 46px;
height: 46px;
margin: 0 8px;
}
.gal-frame { height: clamp(220px, 40vh, 340px); }
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
.service-card,
.reason-card { padding: 28px 24px; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
.ext-gallery-section{
padding: 96px 0;
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
overflow: hidden;
}
.ext-gallery-container{
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
}
.ext-gallery-head{
text-align: center;
margin-bottom: 2.8rem;
}
.ext-gallery-eyebrow{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: .7rem 1rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(0,67,164,.08), rgba(11,99,209,.06));
border: 1px solid rgba(0,67,164,.12);
color: var(--accent);
font-weight: 800;
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.ext-gallery-eyebrow::before{
content:"";
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 6px rgba(0,67,164,.08);
}
.ext-gallery-title{
margin: 0 0 1rem;
font-family: 'Outfit', sans-serif;
font-size: clamp(2.1rem, 3.8vw, 3.2rem);
line-height: 1.08;
letter-spacing: -.04em;
font-weight: 800;
color: #111;
}
.ext-gallery-subtitle{
max-width: 760px;
margin: 0 auto;
color: var(--muted);
font-size: 1.05rem;
line-height: 1.85;
}
.gallery-ticker-wrap{
position: relative;
overflow: hidden;
margin: 0 0 44px;
padding: 10px 0;
}
.gallery-ticker-wrap::before,
.gallery-ticker-wrap::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 110px;
z-index: 2;
pointer-events: none;
}
.gallery-ticker-wrap::before{
left: 0;
background: linear-gradient(to right, #f7faff 0%, rgba(247,250,255,0) 100%);
}
.gallery-ticker-wrap::after{
right: 0;
background: linear-gradient(to left, #f7faff 0%, rgba(247,250,255,0) 100%);
}
.gallery-ticker-wrap .ticker-wrapper{
width: 100%;
overflow: hidden;
}
.gallery-ticker-wrap .ticker-track{
display: flex;
align-items: center;
gap: 22px;
width: max-content;
animation: galleryTickerMove 34s linear infinite;
will-change: transform;
}
.gallery-ticker-wrap:hover .ticker-track{
animation-play-state: paused;
}
.ticker-card{
appearance: none;
-webkit-appearance: none;
padding: 0;
width: 320px;
height: 420px;
flex: 0 0 auto;
border-radius: 24px;
overflow: hidden;
position: relative;
border: 1px solid rgba(0,67,164,.10);
box-shadow: 0 22px 44px rgba(0,0,0,.08);
cursor: pointer;
background: #fff;
}
.ticker-card img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.ticker-card::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.18) 100%);
opacity: .72;
transition: opacity .25s ease;
}
.ticker-card:hover img{
transform: scale(1.04);
}
.ticker-card:hover::after{
opacity: .95;
}
@keyframes galleryTickerMove{
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-50% - 11px)); }
}
.mosaic-gallery{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:18px;
align-items:stretch;
}
.mosaic-item{
appearance: none;
-webkit-appearance: none;
padding: 0;
position:relative;
display:block;
overflow:hidden;
border-radius:24px;
background:#fff;
border:1px solid rgba(0,67,164,.10);
box-shadow:0 16px 34px rgba(0,0,0,.08);
aspect-ratio:4 / 5;
min-height:360px;
cursor:pointer;
}
.mosaic-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .4s ease;
}
.mosaic-item:hover img{
transform:scale(1.04);
}
.mosaic-item::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.16) 100%);
opacity:.78;
transition:.25s ease;
}
.mosaic-item:hover::after{
opacity:1;
}
.mosaic-item.featured{
grid-column: span 2;
grid-row: span 2;
aspect-ratio: auto;
min-height: 738px;
}
.gallery-modal .modal-dialog{
max-width:min(1240px, calc(100vw - 28px));
}
.gallery-modal .modal-content{
background:#fff;
border:0;
border-radius:28px;
overflow:hidden;
box-shadow:0 34px 100px rgba(0,0,0,.22);
}
.gallery-modal-close{
position:absolute;
top:14px;
right:14px;
width:48px;
height:48px;
border:0;
border-radius:999px;
background:rgba(255,255,255,.96);
color:#111;
font-size:30px;
line-height:1;
z-index:20;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.gallery-modal-image-wrap{
height:84vh;
min-height:620px;
padding:32px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
}
.gallery-modal-image{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
border-radius:20px;
display:block;
}
.gallery-modal .carousel-control-prev,
.gallery-modal .carousel-control-next{
width:78px;
opacity:1;
}
.gallery-modal .carousel-control-prev-icon,
.gallery-modal .carousel-control-next-icon{
width:46px;
height:46px;
border-radius:999px;
background-color:rgba(17,17,17,.82);
background-size:18px 18px;
}
.gallery-modal .carousel-indicators{
margin-bottom:18px;
gap:7px;
flex-wrap:wrap;
}
.gallery-modal .carousel-indicators [data-bs-target]{
width:10px;
height:10px;
border-radius:999px;
border:0;
background-color:rgba(0,0,0,.24);
}
.gallery-modal .carousel-indicators .active{
background-color:var(--accent);
}
@media (max-width: 991.98px){
.gallery-ticker-wrap::before,
.gallery-ticker-wrap::after{
width: 70px;
}
.ticker-card{
width: 260px;
height: 340px;
border-radius: 20px;
}
.mosaic-gallery{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:16px;
}
.mosaic-item{
min-height:320px;
border-radius:20px;
}
.mosaic-item.featured{
grid-column: span 2;
min-height:440px;
}
.gallery-modal-image-wrap{
height:78vh;
min-height:480px;
padding:24px;
}
}
@media (max-width: 767.98px){
.ext-gallery-section{
padding:78px 0;
}
.ext-gallery-container{
width:min(100%, calc(100% - 24px));
}
.gallery-ticker-wrap{
margin-bottom:28px;
}
.gallery-ticker-wrap::before,
.gallery-ticker-wrap::after{
width:30px;
}
.gallery-ticker-wrap .ticker-track{
gap:14px;
animation-duration:26s;
}
.ticker-card{
width: 190px;
height: 250px;
border-radius: 18px;
}
.ticker-card:hover img{
transform:none;
}
.mosaic-gallery{
grid-template-columns:1fr 1fr;
gap:12px;
}
.mosaic-item,
.mosaic-item.featured{
grid-column:auto;
grid-row:auto;
min-height:220px;
aspect-ratio: 3 / 4;
border-radius:18px;
}
.gallery-modal .modal-dialog{
max-width:calc(100vw - 12px);
margin:6px auto;
}
.gallery-modal .modal-content{
border-radius:20px;
}
.gallery-modal-close{
top:10px;
right:10px;
width:42px;
height:42px;
font-size:28px;
}
.gallery-modal-image-wrap{
height:72vh;
min-height:360px;
padding:18px 14px 42px;
}
.gallery-modal .carousel-control-prev,
.gallery-modal .carousel-control-next{
width:52px;
}
.gallery-modal .carousel-control-prev-icon,
.gallery-modal .carousel-control-next-icon{
width:38px;
height:38px;
background-size:15px 15px;
}
.gallery-modal .carousel-indicators{
margin-bottom:12px;
}
}
@media (max-width: 575.98px){
.mosaic-gallery{
grid-template-columns:1fr;
gap:12px;
}
.mosaic-item,
.mosaic-item.featured{
min-height:260px;
aspect-ratio: 4 / 5;
}
}
/* ===== INLINE <style> BLOCK #3 ===== */
.wa-float{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 2147483647;
display: flex;
flex-direction: column;
align-items: flex-end;
font-family: inherit;
}
.wa-btn{
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg,#25D366,#128C7E);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 10px 30px rgba(37,211,102,.45);
transition: transform .25s, box-shadow .25s;
}
.wa-btn:hover{
transform: translateY(-3px) scale(1.05);
box-shadow: 0 14px 36px rgba(37,211,102,.55);
}
.wa-card{
position: absolute;
right: 0;
bottom: 74px;
width: min(360px,92vw);
background: #fff;
border-radius: 18px;
border: 1px solid #e3e6ea;
box-shadow: 0 18px 60px rgba(0,0,0,.25);
overflow: hidden;
transform: translateY(10px);
opacity: 0;
transition: .25s ease;
}
.wa-card[aria-modal="true"]{
transform: none;
opacity: 1;
}
.wa-head{
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: linear-gradient(135deg,#0043a4,#0b63d1);
color: #fff;
}
.wa-avatar{
width: 40px;
height: 40px;
background: #fff;
border-radius: 10px;
display: grid;
place-items: center;
overflow: hidden;
}
.wa-avatar img{
width: 26px;
height: 26px;
object-fit: contain;
}
.wa-title{
font-weight: 800;
}
.wa-status{
font-size: .85rem;
opacity: .92;
}
.wa-close{
margin-left: auto;
border: none;
background: transparent;
color: #fff;
font-size: 24px;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: .9;
}
.wa-close:hover{
opacity: 1;
background: rgba(255,255,255,.14);
}
.wa-body{
padding: 14px;
max-height: 40vh;
overflow: auto;
background: #f8f9fa;
display: flex;
flex-direction: column;
gap: 8px;
}
.wa-bubble{
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
font-size: .95rem;
box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
background: #fff;
border: 1px solid #e3e6ea;
align-self: flex-start;
}
.wa-user{
background: #eaf2ff;
border: 1px solid #cfe0ff;
align-self: flex-end;
}
.wa-compose{
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 10px;
border-top: 1px solid #e3e6ea;
background: #fff;
}
.wa-compose textarea{
resize: none;
border-radius: 12px;
padding: 10px;
border: 1px solid #e3e6ea;
font-family: inherit;
outline: none;
}
.wa-send{
background: #0043a4;
color: #fff;
border: none;
border-radius: 12px;
padding: 0 16px;
cursor: pointer;
}
.wa-send:hover{
background: #0b63d1;
}
@media (max-width: 480px){
.wa-float{
right: 12px;
bottom: 12px;
}
.wa-card{
width: calc(100vw - 24px);
}
}