Preview de mixed.css
/* MIXED CSS PACK */
/* Template: giabellasalonbeauty.com.ar/index.html */
/* Template mtime: 2025-11-07 20:05:50 */
/* 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://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--brand: #c8a860; /* dorado logo */
--brand-light: #e8d6b0;
--brand-dark: #a08540;
--brand-2: #f5e7cf; /* crema logo */
--ink: #1a1a1a;
--soft: #faf7f1;
--white: #ffffff;
--transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
body {
color: var(--ink);
background: var(--white);
font-family: 'Inter', sans-serif;
font-weight: 400;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 600;
line-height: 1.2;
}
.btn-brand {
background: var(--brand);
border-color: var(--brand);
color: var(--white);
font-weight: 500;
padding: 12px 28px;
border-radius: 50px;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(200, 168, 96, 0.3);
}
.btn-brand:hover {
background: var(--brand-dark);
border-color: var(--brand-dark);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(200, 168, 96, 0.4);
}
.btn-outline-brand {
background: transparent;
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 500;
padding: 10px 26px;
border-radius: 50px;
transition: var(--transition);
}
.btn-outline-brand:hover {
background: var(--brand);
border-color: var(--brand);
color: var(--white);
transform: translateY(-3px);
}
.text-brand {
color: var(--brand);
}
.section {
padding: 100px 0;
position: relative;
}
.section-bg {
background: var(--soft);
}
.section-title {
position: relative;
margin-bottom: 60px;
}
.section-title:after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
transform: none;
width: 80px;
height: 3px;
background: var(--brand);
}
.section-title.center { text-align:center; }
.section-title.center:after {
left: 50%;
transform: translateX(-50%);
}
.navbar {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
padding: 15px 0;
transition: var(--transition);
}
.navbar.scrolled {
padding: 10px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.5rem;
}
.nav-link {
font-weight: 500;
position: relative;
margin: 0 8px;
transition: var(--transition);
}
.nav-link:after {
left: 10%; width: 0;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--brand);
transition: var(--transition);
}
.nav-link:hover, .nav-link.active {
color: var(--brand) !important;
}
.nav-link:hover:after, .nav-link.active:after {
width: 80%;
}
/* HERO */
.hero {
padding: 160px 0 100px;
background: linear-gradient(135deg, var(--brand-2) 0%, #fff 100%);
position: relative;
overflow: hidden;
}
.hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('img/pattern.svg') no-repeat;
background-size: cover;
opacity: 0.1;
}
.hero h1 {
font-weight: 700;
font-size: 3.5rem;
margin-bottom: 20px;
line-height: 1.1;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
max-width: 600px;
}
.hero-img {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
transition: var(--transition);
}
.hero-img:hover {
transform: perspective(1000px) rotateY(0) rotateX(0);
}
/* Servicios */
.svc-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
height: 100%;
transition: var(--transition);
border: 1px solid rgba(0, 0, 0, 0.03);
}
.svc-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.svc-ico-wrap {
display: grid;
place-items: center;
padding: 40px 0 20px;
background: linear-gradient(135deg, var(--brand-2) 0%, #fff 100%);
}
.svc-ico {
width: 80px;
height: 80px;
fill: none;
stroke: var(--brand);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: var(--transition);
}
.svc-card:hover .svc-ico {
transform: scale(1.1);
stroke: var(--brand-dark);
}
.svc-body {
padding: 20px 25px 30px;
}
.svc-body h3 {
font-size: 1.3rem;
margin: 0 0 12px;
font-weight: 600;
}
.svc-body p {
margin: 0;
color: #666;
}
/* Elegirnos */
.check {
color: var(--brand);
margin-right: 10px;
font-size: 1.2rem;
}
.feature-list li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
/* ====== TICKER 500x500: auto + manual ====== */
#trabajos {
position: relative;
}
#trabajos .frame {
position: relative;
background: #fff;
border-radius: 20px;
overflow: hidden;
padding: 20px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
#trabajos .viewport {
overflow: hidden;
}
#trabajos .track {
display: flex;
gap: 20px;
will-change: transform;
transition: transform 0.5s ease;
}
#trabajos .item {
flex: 0 0 auto;
width: min(500px, 86vw);
height: min(500px, 86vw);
display: grid;
place-items: center;
background: #fff;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: var(--transition);
}
#trabajos .item:hover {
transform: scale(1.02);
}
#trabajos .item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
#trabajos .item:hover img {
transform: scale(1.05);
}
#trabajos .ctrl {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
user-select: none;
transition: var(--transition);
z-index: 10;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
#trabajos .ctrl:hover {
background: #fff;
transform: translateY(-50%) scale(1.1);
}
#trabajos .prev {
left: 20px;
}
#trabajos .next {
right: 20px;
}
/* Contacto */
.contact-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
padding: 40px;
height: 100%;
}
.form-control, .form-select {
border-radius: 12px;
padding: 12px 16px;
border: 1px solid #e0e0e0;
transition: var(--transition);
}
.form-control:focus, .form-select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 0.2rem rgba(200, 168, 96, 0.2);
}
.input-hp {
position: absolute;
left: -10000px;
top: -10000px;
}
.contact-info li {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.contact-info li i {
margin-right: 10px;
color: var(--brand);
width: 20px;
text-align: center;
}
/* Footer */
footer {
background: #111;
color: #ddd;
padding: 60px 0 30px;
}
footer a {
color: #ddd;
text-decoration: none;
transition: var(--transition);
}
footer a:hover {
color: var(--brand);
}
.footer-brand {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.5rem;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: var(--transition);
}
.social-links a:hover {
background: var(--brand);
transform: translateY(-3px);
}
/* Animaciones personalizadas */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.8s ease forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
/* Responsive */
@media (max-width: 992px) {
.hero h1 {
font-size: 2.8rem;
}
.section {
padding: 80px 0;
}
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1.1rem;
}
.section {
padding: 60px 0;
}
.contact-card {
padding: 30px 20px;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* ===== Hotfix: evitar scroll horizontal en mobile y mantener el toggler visible ===== */
html, body { max-width:100%; overflow-x:hidden; }
* { box-sizing: border-box; }
/* La navbar a veces se "desborda" por el alto del logo + texto largo */
@media (max-width: 575.98px){
.navbar { padding: 10px 0 !important; }
.navbar-brand img { height: 44px !important; width: auto !important; }
/* Ocultamos el "Salón Beauty" para que no empuje el botón hamburguesa */
.navbar-brand .text-muted { display: none !important; }
/* Evitar que la fila interna genere ancho extra si algo no entra */
.navbar .container { overflow-x: clip; }
}
/* Algunos efectos con blur/conic-gradients podían provocar desborde lateral */
#elegirnos { overflow: hidden; }
/* Track del ticker jamás debería forzar scroll del body */
#trabajos .viewport { overflow: hidden; }
#trabajos .track { will-change: transform; }
/* Imagen de marca grande en desktop sigue ok, pero limitamos posibles desbordes */
.navbar-brand img { max-width: 100%; height: 64px; }
/* ===== INLINE <style> BLOCK #3 ===== */
/* Solo para el HERO */
#inicio .hero-img{
background: transparent !important; /* quita el panel blanco */
box-shadow: none !important; /* quita sombras del panel */
border-radius: 0 !important; /* sin bordes redondeados del panel */
padding: 0 !important; /* sin padding extra */
}
#inicio .hero-img img{
width: auto; /* no estirar horizontalmente */
max-width: 100%; /* respeta el contenedor */
height: auto; /* respeta proporción */
object-fit: contain !important; /* sin recorte */
max-height: 480px; /* límite visual opcional en desktop */
}
@media (max-width: 991.98px){
#inicio .hero-img img{ max-height: 360px; }
}
/* ===== INLINE <style> BLOCK #4 ===== */
:root{
--brand: var(--primary, #d9a441);
--brand-dark: var(--primary-dark, #b3852f);
--ink: var(--ink, #0f1222);
--muted: var(--muted, #7a8199);
--soft: var(--soft, #f7f7fb);
}
#bienvenidos .bnv-title{ font-weight:900; letter-spacing:.2px; margin:0 0 10px; position:relative; display:inline-block; }
#bienvenidos .bnv-title::after{
content:""; display:block; height:3px; width:64%; margin:10px 0 0; border-radius:2px;
background: linear-gradient(90deg, var(--brand), var(--brand-dark));
}
#bienvenidos .bnv-lead{ color:var(--ink); opacity:.9; font-size:clamp(1.02rem,1.2vw,1.12rem); margin:10px 0 14px; }
#bienvenidos .bnv-list{ list-style:none; padding:0; margin:0 0 14px; }
#bienvenidos .bnv-list li{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px dashed rgba(15,18,34,.10); color:var(--ink); }
#bienvenidos .bnv-list li:first-child{ border-top:none; }
#bienvenidos .bnv-list i{ color:var(--brand-dark); margin-top:2px; }
#bienvenidos .bnv-cta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#bienvenidos .bnv-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:.65rem 1rem; border-radius:12px;
text-decoration:none; font-weight:800; background:linear-gradient(180deg, var(--brand), var(--brand-dark));
color:#fff; box-shadow:0 12px 28px rgba(15,18,34,.16); transition: transform .15s ease, box-shadow .15s ease;
}
#bienvenidos .bnv-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(15,18,34,.20); }
#bienvenidos .bnv-note{ color:var(--muted); font-size:.95rem; }
#bienvenidos .bnv-media{
position:relative; border-radius:22px; overflow:hidden; margin:0; background:#eee; border:1px solid rgba(0,0,0,.08);
box-shadow:0 16px 40px rgba(15,18,34,.10); min-height:clamp(260px,38vw,440px);
}
#bienvenidos .bnv-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); }
@media (max-width: 991.98px){
#bienvenidos .bnv-media{ min-height:260px; }
#bienvenidos .bnv-title::after{ width:46%; }
}
/* ===== INLINE <style> BLOCK #5 ===== */
/* Panel suave */
#quienes.soft-panel{ padding-block:40px; }
#quienes .container{
background: rgba(255, 249, 237, 0.65);
border: 1px solid rgba(180,150,90,.18);
border-radius: 18px;
box-shadow: 0 18px 48px rgba(0,0,0,.06);
padding: 28px 24px;
}
/* Caja del video MÁS CHICA */
#quienes .media-wrap{
background:#fff;
border:1px solid rgba(0,0,0,.06);
max-width: 420px; /* <-- tamaño tope desktop */
width: 100%;
}
#quienes .media-video{
display:block;
width:100%;
height:auto; /* sin recortes */
object-fit: contain; /* respeta contenido */
}
@media (max-width: 991.98px){
#quienes .container{ padding:22px 18px; border-radius:16px; }
#quienes .media-wrap{ max-width: 320px; } /* <-- tamaño tope mobile */
}
/* ===== INLINE <style> BLOCK #6 ===== */
.section {
padding: 80px 0;
}
.section-bg {
background-color: var(--soft);
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--ink);
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(to right, var(--brand), var(--brand-dark));
margin: 15px auto 0;
border-radius: 2px;
}
.text-muted {
font-size: 1.2rem;
margin-bottom: 3rem;
color: #6c757d;
}
.svc-card {
background: white;
border-radius: 12px;
padding: 2.5rem 1.5rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.03);
position: relative;
overflow: hidden;
}
.svc-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, var(--brand), var(--brand-dark));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.svc-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.svc-card:hover::before {
transform: scaleX(1);
}
.svc-ico-wrap {
width: 110px;
height: 110px;
background: linear-gradient(135deg, var(--brand), var(--brand));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
transition: transform 0.3s ease;
}
.svc-card:hover .svc-ico-wrap {
transform: scale(1.1);
}
.svc-ico {
font-size: 3rem;
color: #fff;
}
.svc-body h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--ink);
font-weight: 600;
}
.svc-body p {
color: #666;
line-height: 1.6;
font-size: 1rem;
margin: 0;
}
/* Animaciones */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive */
@media (max-width: 768px) {
.section {
padding: 60px 0;
}
.section-title {
font-size: 2rem;
}
.svc-card {
padding: 2rem 1rem;
}
.svc-ico-wrap {
width: 90px;
height: 90px;
}
.svc-ico {
font-size: 2.5rem;
}
}
/* ===== INLINE <style> BLOCK #7 ===== */
/* ===== Scope exclusivo ===== */
:root{
--brand: var(--primary, #d9a441); /* dorado del logo */
--brand-dark: var(--primary-dark, #b3852f);
--ink: var(--ink, #0f1222);
--soft: var(--soft, #f7f7fb);
--muted: var(--muted, #7a8199);
}
#promos-pro .section-title{
font-weight:900; letter-spacing:.2px; position:relative; display:inline-block;
}
#promos-pro .section-title::after{
content:""; display:block; height:3px; width:64%; margin:10px auto 0; border-radius:2px;
background: linear-gradient(90deg, var(--brand), var(--brand-dark));
}
#promos-pro .section-subtitle{ color:var(--muted); margin:8px 0 0; }
/* ===== Card editorial ===== */
#promos-pro .hero-card{
position:relative; border-radius:28px; overflow:hidden;
border:1px solid rgba(15,18,34,.08);
box-shadow: 0 18px 60px rgba(15,18,34,.14);
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.75));
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
margin-bottom:clamp(18px,3vw,28px);
}
#promos-pro .hero-card::before{
content:""; position:absolute; inset:-1px; z-index:-1; border-radius:30px;
background: conic-gradient(from 120deg,
color-mix(in oklab, var(--brand) 60%, transparent),
color-mix(in oklab, var(--brand-dark) 60%, transparent),
color-mix(in oklab, var(--brand) 60%, transparent));
filter: blur(14px); opacity:.65;
}
#promos-pro .hc-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:0; }
@media (max-width: 991.98px){ #promos-pro .hc-grid{ grid-template-columns: 1fr; } }
/* Col izquierda: contenido */
#promos-pro .hc-body{ padding: clamp(22px, 3vw, 34px); }
#promos-pro .kicker{
display:inline-flex; align-items:center; gap:10px;
padding:.42rem .72rem; border-radius:12px; font-weight:800; letter-spacing:.4px;
text-transform:uppercase; font-size:.9rem; color: var(--ink);
background: color-mix(in oklab, var(--brand) 15%, white);
border:1px solid color-mix(in oklab, var(--brand) 35%, transparent);
}
#promos-pro .kicker i{ color:var(--brand-dark); }
#promos-pro .hc-title{ margin:12px 0 6px; font-weight:900; letter-spacing:.2px; }
#promos-pro .hc-sub{ color:var(--muted); margin:0 0 12px; }
#promos-pro .badge-line{ display:flex; gap:8px; flex-wrap:wrap; margin:.3rem 0 1rem; }
#promos-pro .pill{
background:#fff; border:1px dashed color-mix(in oklab, var(--brand) 45%, transparent);
color:var(--ink); font-weight:700; border-radius:999px; padding:.38rem .7rem;
display:inline-flex; align-items:center; gap:8px;
}
#promos-pro .pill .gift{ color:var(--brand-dark); }
#promos-pro .list{ margin:0 0 12px; padding:0; list-style:none; border-top:1px dashed rgba(15,18,34,.12); }
#promos-pro .list li{
display:flex; gap:12px; align-items:flex-start; padding:10px 0;
border-bottom:1px dashed rgba(15,18,34,.08);
}
#promos-pro .list i{ color:var(--brand-dark); margin-top:2px; }
#promos-pro .price{
display:flex; align-items:center; gap:12px; margin-top:8px;
font-weight:900; font-size:clamp(1.2rem, 2.5vw, 1.6rem); color:var(--ink);
}
#promos-pro .price .tag{
background: linear-gradient(180deg, var(--brand), var(--brand-dark));
color:#fff; padding:.45rem .8rem; border-radius:12px; letter-spacing:.4px;
}
#promos-pro .cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
#promos-pro .btn-wa{
display:inline-flex; align-items:center; gap:8px; font-weight:800;
background: color-mix(in oklab, var(--brand) 12%, white);
border:1px solid color-mix(in oklab, var(--brand) 35%, transparent);
color:var(--ink); padding:.6rem .95rem; border-radius:14px; text-decoration:none;
}
#promos-pro .btn-wa i{ color:#25D366; }
/* Col derecha: collage */
#promos-pro .hc-media{
position:relative; min-height:320px; overflow:hidden;
background: radial-gradient(60% 60% at 30% 30%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 60%),
radial-gradient(50% 50% at 80% 70%, color-mix(in oklab, var(--brand-dark) 12%, transparent), transparent 70%);
}
#promos-pro .stack{ position:absolute; inset:0; display:grid; place-items:center; padding:24px; }
#promos-pro .shot{
position:absolute; border-radius:18px; overflow:hidden; border:1px solid rgba(0,0,0,.08);
box-shadow: 0 16px 40px rgba(15,18,34,.2); transform: translateZ(0);
}
#promos-pro .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
#promos-pro .shot.s1{ width:56%; top:8%; left:8%; rotate:-4deg; }
#promos-pro .shot.s2{ width:48%; bottom:10%; right:6%; rotate:6deg; }
#promos-pro .shot.s3{ width:38%; bottom:6%; left:12%; rotate:-10deg; }
/* ===== INLINE <style> BLOCK #8 ===== */
/* ===== Scope exclusivo a #elegirnos ===== */
#elegirnos{ position:relative; isolation:isolate; }
/* Usa tu paleta si existe; si no, fallback */
:root{
--brand: var(--primary, #7b5cff);
--brand-dark: var(--primary-dark, #5a3fe6);
--soft: var(--soft, #f7f7fb);
--ink: var(--ink, #0f1222);
--muted: var(--muted, #7a8199);
}
#elegirnos .section-title{
font-weight:800; letter-spacing:.2px; margin:0 0 8px;
position:relative; display:inline-block;
}
#elegirnos .section-title::after{
content:""; display:block; height:3px; width:64%;
margin:10px auto 0; border-radius:2px;
background: linear-gradient(90deg, var(--brand), var(--brand-dark));
}
#elegirnos .section-subtitle{ color:var(--muted); margin:0; }
/* Aura decorativa sutil (no invade otros bloques) */
#elegirnos .e-aura{
position:absolute; inset:auto; pointer-events:none; z-index:-1;
width:min(54vw,720px); height:min(54vw,720px);
filter:blur(60px); opacity:.28;
background:
radial-gradient(40% 40% at 25% 25%, color-mix(in oklab, var(--brand) 70%, white), transparent 60%),
radial-gradient(36% 36% at 75% 70%, color-mix(in oklab, var(--brand-dark) 65%, white), transparent 70%);
transform:translateZ(0);
}
#elegirnos .e-aura.a1{ top:-18%; left:-12%; }
#elegirnos .e-aura.a2{ bottom:-22%; right:-10%; }
/* Panel vidrio con borde sutil */
#elegirnos .e-panel{
position:relative; border-radius:24px;
background: rgba(255,255,255,.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border:1px solid rgba(15,18,34,.06);
box-shadow: 0 8px 26px rgba(15,18,34,.06), inset 0 1px 0 rgba(255,255,255,.35);
padding:clamp(16px,2.8vw,28px);
}
#elegirnos .e-panel::before{
content:""; position:absolute; inset:-1px; border-radius:26px; z-index:-1;
background: conic-gradient(from 120deg, color-mix(in oklab, var(--brand) 50%, transparent), color-mix(in oklab, var(--brand-dark) 50%, transparent), color-mix(in oklab, var(--brand) 50%, transparent));
filter:blur(12px); opacity:.55;
}
/* Grid */
#elegirnos .e-grid{
display:grid; gap:clamp(12px,2vw,20px);
grid-template-columns: repeat(12, 1fr);
}
#elegirnos .e-pill{
grid-column: span 6;
border-radius:20px; padding: clamp(14px,1.8vw,18px);
background:#fff; border:1px solid rgba(15,18,34,.06);
box-shadow: 0 8px 20px rgba(15,18,34,.05);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#elegirnos .e-pill:hover{
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(15,18,34,.10);
border-color: rgba(15,18,34,.12);
}
/* Icon badge */
#elegirnos .e-ico{
width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
background: linear-gradient(180deg, var(--brand), var(--brand-dark)); color:#fff;
box-shadow: 0 8px 18px color-mix(in oklab, var(--brand) 35%, transparent);
margin-bottom:8px;
}
#elegirnos .e-ico i{ font-size:20px; line-height:1; }
#elegirnos .e-title{ font-weight:700; color:var(--ink); margin:2px 0 4px; letter-spacing:.2px; }
#elegirnos .e-txt{ color:var(--muted); margin:0; }
@media (max-width: 991.98px){ #elegirnos .e-pill{ grid-column: span 12; } }
@media (min-width: 1200px){
#elegirnos .e-pill:nth-child(1){ grid-column: span 5 }
#elegirnos .e-pill:nth-child(2){ grid-column: span 7 }
#elegirnos .e-pill:nth-child(3){ grid-column: span 7 }
#elegirnos .e-pill:nth-child(4){ grid-column: span 5 }
#elegirnos .e-pill:nth-child(5){ grid-column: span 6 }
#elegirnos .e-pill:nth-child(6){ grid-column: span 6 }
}
/* ===== INLINE <style> BLOCK #9 ===== */
/* ===== Encapsulado a #trabajos ===== */
#trabajos { overflow: hidden; }
#trabajos * { box-sizing: border-box; }
#trabajos .frame{
position: relative;
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:16px;
box-shadow:0 8px 30px rgba(0,0,0,.08);
padding:14px;
}
/* Viewport con scroll horizontal nativo + scroll-snap */
#trabajos .viewport{
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
#trabajos .viewport::-webkit-scrollbar{ display:none; }
/* Pista como columnas (grid) con gap constante y snap por item */
#trabajos .track{
--gap: 14px; /* Usado también por JS */
display: grid;
grid-auto-flow: column;
grid-auto-columns: 500px; /* ancho base desktop */
gap: var(--gap);
padding-bottom: 2px; /* evita “pegado” al borde en iOS */
}
#trabajos .item{
scroll-snap-align: start;
border-radius:14px;
overflow:hidden;
border:1px solid rgba(0,0,0,.06);
background:#f6f6f8;
aspect-ratio: 1/1; /* cuadradas */
}
#trabajos img{
width:100%; height:100%; display:block;
object-fit: cover;
}
/* Flechas */
#trabajos .ctrl{
position:absolute; top:50%; transform:translateY(-50%);
width:42px; height:42px; border:none; border-radius:50%;
background:#111; color:#fff; font-size:22px; line-height:42px;
display:grid; place-items:center; cursor:pointer; opacity:.9;
box-shadow:0 6px 16px rgba(0,0,0,.2);
transition: transform .15s ease, opacity .2s ease;
z-index:2;
}
#trabajos .ctrl:hover{ transform:translateY(-50%) scale(1.06); opacity:1; }
#trabajos .prev{ left:10px; }
#trabajos .next{ right:10px; }
/* Responsivo: ancho de columna según breakpoint */
@media (max-width: 1199.98px){ #trabajos .track{ grid-auto-columns: 380px; } }
@media (max-width: 991.98px){ #trabajos .track{ grid-auto-columns: 300px; } }
@media (max-width: 575.98px){
#trabajos .frame{ padding:12px; border-radius:12px; }
#trabajos .track{ --gap:12px; grid-auto-columns: 78vw; }
#trabajos .ctrl{ width:36px; height:36px; font-size:20px; }
}
/* ===== INLINE <style> BLOCK #10 ===== */
:root{
--brand: var(--primary, #d9a441);
--brand-dark: var(--primary-dark, #b3852f);
--ink: var(--ink, #0f1222);
--muted: var(--muted, #7a8199);
--soft: var(--soft, #f7f7fb);
}
/* layout: una columna, ancho cómodo */
#faqs .faq-wrap{
max-width: 880px; margin: 0 auto;
}
#faqs .faq{
border:1px solid rgba(15,18,34,.08);
background:#fff; border-radius:16px; overflow:hidden;
box-shadow:0 8px 24px rgba(15,18,34,.06);
}
#faqs .faq + .faq{ margin-top:14px; }
#faqs .faq-btn{
width:100%; display:flex; align-items:center; justify-content:space-between;
gap:16px; padding:14px 16px; background:#fff; border:0; text-align:left;
font-weight:700; color:var(--ink); cursor:pointer;
}
#faqs .faq-btn:focus{ outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent); outline-offset:2px; }
#faqs .faq-btn .kicker{
margin-left:auto;
display:inline-flex; align-items:center; gap:8px;
background: color-mix(in oklab, var(--brand) 14%, white);
border:1px solid color-mix(in oklab, var(--brand) 35%, transparent);
color:var(--ink); font-weight:800; font-size:.78rem; padding:.22rem .5rem; border-radius:10px;
}
#faqs .chev{
flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center;
transition: transform .25s ease; color:var(--brand-dark);
margin-left:8px;
}
#faqs .faq[open] .chev{ transform: rotate(180deg); }
#faqs .sep{
height:1px; background:linear-gradient(90deg, transparent, rgba(15,18,34,.08), transparent);
margin:6px 0 10px;
}
#faqs .faq-content{ padding:0 16px 14px 16px; color:var(--muted); }
/* animación */
#faqs details > div{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
#faqs details[open] > div{ grid-template-rows:1fr; }
#faqs details > div > .inner{ overflow:hidden; }
/* ===== INLINE <style> BLOCK #11 ===== */
/* ===== Scope exclusivo a #footer-pro ===== */
#footer-pro{
--bg:#0f1222; /* fondo */
--ink:#e9ecf1; /* texto */
--muted:#a6adba; /* texto secundario */
--line:rgba(255,255,255,.06);
--brand: var(--primary, #d9a441);
--brand-2: var(--primary-dark, #b3852f);
background: radial-gradient(1200px 600px at 10% -10%, rgba(217,164,65,.08), transparent 60%) , var(--bg);
color: var(--ink);
padding: clamp(36px, 6vw, 56px) 0 24px;
border-top:1px solid var(--line);
}
#footer-pro a{ color:inherit; text-decoration:none; }
#footer-pro a:hover{ color:var(--brand); }
#footer-pro .fp-grid{
display:grid; gap: clamp(18px, 3vw, 28px);
grid-template-columns: 1.1fr .8fr 1.1fr;
}
@media (max-width: 991.98px){
#footer-pro .fp-grid{ grid-template-columns: 1fr; }
}
/* Brand */
#footer-pro .fp-logo{ display:flex; align-items:center; gap:42px; font-weight:900; letter-spacing:.3px; }
#footer-pro .fp-logo img{ height:42px; width:auto; object-fit:contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.2)); }
#footer-pro .fp-claim{ color:var(--muted); margin:10px 0 14px; }
#footer-pro .fp-social{ display:flex; gap:10px; }
#footer-pro .fp-social a{
width:38px; height:38px; display:grid; place-items:center;
border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line);
}
#footer-pro .fp-social a:hover{ background:linear-gradient(180deg, var(--brand), var(--brand-2)); color:#0f1222; }
/* Links */
#footer-pro .fp-links h6,
#footer-pro .fp-contact h6{
font-weight:800; margin:0 0 10px; letter-spacing:.2px;
position:relative; display:inline-block;
}
#footer-pro .fp-links h6::after,
#footer-pro .fp-contact h6::after{
content:""; display:block; height:3px; width:46%; margin:8px 0 0; border-radius:2px;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
#footer-pro .fp-links ul{ list-style:none; padding:0; margin:0; }
#footer-pro .fp-links li + li{ margin-top:8px; }
#footer-pro .fp-links a{ color:var(--ink); opacity:.9; }
#footer-pro .fp-links a:hover{ opacity:1; }
/* Contacto */
#footer-pro .fp-contact-list{ list-style:none; padding:0; margin:0 0 12px; }
#footer-pro .fp-contact-list li{
display:flex; gap:10px; padding:6px 0; border-top:1px dashed var(--line); color:var(--ink);
}
#footer-pro .fp-contact-list li:first-child{ border-top:none; }
#footer-pro .fp-contact-list i{ color:var(--brand); margin-top:3px; }
/* Mapa */
#footer-pro .fp-map .map-frame{
position:relative; width:100%; aspect-ratio: 16 / 9;
border-radius:12px; overflow:hidden; border:1px solid var(--line);
box-shadow: 0 10px 26px rgba(0,0,0,.18);
background: #0b0e1a;
}
#footer-pro .fp-map iframe{ width:100%; height:100%; border:0; display:block; }
#footer-pro .btn-map{
margin-top:10px; padding:.55rem .9rem; border-radius:10px;
background: linear-gradient(180deg, var(--brand), var(--brand-2));
color:#0f1222; border:0; font-weight:800; cursor:pointer;
box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
#footer-pro .btn-map:hover{ filter:brightness(1.06); }
/* Legal */
#footer-pro .fp-legal{
display:flex; gap:12px; align-items:center; justify-content:space-between;
padding-top:18px; margin-top:24px; border-top:1px solid var(--line);
color:var(--muted);
flex-wrap:wrap;
}
#footer-pro .fp-legal-links{ list-style:none; padding:0; margin:0; display:flex; gap:12px; }
#footer-pro .fp-legal-links a{ color:var(--muted); }
#footer-pro .fp-legal-links a:hover{ color:var(--brand); }
/* Modal mapa (dialog nativo) */
#footer-pro .fp-modal{
border:0; padding:0; width:min(92vw, 1000px); max-width:1000px; background:transparent;
}
#footer-pro .fp-modal::backdrop{
background:rgba(0,0,0,.65);
}
#footer-pro .fp-modal-content{
position:relative; border-radius:16px; overflow:hidden;
background:#0b0e1a; border:1px solid var(--line);
box-shadow: 0 28px 80px rgba(0,0,0,.5);
}
#footer-pro .fp-modal-body{ width:100%; aspect-ratio: 16 / 9; }
#footer-pro .fp-modal-body iframe{ width:100%; height:100%; border:0; display:block; }
#footer-pro .fp-modal-close{
position:absolute; top:8px; right:8px; width:40px; height:40px;
display:grid; place-items:center; border-radius:8px; border:1px solid var(--line);
background:rgba(255,255,255,.06); color:var(--ink); cursor:pointer;
}
#footer-pro .fp-modal-close:hover{ background:rgba(255,255,255,.12); }
/* ===== INLINE <style> BLOCK #12 ===== */
/* Modo claro para la ventana de WhatsApp */
:root{
--wa: #25D366; --wa-dark: #128C7E; --wa-darker: #075E54;
--ig-1:#F58529; --ig-2:#DD2A7B; --ig-3:#8134AF;
--light-bg: #ffffff; --light-card: #f8f9fa;
--light-text: #1a1a1a; --muted-text: rgba(0,0,0,.6);
--border-light: rgba(0,0,0,.1);
}
/* IG flotante */
.ig-float{
position: fixed; right: 18px; bottom: 92px; z-index: 9999;
width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
background: radial-gradient(circle at 30% 30%, #fff8, #fff0 60%), linear-gradient(135deg, var(--ig-1), var(--ig-2) 50%, var(--ig-3));
box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .3s, box-shadow .3s; text-decoration:none;
}
.ig-float:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35); }
.ig-float svg{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
/* WA flotante */
.wa-float{ position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: inherit; }
.wa-btn{
background: linear-gradient(135deg, var(--wa), var(--wa-dark));
color:#fff; border:0; width:60px; height:60px; border-radius:50%;
display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
}
.wa-btn::after{ content:""; position:absolute; inset:0;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); opacity:0; transition:opacity .3s;
}
.wa-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35); }
.wa-btn:hover::after{ opacity:1; }
/* Ventana de chat - MODO CLARO */
.wa-card{
position:absolute; right:0; bottom:74px; width:min(360px, 92vw);
background: var(--light-bg); color: var(--light-text); border-radius:18px; overflow:hidden;
box-shadow: 0 18px 60px rgba(0,0,0,.2); border:1px solid var(--border-light);
transform: translateY(10px); opacity:0; transition: transform .3s, opacity .3s;
}
.wa-card[aria-modal="true"]{ transform: translateY(0); opacity:1; }
.wa-head{
display:flex; align-items:center; gap:12px; padding:14px;
background: var(--light-card); border-bottom:1px solid var(--border-light);
}
.wa-avatar{
width:40px; height:40px; border-radius:8px; background:#e9ecef;
display:grid; place-items:center; border:1px solid var(--border-light); overflow:hidden;
}
.wa-title{ font-weight:700; font-size:1.05rem; }
.wa-status{ font-size:.85rem; color:var(--muted-text); display:flex; align-items:center; gap:6px; }
.wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--wa); }
.wa-close{
margin-left:auto; background:transparent; color:var(--light-text); border:0;
font-size:24px; cursor:pointer; opacity:.7; width:32px; height:32px;
border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;
}
.wa-close:hover{ opacity:1; background: rgba(0,0,0,.05); }
.wa-body{
padding:12px 14px; max-height:40vh; overflow:auto; background: var(--light-bg);
display:flex; flex-direction:column; gap:8px;
}
.wa-bubble{
max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35;
box-shadow:0 2px 8px rgba(0,0,0,.08); animation:fadeIn .25s ease;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.wa-bot{
background: #f1f3f5; border:1px solid var(--border-light);
align-self:flex-start; border-bottom-left-radius:4px;
}
.wa-user{
background: var(--wa-darker); color: white;
align-self:flex-end; border-bottom-right-radius:4px;
}
.wa-compose{
display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px;
background: var(--light-card); border-top:1px solid var(--border-light);
}
.wa-compose textarea{
resize:none; border-radius:12px; padding:10px 12px; border:1px solid var(--border-light);
background:#ffffff; color:var(--light-text); outline:none; min-height:44px; font-family:inherit; transition:.2s;
}
.wa-compose textarea:focus{ border-color: var(--wa); box-shadow: 0 0 0 2px rgba(37,211,102,.15); }
.wa-send{
background: var(--wa); color:#ffffff; border:0; border-radius:12px;
padding:0 16px; font-weight:700; cursor:pointer;
display:flex; align-items:center; justify-content:center; transition:.2s;
}
.wa-send:hover{ background: var(--wa-dark); transform: scale(1.05); }
/* Scrollbar para modo claro */
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background: rgba(0,0,0,.05); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.3); }
/* Responsive */
@media (max-width: 480px){
.ig-float{ right:12px; bottom: 86px; }
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width: calc(100vw - 24px); right:0; }
}