Preview de mixed.css
/* MIXED CSS PACK */
/* Template: estudiofinamor.com.ar/index.html */
/* Template mtime: 2025-09-05 14:15:37 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Domine:wght@400;600;700&family=Rubik:wght@300;400;500;600;700&display=swap */
/* 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root{
--brand: #0a3643;
--brand-2: #1a4e60;
--accent: #2bb673;
--dark: #0f172a;
--muted: #6b7280;
--light: #f7f7f8;
--shadow: 0 10px 25px rgba(0,0,0,.08);
--radius: 18px;
--transition: all .25s ease;
}
html{ scroll-behavior:smooth; }
body{
font-family: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:#243442;
line-height:1.7;
overflow-x:hidden;
background:#fff;
}
h1,h2,h3,h4,h5,h6{
font-family:'Domine', Georgia, serif;
color:#0f172a;
letter-spacing:-.01em;
}
/* NAVBAR */
.navbar{
padding:.9rem 0;
position:fixed; top:0; left:0; right:0; z-index:1030;
transition:var(--transition);
background:transparent;
}
.navbar .navbar-brand{
font-family:'Domine', Georgia, serif;
font-weight:700; letter-spacing:.3px; color:#282c34;
}
.navbar .nav-link{
color:#282c34; font-weight:500; margin:0 .25rem;
}
.navbar .nav-link:hover{ color:#e8f3f7; }
.navbar.scrolled{
background:#ffffff; box-shadow:0 8px 25px rgba(0,0,0,.06);
padding:.6rem 0;
}
.navbar.scrolled .navbar-brand{ color:var(--brand); }
.navbar.scrolled .nav-link{ color:#0f172a; }
.navbar.scrolled .nav-link:hover{ color:var(--brand-2); }
.navbar-dark .navbar-toggler-icon{
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-toggler-icon{
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(15,23,42,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar .navbar-collapse{ transition:var(--transition); }
@media (max-width: 991.98px){
.navbar .navbar-collapse{
background:rgba(255,255,255,.98);
backdrop-filter: blur(10px);
box-shadow:var(--shadow);
border-radius:14px;
padding: .75rem;
margin-top: 10px;
}
.navbar .nav-link{ color:#0f172a; }
}
/* HERO - CORRECCIONES PARA MÓVIL */
.hero{
min-height: 100vh;
background: linear-gradient(180deg, rgba(10,54,67,.55), rgba(10,54,67,.15)),
url('img/hero4.png') center/cover no-repeat;
display:flex; align-items:center;
color:#fff; position:relative;
padding-top: 76px; /* Espacio para la navbar fija */
}
.hero .lead{ color:#e8eef1; font-size:1.2rem; }
.btn-brand{
background:var(--brand);
color:#fff; border:none; border-radius:12px; padding: .9rem 1.3rem; font-weight:600;
box-shadow:0 10px 24px rgba(10,54,67,.25);
}
.btn-brand:hover{ background:#094151; color:#fff; transform: translateY(-1px); }
.btn-outline-light{ border:2px solid rgba(255,255,255,.8); color:#fff; border-radius:12px; }
.btn-outline-light:hover{ background:#fff; color:var(--brand); }
/* SECCIONES */
.section{ padding:80px 0; }
.section-light{ background:#fff; }
.section-muted{ background:var(--light); }
.section-title{ text-align:center; margin-bottom:2.5rem; }
.section-title:after{
content:''; display:block; width:80px; height:4px; border-radius:4px;
margin:1rem auto 0; background: linear-gradient(90deg,var(--brand),var(--brand-2));
}
/* Tarjetas */
.card-clean{
border:0; border-radius:var(--radius); box-shadow:var(--shadow); background:#fff;
transition:var(--transition);
}
.card-clean:hover{ transform: translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.12); }
/* Checks */
.check{ display:flex; align-items:flex-start; gap:.6rem; }
.check i{ color:var(--accent); font-size:1.15rem; margin-top:.2rem; }
/* Footer */
footer{ background: linear-gradient(135deg, #0a3643 0%, #0d2a33 100%); color:#cfe5ec; }
footer a{ color:#e6f6fb; text-decoration:none; }
footer a:hover{ text-decoration:underline; }
/* WhatsApp flotante */
.wa-float{
position:fixed; right:20px; bottom:22px; z-index:1060;
width:60px; height:60px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:#25D366; color:#fff; font-size:28px; box-shadow:0 15px 30px rgba(37,211,102,.45);
transition:var(--transition);
}
.wa-float:hover{ transform:scale(1.08); }
/* MEDIA QUERIES PARA RESPONSIVIDAD */
@media (max-width: 991.98px){
.hero{
background-attachment:scroll;
min-height: auto;
padding: 100px 0 60px;
}
.hero h1 {
font-size: 2.2rem;
}
.hero .lead {
font-size: 1.1rem;
}
.section {
padding: 60px 0;
}
}
@media (max-width: 767.98px){
.hero h1 {
font-size: 1.8rem;
}
.hero .btn {
width: 100%;
margin-bottom: 10px;
}
.hero .d-flex {
flex-direction: column;
}
.navbar-brand {
font-size: 1.1rem;
}
}
@media (max-width: 575.98px){
.hero {
text-align: center;
padding: 90px 0 50px;
}
.hero h1 {
font-size: 1.6rem;
}
.check {
justify-content: center;
}
}
/* QUIÉNES SOMOS - Responsive */
#quienes{
position: relative;
background:
radial-gradient(600px 200px at 10% 0%, rgba(10,54,67,.04), transparent 70%),
radial-gradient(500px 200px at 90% 100%, rgba(43,182,115,.05), transparent 70%);
}
#quienes .about-eyebrow{
display:inline-block; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
font-size:.8rem; padding:.35rem .6rem; border-radius:999px;
background:rgba(10,54,67,.08); color:#0a3643; margin-bottom:.5rem;
}
#quienes .about-title{ font-family:'Domine', Georgia, serif; letter-spacing:-.01em; }
#quienes .about-title::after{
content:''; display:block; width:96px; height:4px; border-radius:4px;
margin:.6rem 0 0; background:linear-gradient(90deg,var(--brand),var(--brand-2)); opacity:.85;
}
#quienes .about-icons .feature-item{
background:#fff; border-radius:12px; padding:.75rem 1rem;
box-shadow:0 3px 12px rgba(0,0,0,.06);
transition:transform .2s ease, box-shadow .2s ease;
font-weight:500; color:#0f172a;
}
#quienes .about-icons .feature-item:hover{
transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.1);
}
#quienes .about-icons .icon-circle{
flex:0 0 40px; height:40px; border-radius:50%;
background:linear-gradient(135deg, var(--brand), var(--brand-2));
display:flex; align-items:center; justify-content:center;
color:#fff; font-size:1.1rem; margin-right:.75rem;
}
#quienes .photo-frame{
overflow:hidden; aspect-ratio: 4 / 3; border:1px solid rgba(0,0,0,.06); background:#fff;
}
#quienes .photo-frame::after{
content:''; position:absolute; inset:0; border-radius:inherit;
box-shadow: inset 0 0 0 2px rgba(10,54,67,.06); pointer-events:none;
}
#quienes .photo-frame::before{
content:''; position:absolute; right:-20%; top:-20%; width:60%; height:60%;
transform:rotate(35deg);
background: linear-gradient(90deg, rgba(10,54,67,.06), rgba(10,54,67,0));
}
#quienes .about-badge{
position:absolute; left:14px; bottom:14px;
background: rgba(255,255,255,.9); color:#0f172a;
border:1px solid rgba(0,0,0,.08); backdrop-filter: blur(6px);
padding:.45rem .7rem; border-radius:12px; font-size:.9rem; font-weight:600;
box-shadow: var(--shadow);
}
@media (max-width: 991.98px){
#quienes .about-title::after{ margin:.5rem auto 0; }
#quienes .photo-frame{ aspect-ratio: 16 / 10; }
#quienes .about-badge {
font-size: 0.8rem;
padding: 0.35rem 0.6rem;
}
}
@media (max-width: 767.98px){
#quienes .about-title {
text-align: center;
}
#quienes .about-title::after {
margin: 0.5rem auto 0;
}
#quienes .photo-frame {
margin-top: 30px;
}
}
/* Botones sociales flotantes */
.social-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
gap: 15px;
align-items: flex-end;
}
.social-float { position: relative; transition: all 0.3s ease; transform-style: preserve-3d; }
.social-float:hover { transform: translateY(-5px) rotate(5deg) scale(1.1); }
.social-button {
display: block; width: 70px; height: 70px; border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); position: relative;
transition: all 0.3s ease; color: white; text-decoration: none;
animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
}
.social-button:hover { transform: scale(1.1); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); }
.social-icon {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px;
}
.social-pulse, .social-pulse-delayed {
position: absolute; width: 100%; height: 100%; border-radius: 50%; opacity: 0; animation: pulse 2s infinite;
}
.instagram-button { background: #E1306C; box-shadow: 0 10px 25px rgba(225, 48, 108, 0.3); }
.instagram-button:hover { background: #C13584; }
.instagram-pulse { background: rgba(225, 48, 108, 0.6); }
.instagram-pulse-delayed { background: rgba(193, 53, 132, 0.4); }
.whatsapp-button { background: #25D366; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3); }
.whatsapp-button:hover { background: #128C7E; }
.whatsapp-pulse { background: rgba(37, 211, 102, 0.6); }
.whatsapp-pulse-delayed { background: rgba(37, 211, 102, 0.4); }
.email-button { background: #EA4335; box-shadow: 0 10px 25px rgba(234, 67, 53, 0.3); }
.email-button:hover { background: #D44638; }
.email-pulse { background: rgba(234, 67, 53, 0.6); }
.email-pulse-delayed { background: rgba(212, 70, 56, 0.4); }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
@keyframes pulse { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.3); opacity: 0.4; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } }
@media (max-width: 768px) {
.social-float-container { bottom: 20px; right: 20px; }
.social-button { width: 60px; height: 60px; }
.social-icon { font-size: 25px; }
.social-tooltip { display: none; }
.wa-float {
width: 55px;
height: 55px;
font-size: 24px;
bottom: 90px;
right: 15px;
}
}
.social-tooltip {
position: absolute; right: 90px; top: 50%; transform: translateY(-50%);
background: white; color: #333; padding: 12px 15px; border-radius: 10px; font-size: 14px; font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transition: all 0.3s ease; width: 200px; text-align: center;
}
.social-tooltip small { display: block; font-size: 12px; color: #666; font-weight: normal; margin-top: 3px; }
.tooltip-arrow {
position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid white;
}
.social-float:hover .social-tooltip { opacity: 1; visibility: visible; right: 80px; }