Preview de mixed.css
/* MIXED CSS PACK */
/* Template: tusolucionacademica.com.ar/index.html */
/* Template mtime: 2026-01-21 14:05:38 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--bg: #FFFFFF;
--card: #F8F9FB;
--text: #0A1628;
--muted: #4A5568;
--line: rgba(26, 81, 146, .15);
--brand: #1A5192;
--brand-dark: #0D3857;
--purple: #711E4C;
--green: #759E25;
--orange: #C43C1B;
--red: #A33030;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
/* ✅ Fix principal: evita scroll horizontal en mobile (html + body) */
html,
body {
width: 100%;
overflow-x: hidden;
}
/* ✅ Evita que textos largos rompan el layout */
a,
.link-item,
.chip {
overflow-wrap: anywhere;
word-break: break-word;
}
/* ✅ Medios nunca más anchos que el viewport */
img,
svg,
video,
canvas {
max-width: 100%;
height: auto;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background:
radial-gradient(ellipse 1200px 600px at 20% -5%, rgba(26, 81, 146, .08), transparent 60%),
radial-gradient(ellipse 1000px 500px at 85% 8%, rgba(113, 30, 76, .05), transparent 55%),
radial-gradient(ellipse 800px 400px at 50% 100%, rgba(117, 158, 37, .04), transparent 50%),
#FFFFFF;
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: inherit;
text-decoration: none;
transition: all .3s ease
}
/* Navbar Premium */
.navbar {
background: rgba(255, 255, 255, .98);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--line);
box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
transition: all .4s cubic-bezier(.4, 0, .2, 1);
}
.navbar.scrolled {
background: rgba(255, 255, 255, 1);
box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}
.navbar-brand {
color: var(--text) !important;
font-weight: 800;
letter-spacing: -.02em;
transition: transform .3s ease;
}
.navbar-brand:hover {
transform: translateY(-2px)
}
.nav-link {
color: var(--muted) !important;
font-weight: 600;
position: relative;
padding: .5rem 1rem !important;
transition: all .3s ease;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--brand), var(--purple));
transform: translateX(-50%);
transition: width .3s ease;
}
.nav-link:hover {
color: var(--text) !important
}
.nav-link:hover::after {
width: 70%
}
.brand-logo {
width: 33px;
height: 33px;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--line);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
transition: all .3s ease;
}
.brand-logo:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(26, 81, 146, .2);
}
.brand-logo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Botones Premium */
.btn-brand {
background: linear-gradient(135deg, var(--brand), var(--purple));
border: 0;
color: #fff;
font-weight: 700;
box-shadow: 0 8px 24px rgba(26, 81, 146, .3);
position: relative;
overflow: hidden;
transition: all .4s cubic-bezier(.4, 0, .2, 1);
}
.btn-brand::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
transition: left .6s ease;
}
.btn-brand:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(26, 81, 146, .4);
}
.btn-brand:hover::before {
left: 100%
}
.btn-outline-soft {
border: 2px solid var(--line);
color: var(--text);
background: #fff;
font-weight: 700;
transition: all .3s ease;
}
.btn-outline-soft:hover {
background: var(--card);
border-color: var(--brand);
color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}
.section {
padding: 100px 0
}
.eyebrow {
display: inline-block;
font-size: .8rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand);
border: 1px solid var(--line);
padding: .4rem .9rem;
border-radius: 999px;
background: rgba(26, 81, 146, .05);
font-weight: 800;
transition: all .3s ease;
}
.eyebrow:hover {
background: rgba(26, 81, 146, .1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(26, 81, 146, .1);
}
.section-title {
font-weight: 900;
letter-spacing: -.03em;
margin-top: 1rem;
margin-bottom: .7rem;
font-size: clamp(2rem, 5vw, 3.5rem);
color: var(--text);
background: linear-gradient(135deg, var(--text) 0%, var(--brand) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
color: var(--muted);
max-width: 760px;
margin: 0 auto;
font-size: 1.1rem;
line-height: 1.8;
}
/* Cards Premium */
.card-soft {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
transition: all .4s cubic-bezier(.4, 0, .2, 1);
position: relative;
overflow: hidden;
}
.card-soft::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--brand), transparent);
opacity: 0;
transition: opacity .3s ease;
}
.card-soft:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, .15);
border-color: rgba(26, 81, 146, .3);
}
.card-soft:hover::before {
opacity: 1
}
/* Hero Espectacular */
.hero {
padding-top: 140px;
padding-bottom: 90px;
position: relative;
/* ✅ Fix: el pseudo-elemento con blur no genera overflow en mobile */
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(26, 81, 146, .12), transparent 70%);
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
transform: translateX(-50%) scale(1);
opacity: .7
}
50% {
transform: translateX(-50%) scale(1.15);
opacity: 1
}
}
.hero h1 {
font-weight: 950;
letter-spacing: -.04em;
line-height: 1.05;
font-size: clamp(2.2rem, 6vw, 4.5rem);
margin-bottom: 1.5rem;
color: var(--text);
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.hero .lead {
color: var(--muted);
font-size: 1.15rem;
line-height: 1.8;
animation: fadeInUp 1s ease-out .2s both;
}
.hero-bullets {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: 24px;
animation: fadeInUp 1s ease-out .4s both;
}
.hero-pill {
border: 1px solid var(--line);
background: #fff;
border-radius: 999px;
padding: .5rem .9rem;
color: var(--text);
font-size: .9rem;
font-weight: 700;
user-select: none;
transition: all .3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.hero-pill:hover {
background: rgba(26, 81, 146, .08);
border-color: var(--brand);
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(26, 81, 146, .15);
}
.hero-img {
width: 100%;
max-width: 540px;
aspect-ratio: 1/1;
border-radius: 28px;
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
margin-left: auto;
position: relative;
animation: fadeInRight 1s ease-out .6s both;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(40px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
.hero-img::before {
content: '';
position: absolute;
inset: -3px;
background: linear-gradient(135deg, var(--brand), var(--purple));
border-radius: 28px;
z-index: -1;
opacity: .2;
filter: blur(20px);
}
.hero-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .1));
}
/* Icon Badges */
.icon-badge {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: linear-gradient(135deg, rgba(26, 81, 146, .1), rgba(26, 81, 146, .15));
border: 1px solid rgba(26, 81, 146, .25);
color: var(--brand);
flex: 0 0 auto;
font-size: 1.3rem;
transition: all .3s ease;
position: relative;
}
.icon-badge::before {
content: '';
position: absolute;
inset: 0;
background: inherit;
border-radius: inherit;
opacity: 0;
filter: blur(12px);
transition: opacity .3s ease;
}
.card-soft:hover .icon-badge {
transform: scale(1.1);
}
.card-soft:hover .icon-badge::before {
opacity: .5
}
.icon-badge.whats {
background: linear-gradient(135deg, rgba(117, 158, 37, .1), rgba(117, 158, 37, .15));
border-color: rgba(117, 158, 37, .25);
color: var(--green);
}
.service-item h5,
.why-item h5 {
margin: 0;
font-weight: 900;
font-size: 1.15rem;
letter-spacing: -.01em;
color: var(--text);
}
.muted {
color: var(--muted)
}
.divider {
border-top: 1px solid var(--line);
opacity: .8;
}
/* Formulario Premium */
.contact-box .form-control,
.contact-box .form-select {
background: #fff;
border: 2px solid var(--line);
color: var(--text);
border-radius: 16px;
padding: 1rem 1.1rem;
font-weight: 500;
transition: all .3s ease;
}
.contact-box .form-control::placeholder {
color: var(--muted);
opacity: .7
}
.contact-box .form-control:focus,
.contact-box .form-select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 .25rem rgba(26, 81, 146, .1), 0 4px 16px rgba(26, 81, 146, .15);
background: #fff;
color: var(--text);
transform: translateY(-2px);
}
.contact-box .form-label {
font-weight: 800;
font-size: .9rem;
letter-spacing: .02em;
margin-bottom: .5rem;
color: var(--text);
}
/* Accordion Premium */
.accordion-button {
background: #fff;
border-radius: 18px !important;
border: 2px solid var(--line);
color: var(--text);
font-weight: 800;
padding: 1.2rem 1.3rem;
font-size: 1.05rem;
transition: all .3s ease;
}
.accordion-button:hover {
background: var(--card);
border-color: var(--brand);
transform: translateX(4px);
}
.accordion-button:not(.collapsed) {
background: linear-gradient(135deg, rgba(26, 81, 146, .1), rgba(113, 30, 76, .08));
border-color: var(--brand);
color: var(--text);
}
.accordion-item {
background: transparent;
border: 0;
margin-bottom: 1rem;
}
.accordion-body {
background: #fff;
border: 2px solid var(--line);
border-top: 0;
border-radius: 0 0 18px 18px;
color: var(--muted);
padding: 1.2rem 1.3rem;
line-height: 1.8;
}
.accordion-button:not(.collapsed) {
box-shadow: none
}
/* Footer Premium (original, no se usa porque abajo hay footer pro2) */
footer {
border-top: 1px solid var(--line);
padding: 48px 0;
color: var(--muted);
background: var(--card);
}
.small-links a {
color: var(--muted);
text-decoration: none;
transition: all .3s ease;
font-weight: 600;
}
.small-links a:hover {
color: var(--brand);
transform: translateX(3px);
}
/* Galería - MANTENER EXACTAMENTE IGUAL */
.gal-gallery .carousel {
max-width: 980px;
margin-inline: auto;
position: relative
}
.gal-frame {
height: clamp(220px, 48vh, 440px);
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.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: 50px;
height: 50px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
background: rgba(0, 0, 0, .55);
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: 60% 60%
}
.gal-gallery .carousel-indicators {
z-index: 10;
bottom: -50px
}
.gal-gallery .carousel-indicators button {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, .5);
border: none;
}
.gal-gallery .carousel-indicators button.active {
background: #000
}
.gal-gallery {
padding-bottom: 56px
}
#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: 44px;
height: 44px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
color: #fff;
font-size: 30px;
line-height: 44px;
text-align: center;
z-index: 5;
cursor: pointer;
}
.gal-lightbox-nav:hover {
background: rgba(255, 255, 255, .28)
}
.gal-lightbox-nav.gal-prev {
left: 10px
}
.gal-lightbox-nav.gal-next {
right: 10px
}
@media (max-width:991.98px) {
.hero {
padding-top: 110px
}
.hero-img {
max-width: 520px;
margin: 24px auto 0
}
.section {
padding: 70px 0
}
}
@media (max-width:575.98px) {
.gal-frame {
height: clamp(200px, 40vh, 360px)
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root{
/* Colores del logo */
--c-blue:#2f6bff;
--c-mag:#b0126b;
--c-orange:#ff6a00;
--c-green:#54c233;
--text:#0b0f14; /* negro */
--muted:rgba(11,15,20,.68);
--line:rgba(11,15,20,.12);
--card:rgba(255,255,255,.55);
}
/* FOOTER REAL: compacto + pro */
.footer-pro2{
position:relative;
padding: 26px 0 16px;
color: var(--text);
border-top: 1px solid var(--line);
overflow:hidden;
/* Fondo suave (no gigante, no empasta) */
background:
radial-gradient(900px 260px at 10% -10%, rgba(47,107,255,.22), transparent 60%),
radial-gradient(900px 260px at 90% -10%, rgba(176,18,107,.18), transparent 60%),
radial-gradient(900px 260px at 85% 120%, rgba(84,194,51,.18), transparent 60%),
radial-gradient(900px 260px at 15% 120%, rgba(255,106,0,.18), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
}
/* Barra fina con degradé (marca) */
.footer-pro2::before{
content:"";
position:absolute;
top:0; left:0; right:0;
height:4px;
background: linear-gradient(90deg, var(--c-blue), var(--c-mag), var(--c-orange), var(--c-green));
}
.footer-pro2 .wrap{
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 16px 18px;
box-shadow: 0 10px 26px rgba(0,0,0,.08);
backdrop-filter: blur(10px);
}
.footer-pro2 .brand{
display:flex;
align-items:center;
gap:10px;
margin-bottom: 6px;
}
.footer-pro2 .logo-dot{
width: 34px;
height: 34px;
border-radius: 12px;
background: linear-gradient(135deg, var(--c-blue), var(--c-mag), var(--c-orange), var(--c-green));
box-shadow: 0 10px 18px rgba(0,0,0,.10);
display:grid;
place-items:center;
flex: 0 0 auto;
}
.footer-pro2 .logo-dot svg{ width:18px; height:18px; display:block; }
.footer-pro2 .brand h6{
margin:0;
font-weight:800;
letter-spacing:.2px;
font-size: 1rem;
line-height: 1.1;
}
.footer-pro2 .tagline{
margin:0;
color: var(--muted);
font-weight:600;
font-size:.92rem;
}
.footer-pro2 .coltitle{
font-weight:800;
margin: 2px 0 10px;
font-size:.95rem;
}
.footer-pro2 .links{
display:flex;
flex-direction:column;
gap:8px;
}
.footer-pro2 a{
color: var(--text);
text-decoration:none;
font-weight:650;
}
/* Link tipo “fila” compacta */
.footer-pro2 .link-item{
display:flex;
align-items:center;
gap:10px;
padding:8px 10px;
border-radius: 12px;
border: 1px solid rgba(11,15,20,.10);
background: rgba(255,255,255,.45);
transition: transform .12s ease, background .12s ease, border-color .12s ease;
width: fit-content;
max-width: 100%;
overflow-wrap:anywhere;
word-break:break-word;
}
.footer-pro2 .link-item:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.70);
border-color: rgba(11,15,20,.18);
}
.footer-pro2 .ico{
width: 16px;
height: 16px;
opacity: .9;
flex: 0 0 auto;
}
/* Chips de secciones compactos */
.footer-pro2 .chips{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.footer-pro2 .chip{
padding:7px 10px;
border-radius: 999px;
border: 1px solid rgba(11,15,20,.10);
background: rgba(255,255,255,.45);
font-weight:750;
font-size: .9rem;
transition: background .12s ease, transform .12s ease;
}
.footer-pro2 .chip:hover{
background: rgba(255,255,255,.70);
transform: translateY(-1px);
}
.footer-pro2 .divider{
height:1px;
background: var(--line);
margin: 14px 0 10px;
}
.footer-pro2 .bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
color: var(--muted);
font-weight:600;
font-size: .9rem;
}
/* Responsive: en mobile apila prolijo */
@media (max-width: 991px){
.footer-pro2{ padding: 22px 0 14px; }
.footer-pro2 .wrap{ padding: 14px 14px; }
.footer-pro2 .link-item{ width: 100%; }
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* Variables propias del widget (no te pisa el :root del sitio) */
:root{
--sa-brand:#1A5192; /* azul logo */
--sa-purple:#711E4C; /* violeta logo */
--sa-border:#e3e6ea;
--sa-bg:#ffffff;
--sa-muted:#6c757d;
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.wa-btn{
width:60px;
height:60px;
border-radius:50%;
border:none;
/* Verde oficial WhatsApp, queda bien siempre */
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 .3s, box-shadow .3s;
}
.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);
max-width:calc(100vw - 24px);
background:var(--sa-bg);
border-radius:18px;
border:1px solid var(--sa-border);
box-shadow:0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
transform:translateY(10px);
opacity:0;
transition:.3s;
}
.wa-card[aria-modal="true"]{ transform:none; opacity:1; }
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:linear-gradient(135deg,var(--sa-brand),var(--sa-purple));
color:#fff;
}
.wa-avatar{
width:40px;
height:40px;
background:#fff;
border-radius:10px;
display:grid;
place-items:center;
overflow:hidden;
}
.wa-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.wa-title{ font-weight:800; letter-spacing:-.2px; }
.wa-status{ font-size:.85rem; opacity:.92; }
.wa-close{
margin-left:auto;
border:none;
background:transparent;
color:#fff;
font-size:24px;
cursor:pointer;
line-height:1;
}
.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:#ffffff;
border:1px solid var(--sa-border);
align-self:flex-start;
}
.wa-user{
background:#eaf2ff;
border:1px solid rgba(26,81,146,.18);
align-self:flex-end;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid var(--sa-border);
background:#ffffff;
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid var(--sa-border);
font-family:inherit;
outline:none;
}
.wa-compose textarea:focus{
border-color: rgba(26,81,146,.55);
box-shadow: 0 0 0 3px rgba(26,81,146,.12);
}
.wa-send{
background:var(--sa-brand);
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
}
.wa-send:hover{ filter:brightness(1.05); }
@media(max-width:480px){
.wa-card{ width:calc(100vw - 24px); }
}