Preview de mixed.css
/* MIXED CSS PACK */
/* Template: selvacataratastraslados.com/index.html */
/* Template mtime: 2025-09-24 16:57:34 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
/* Paleta mejorada */
--green: #2E8B57;
--green-dark: #1e6c45;
--green-light: #e8f5e9;
--blue: #1D71B8;
--blue-dark: #15568a;
--blue-light: #e3f2fd;
--accent: #F4A300;
--accent-dark: #d18a00;
--accent-light: #fff3cd;
--ink: #0b1b1b;
--soft: #f8fbfc;
--muted: #6b7a7a;
--white: #ffffff;
--shadow: 0 10px 30px rgba(0,0,0,0.08);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
--radius: 16px;
--radius-lg: 24px;
}
* { box-sizing: border-box; }
html, body { width:100%; max-width:100%; }
body {
font-family: 'Poppins', sans-serif;
color: var(--ink);
background: var(--white);
scroll-behavior: smooth;
line-height: 1.6;
overflow-x: hidden; /* evita scroll horizontal en mobile */
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
/* ¿Por qué elegirnos? */
.why li {
margin: 1rem 0;
display: flex;
gap: 1rem;
align-items: flex-start;
}
.why i {
color: var(--green);
background: var(--green-light);
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.btn-brand {
background: linear-gradient(135deg, var(--green), var(--blue));
color: var(--white);
border: 0;
border-radius: 50px;
padding: 12px 28px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(29, 113, 184, 0.3);
position: relative;
overflow: hidden;
}
.btn-brand:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(29, 113, 184, 0.4); color: var(--white); }
.btn-brand:active { transform: translateY(-1px); }
.btn-brand::after {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.btn-brand:hover::after { left: 100%; }
.btn-outline-brand {
border: 2px solid var(--blue);
color: var(--blue);
border-radius: 50px;
padding: 10px 26px;
font-weight: 600;
transition: all 0.3s ease;
background: transparent;
}
.btn-outline-brand:hover { background: var(--blue); color: var(--white); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(29, 113, 184, 0.3); }
.link-cta {
color: var(--blue);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
word-break: break-word;
}
.link-cta:hover { color: var(--blue-dark); }
.link-cta::after {
content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background: var(--blue);
transition: width 0.3s ease;
}
.link-cta:hover::after { width: 100%; }
/* Navbar */
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 12px 0;
transition: all 0.3s ease;
}
.navbar.scrolled { padding: 8px 0; box-shadow: 0 6px 24px rgba(0,0,0,0.1); }
.navbar-brand { font-weight: 800; font-size: 1.5rem; color: var(--green); }
.navbar-brand strong {
background: linear-gradient(135deg, var(--green), var(--blue));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-link { font-weight: 500; color: var(--ink) !important; margin: 0 8px; position: relative; transition: color 0.3s ease; }
.nav-link::after{
content:''; position:absolute; width:0; height:2px; bottom:0; left:0;
background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.navbar-toggler { border: none; padding: 4px 8px; }
.navbar-toggler:focus { box-shadow: none; }
/* Hero */
header.hero {
background:
radial-gradient(ellipse at 80% 0%, rgba(29, 113, 184, 0.1) 0%, transparent 60%),
radial-gradient(ellipse at 20% 100%, rgba(46, 139, 87, 0.1) 0%, transparent 60%),
linear-gradient(180deg, #ffffff 0%, #f9fbfc 70%, #ffffff 100%);
padding-top: 8rem; padding-bottom: 5rem; position: relative; overflow: hidden;
}
.hero::before {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="none"><path d="M0,50 Q250,30 500,50 T1000,50 V100 H0 Z" fill="%23f8fbfc"/></svg>') bottom center no-repeat;
background-size: cover; z-index: 0;
}
.hero-badge {
display: inline-flex; gap: .5rem; align-items: center;
background: rgba(46, 139, 87, 0.08); color: var(--green);
border: 1px solid rgba(46, 139, 87, 0.18); padding: 8px 16px; border-radius: 50px;
font-weight: 600; font-size: .9rem; backdrop-filter: blur(5px);
}
.hero-illu {
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--white);
padding: 1.5rem; position: relative; z-index: 1;
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
transition: transform 0.5s ease;
}
.hero-illu:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.hero-illu::before {
content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
background: linear-gradient(135deg, var(--green), var(--blue)); border-radius: calc(var(--radius-lg) + 10px);
z-index: -1; opacity: 0.1;
}
h1.display-5 {
font-size: 3.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--ink) 0%, var(--blue) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
/* Secciones */
.section { padding: 100px 0; position: relative; }
.section-title {
font-weight: 800; font-size: 2.5rem; margin-bottom: 1rem; position: relative; display: inline-block;
}
.section-title::after {
content: ''; position: absolute; width: 60px; height: 4px;
background: linear-gradient(90deg, var(--green), var(--blue)); bottom: -10px; left: 0; border-radius: 2px;
}
.text-center .section-title::after { left: 50%; transform: translateX(-50%); }
.subtle { color: var(--muted); font-size: 1.1rem; }
/* Cards de servicios */
.svc-card {
height: 100%; border: 1px solid #e9eef1; border-radius: var(--radius);
padding: 2rem 1.5rem; transition: all 0.4s ease; background: var(--white);
position: relative; overflow: hidden;
}
.svc-card::before {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px;
background: linear-gradient(90deg, var(--green), var(--blue));
transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.svc-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-icon {
display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 18px;
background: linear-gradient(135deg, var(--green-light), var(--blue-light));
color: var(--blue); font-size: 1.8rem; margin-bottom: 1.5rem; transition: all 0.3s ease;
}
.svc-card:hover .svc-icon { transform: scale(1.1) rotate(5deg); background: linear-gradient(135deg, var(--green), var(--blue)); color: var(--white); }
/* ¿Por qué elegirnos? */
.why li { margin: 1rem 0; display: flex; gap: 1rem; align-items: flex-start; }
.why i {
color: var(--green); background: var(--green-light); width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
/* Galería / Ticker */
.ticker-wrap { position: relative; }
.ticker-viewport {
overflow: hidden; border-radius: var(--radius-lg); border: 1px solid #e9eef1; background: var(--white); box-shadow: var(--shadow);
}
.ticker-track { display: flex; gap: 20px; padding: 20px; will-change: transform; transition: transform 0.6s ease; }
.tile {
width: 400px; max-width: 100%; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; flex: 0 0 400px;
border: 1px solid #e9eef1; background: #f2f5f6; position: relative; transition: all 0.3s ease; cursor: zoom-in;
}
.tile:hover { transform: scale(1.03); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.tile:hover img { transform: scale(1.1); }
.ticker-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 20px; }
.ticker-btn {
background: var(--white); border: 1px solid #dfe7ec; border-radius: 50%; width: 50px; height: 50px;
display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.ticker-btn:hover { background: linear-gradient(135deg, var(--green), var(--blue)); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
.dots { display: flex; gap: .5rem; align-items: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #d2dee5; cursor: pointer; transition: all 0.3s ease; }
.dot.active { background: linear-gradient(135deg, var(--green), var(--blue)); transform: scale(1.2); }
/* FAQs */
.accordion { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.accordion-item { border: none; border-bottom: 1px solid #e9eef1; }
.accordion-item:last-child { border-bottom: none; }
.accordion-button { font-weight: 600; padding: 1.5rem; background: var(--white); color: var(--ink); box-shadow: none; }
.accordion-button:not(.collapsed) { background: linear-gradient(135deg, var(--green-light), var(--blue-light)); color: var(--blue-dark); }
.accordion-button:focus { box-shadow: none; border-color: transparent; }
.accordion-body { padding: 1.5rem; background: var(--soft); }
/* Contacto */
.contact-card {
background: linear-gradient(135deg, var(--white) 0%, var(--soft) 100%);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 2.5rem; height: 100%;
}
.form-control, .form-select {
border-radius: 12px; padding: 12px 16px; border: 1px solid #e1e8ed; transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 113, 184, 0.1); }
.form-label { font-weight: 600; margin-bottom: 8px; color: var(--ink); }
/* Footer */
footer {
background: linear-gradient(135deg, #0a1515 0%, #0f1a1a 100%);
color: #d5e2e2; position: relative; overflow: hidden;
}
footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--green), var(--blue)); }
footer a { color: #d5e2e2; text-decoration: none; transition: all 0.3s ease; }
footer a:hover { color: var(--white); transform: translateX(5px); }
footer h4, footer h6 { color: var(--white); }
footer ul li { margin-bottom: 10px; }
/* FAB WhatsApp + IG */
.social-fabs{
position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 12px; z-index: 1090;
}
.fab{
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 999px; color: #fff; text-decoration: none;
box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease; will-change: transform;
}
.fab:active{ transform: scale(.97); }
.fab i{ font-size: 1.45rem; line-height: 1; }
.fab-wa{ background: #25D366; }
.fab-ig{
background: radial-gradient(120% 120% at 20% 10%, #FFDC80 0%, #FCAF45 25%, #F56040 50%, #E1306C 75%, #833AB4 100%);
}
.fab-label{
position: absolute; right: 64px; top: 50%; transform: translateY(-50%) translateX(8px);
background: rgba(0,0,0,.85); color: #fff; padding: 8px 12px; border-radius: 10px; font-size: .92rem; white-space: nowrap;
pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.fab:hover .fab-label, .fab:focus-visible .fab-label{ opacity: 1; transform: translateY(-50%) translateX(0); }
.fab:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.22); transform: translateY(-2px); }
/* Efectos de scroll */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
/* Responsive */
@media (max-width: 992px) {
h1.display-5 { font-size: 2.5rem; }
.section { padding: 80px 0; }
.section-title { font-size: 2rem; }
/* Asegura que la navbar nunca provoque ancho extra */
.navbar .container { overflow-x: clip; }
}
@media (max-width: 768px) {
h1.display-5 { font-size: 2rem; }
.section { padding: 60px 0; }
.hero-illu { transform: none; margin-top: 2rem; }
.tile { width: 300px; flex: 0 0 300px; }
}
@media (max-width: 576px) {
.btn-brand, .btn-outline-brand { width: 100%; margin-bottom: 10px; }
.contact-card { padding: 1.5rem; }
.social-fabs{ right: 14px; bottom: 14px; gap: 10px; }
.fab{ width: 52px; height: 52px; }
.fab i{ font-size: 1.35rem; }
.fab-label{ font-size: .9rem; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* ========= Ajustes generales ========= */
#porque{ padding:80px 0; }
#porque .why{ padding-left:0; }
#porque .why-item{
display:flex; align-items:flex-start; gap:10px;
font-size:1.05rem; margin:12px 0;
will-change: transform, opacity;
transform: translateZ(0);
opacity:.98;
/* Zoom in/out rápido + vaivén leve */
animation: why-zoom .95s ease-in-out infinite alternate,
why-shift 1.6s ease-in-out infinite alternate;
}
#porque .why-item:nth-child(odd){
animation-delay: .05s, .1s;
}
#porque .why-item:nth-child(2){ animation-duration:.9s, 1.4s; }
#porque .why-item:nth-child(3){ animation-duration:.85s, 1.35s; }
#porque .why-item:nth-child(4){ animation-duration:.92s, 1.5s; }
#porque .why-item:nth-child(5){ animation-duration:.88s, 1.3s; }
#porque .why-item i{
color:#2ecc71; font-size:1.15rem; margin-top:2px;
animation: icon-pop 1.2s ease-in-out infinite alternate;
filter: drop-shadow(0 2px 6px rgba(46,204,113,.25));
}
/* ========= Título con barrido rápido ========= */
#porque .pro-title{
font-size:2.25rem; font-weight:800; color:#1f2d3a; margin-bottom:30px; position:relative; overflow:hidden;
}
#porque .pro-title::after{
content:""; position:absolute; left:0; bottom:-10px; height:5px; width:140px;
background: linear-gradient(90deg, #2ecc71, #3498db, #2ecc71);
background-size: 250% 100%;
border-radius:3px;
animation: bar-scan 1.4s ease-in-out infinite alternate;
}
/* ========= Imagen zoom-bounce rápido ========= */
#porque .img-zoom-wrap{ display:inline-block; }
#porque .img-zoom-pro{
display:block; width:100%; border-radius:16px; transform: translateZ(0);
animation: img-zoom .95s ease-in-out infinite alternate;
will-change: transform;
}
/* ========= Keyframes ========= */
@keyframes bar-scan{
0%{ background-position: 0% 0; transform: translateX(0); }
100%{ background-position: 100% 0; transform: translateX(8px); }
}
@keyframes why-zoom{
0% { transform: scale(0.985); }
100%{ transform: scale(1.015); }
}
@keyframes why-shift{
0% { translate: -3px 0; }
100%{ translate: 3px 0; }
}
@keyframes icon-pop{
0% { transform: scale(1); }
100%{ transform: scale(1.12); }
}
@keyframes img-zoom{
0% { transform: scale(0.985); }
100%{ transform: scale(1.03); }
}
/* ========= Responsive ========= */
@media (max-width:576px){
#porque{ padding:64px 0; }
#porque .pro-title{ font-size:1.95rem; }
#porque .why-item{ font-size:1rem; }
}
/* ========= Accesibilidad ========= */
@media (prefers-reduced-motion: reduce){
#porque *{ animation:none !important; transition:none !important; }
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* Ticker accesible + modal (se mantiene como en tu archivo) */
.ticker-viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none; }
.ticker-viewport::-webkit-scrollbar{ display:none; }
.ticker-track{ display:flex; gap:16px; padding:4px 6px; }
.tile{ scroll-snap-align:start; flex:0 0 auto; width:clamp(220px, 30vw, 360px); aspect-ratio:1/1;
border-radius:14px; overflow:hidden; background:#eaeaea; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.tile:hover img{ transform:scale(1.04); }
.ticker-btn{ width:44px; height:44px; border:0; border-radius:999px; display:grid; place-items:center; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.ticker-btn:active{ transform:scale(.98); }
.dots{ display:flex; align-items:center; gap:10px; }
.dots button{ width:9px; height:9px; border-radius:999px; border:0; background:#cfd4da; }
.dots button.active{ width:22px; height:9px; border-radius:999px; background:#111; }
.gmodal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1090; }
.gmodal.show{ display:flex; }
.gmodal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter:saturate(120%) blur(2px); }
#gImage{ position:relative; z-index:1; max-width:92vw; max-height:90vh; object-fit:contain; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); background:#000; }
.gmodal-close{ position:absolute; top:14px; right:16px; z-index:2; width:42px; height:42px; border:0; border-radius:999px; background:#fff; font-size:28px; line-height:1; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.gmodal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border:0; border-radius:999px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.gprev{ left:18px; } .gnext{ right:18px; }
@media (max-width: 576px){ .tile{ width:72vw; } .gmodal-nav{ width:40px; height:40px; } }