Preview de mixed.css
/* MIXED CSS PACK */
/* Template: estudio-nb.com.ar/index.html */
/* Template mtime: 2025-11-13 19:34:27 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Domine:wght@400;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&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://unpkg.com/[email protected]/dist/aos.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root{
/* Paleta premium refinada */
--brand: #0f1f2a; /* azul petróleo elegante */
--brand-2: #0a3643; /* variante para detalles */
--accent: #c8a971; /* bronce premium */
--accent-dark: #a98854;
--accent-light: #e8d9b9;
--cream: #fffdf8; /* fondo principal */
--paper: #f7f2ea; /* secciones */
--ink: #201a16; /* texto principal */
--muted: #74695f; /* texto secundario */
--line: #e5dcca; /* bordes suaves */
--shadow: 0 12px 28px rgba(16,18,22,.10);
--shadow-lg: 0 24px 48px rgba(16,18,22,.12);
--radius: 16px;
--radius-lg: 22px;
--t: all .3s ease;
}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--cream); color:var(--ink); line-height:1.7; overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Domine', Georgia, serif; color:var(--brand); letter-spacing:-.02em}
.text-muted{color:var(--muted)!important}
/* Animaciones personalizadas */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
/* NAVBAR mejorada */
.navbar{position:sticky; top:0; z-index:1030; padding:1rem 0; background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); transition:var(--t); box-shadow:0 4px 20px rgba(0,0,0,0.05)}
.navbar.scrolled{background:rgba(255,255,255,.98); box-shadow:0 8px 30px rgba(0,0,0,0.08)}
.navbar-brand{font-family:'Domine', Georgia, serif; font-weight:700; color:var(--brand); font-size:1.5rem}
.nav-link{color:var(--brand); font-weight:600; position:relative; padding:.5rem 1rem!important; border-radius:12px; transition:var(--t)}
.nav-link:before{content:''; position:absolute; left:50%; bottom:6px; width:0; height:2px; background:var(--accent); transform:translateX(-50%); transition:var(--t); border-radius:2px}
.nav-link:hover,.nav-link.active{color:var(--brand-2)}
.nav-link:hover:before,.nav-link.active:before{width:60%}
.navbar-toggler{border:none; box-shadow:none!important}
.navbar-toggler:focus{box-shadow:none}
/* HERO espectacular */
.hero-content{position:relative; z-index:2}
.eyebrow{display:inline-block; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; padding:.45rem .9rem; border-radius:999px; background:var(--accent-light); color:var(--accent-dark); margin-bottom:1rem; box-shadow:0 4px 12px rgba(200,169,113,.15)}
.btn-brand{background:linear-gradient(135deg,var(--accent-dark),var(--accent)); color:#fff; border:none; box-shadow:0 10px 26px rgba(200,169,113,.35); position:relative; overflow:hidden; z-index:1; transition:var(--t)}
.btn-brand:before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition:var(--t); z-index:-1}
.btn-brand:hover{transform:translateY(-2px); color:#fff; box-shadow:0 14px 32px rgba(200,169,113,.45)}
.btn-brand:hover:before{left:100%}
.btn-ghost{border:2px solid var(--line); background:#fff; color:var(--brand); font-weight:600; transition:var(--t)}
.btn-ghost:hover{background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-2px)}
/* Secciones con efectos */
.section{padding:100px 0}
.section-muted{background:var(--paper); position:relative}
.section-muted: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 100 100" opacity="0.02"><path fill="%230f1f2a" d="M50,20c16.57,0,30,13.43,30,30S66.57,80,50,80S20,66.57,20,50S33.43,20,50,20z M50,15 c-19.33,0-35,15.67-35,35s15.67,35,35,35s35-15.67,35-35S69.33,15,50,15L50,15z"/></svg>') center/contain no-repeat}
.card-soft{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); transition:var(--t); overflow:hidden}
.card-soft:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.card-icon{width:60px; height:60px; border-radius:50%; background:var(--accent-light); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; color:var(--accent-dark); font-size:1.5rem}
/* Lista con checks bronce */
.li-check{list-style:none; padding:0; margin:0}
.li-check li{display:flex; gap:.6rem; align-items:flex-start; margin:.35rem 0}
.li-check i{color:var(--accent)}
/* Ciudadanías: tarjetas premium */
.flag{font-size:1.2rem; margin-right:.4rem}
.country-card{position:relative; overflow:hidden; height:100%}
.country-card:before{content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--accent); transform:scaleY(0); transition:var(--t); transform-origin:top}
.country-card:hover:before{transform:scaleY(1)}
/* Galería mejorada */
#trabajos .frame{position:relative}
#trabajos .viewport{overflow:auto; scroll-snap-type:x mandatory; display:flex; gap:16px; padding:6px 8px; scrollbar-width:none}
#trabajos .viewport::-webkit-scrollbar{display:none}
#trabajos .track{display:flex; gap:16px}
#trabajos .item{flex:0 0 auto; width:500px; height:500px; scroll-snap-align:center; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:var(--t); cursor:pointer}
#trabajos .item:hover{transform:scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,0.1)}
#trabajos .item img{width:100%; height:100%; object-fit:contain; background:#fff; transition:var(--t)}
#trabajos .item:hover img{transform:scale(1.05)}
#trabajos .ctrl{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--brand); display:grid; place-items:center; box-shadow:var(--shadow); transition:var(--t); z-index:10}
#trabajos .ctrl:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
#trabajos .prev{left:-10px} .next{right:-10px}
@media (max-width:991.98px){ #trabajos .item{width:380px; height:380px} }
@media (max-width:767.98px){ #trabajos .item{width:88vw; height:88vw} #trabajos .prev{left:6px} #trabajos .next{right:6px} }
/* Contacto mejorado */
.contact-card .form-control{padding:1rem 1.1rem; border-radius:12px; border:1px solid var(--line); transition:var(--t)}
.contact-card .form-control:focus{border-color:var(--brand-2); box-shadow:0 0 0 .2rem rgba(10,54,67,.1); transform:translateY(-2px)}
.form-label{font-weight:600; color:var(--brand); margin-bottom:.5rem}
/* Footer mejorado */
footer{background:linear-gradient(135deg,#ffffff 0%, #f1efe9 100%); border-top:1px solid var(--line); position:relative}
footer: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 100 100" opacity="0.02"><path fill="%230f1f2a" d="M50,20c16.57,0,30,13.43,30,30S66.57,80,50,80S20,66.57,20,50S33.43,20,50,20z M50,15 c-19.33,0-35,15.67-35,35s15.67,35,35,35s35-15.67,35-35S69.33,15,50,15L50,15z"/></svg>') center/contain no-repeat}
/* Efectos de scroll reveal */
.reveal{opacity:0; transform:translateY(30px); transition:all 0.8s ease}
.reveal.active{opacity:1; transform:translateY(0)}
/* Mejoras para móviles */
@media (max-width: 768px) {
}
.section{padding:60px 0}
.display-5{font-size:2.2rem}
}
/* Hero sizing tweaks */
@media (max-width: 991.98px){
:root{ --nav-h: 60px; }
}
@supports not (height: 1svh){
@media (max-width: 991.98px){
}
}
/* Space the intro a bit from the hero */
#intro{padding-top: clamp(16px, 3vh, 32px);}
/* ==== HERO RESPONSIVE (IMG + object-fit) ==== */
:root{ --nav-h: 64px; } /* ajustá si tu navbar varía */
.hero{
position: relative;
height: calc(100svh - var(--nav-h)); /* usa unidades pequeñas de viewport (corrige barras en mobile) */
min-height: 520px;
padding: 0;
overflow: hidden;
}
.hero-img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; /* llena sin deformar */
object-position: 50% 30%; /* foco más alto para que no se corte el centro en phone */
transform: translateZ(0); /* acelera y evita jumping en iOS */
will-change: transform;
}
/* Fallback si el browser no soporta svh */
@supports not (height: 1svh){
.hero{ height: calc(100vh - var(--nav-h)); }
}
/* --- Breakpoints --- */
/* Phones: un poco más alto y foco aún más arriba */
@media (max-width: 575.98px){
.hero{ min-height: 78vh; }
.hero-img{ object-position: 50% 20%; }
}
/* Tablets */
@media (min-width: 576px) and (max-width: 991.98px){
.hero{ min-height: 75vh; }
.hero-img{ object-position: 50% 25%; }
}
/* Desktop: menos alto para que entre contenido arriba del fold */
@media (min-width: 992px){
.hero{ height: 68vh; min-height: 520px; }
.hero-img{ object-position: 50% 45%; }
}
/* Espaciado del intro debajo del hero */
#intro{ padding-top: clamp(16px, 3vh, 40px); }
/* === MOBILE FRAMING FIX (matches user's photo 2) === */
@media (max-width: 575.98px){
.hero{ height:45vh !important; min-height:340px !important; }
.hero-img{ object-position: 50% 35% !important; }
#intro{ padding-top: 16px !important; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* === Palette fallbacks (won't override if already defined) === */
:root{
--brand: #1b2b34;
--accent: #C8A971;
--accent-light: #e9dcc4;
--accent-dark: #7a5b25;
--paper:#f6f1e9;
--line:rgba(0,0,0,.06);
--muted:#5b6369;
--ink:#1a1a1a;
--shadow:0 10px 28px rgba(0,0,0,.08);
}
/* ===== Headings premium (Who we are) ===== */
.heading-wrap{position:relative}
.heading-eyebrow{
display:inline-block; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
font-size:.78rem; padding:.38rem .7rem; border-radius:999px;
background:var(--accent-light); color:var(--accent-dark);
box-shadow:0 6px 18px rgba(200,169,113,.22); margin-bottom:.8rem;
}
.heading-title{
display:inline-block; position:relative; font-family:'Domine', Georgia, serif;
line-height:1.15; color:var(--brand); margin:0 0 .9rem;
background:linear-gradient(transparent 60%, rgba(200,169,113,.18) 0);
padding:.2rem .35rem .35rem .35rem; border-radius:10px;
}
.heading-underline{
width:92px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--accent), var(--accent-light));
box-shadow:0 6px 14px rgba(200,169,113,.35); margin-bottom:1rem;
}
/* Banda “papel” para el lead */
.lead-paper{
position:relative; background:var(--paper); border:1px solid var(--line);
border-radius:14px; padding:18px; color:var(--muted);
box-shadow:var(--shadow);
}
.lead-paper:after{
/* solapa / sombra inferior */
content:''; position:absolute; right:32px; bottom:-10px; width:180px; height:20px;
background:linear-gradient(180deg, rgba(0,0,0,.06), transparent);
filter:blur(8px); opacity:.55; pointer-events:none; border-radius:20px;
}
.lead-paper .strong{color:var(--ink); font-weight:700}
/* ===== INLINE <style> BLOCK #3 ===== */
/* ===== Global robust heading system ===== */
.section .section-title,
h1.section-title,h2.section-title {
position:relative; display:inline-block;
font-family:'Domine', Georgia, serif;
line-height:1.15; color:var(--brand);
margin:0 0 .9rem; padding:.2rem .45rem .35rem .45rem;
background:linear-gradient(transparent 60%, rgba(200,169,113,.18) 0);
border-radius:10px;
}
.section .section-title::after{
content:""; display:block; width:92px; height:4px; margin:.55rem .2rem 0 .2rem;
border-radius:4px; background:linear-gradient(90deg,var(--accent), var(--accent-light));
box-shadow:0 6px 14px rgba(200,169,113,.35);
}
/* Subtítulos robustos (sin tocar HTML) */
.section .section-subtitle{
background:var(--paper); border:1px solid var(--line); color:var(--muted);
border-radius:14px; padding:14px 16px; display:inline-block;
box-shadow:var(--shadow); max-width:100%;
}
/* Compatibilidad para títulos genéricos sin .section-title */
.section h2:not(.section-title){
position:relative; display:inline-block;
line-height:1.2; margin-bottom:1rem; padding:.2rem .45rem .35rem .45rem;
background:linear-gradient(transparent 60%, rgba(200,169,113,.16) 0);
border-radius:10px; color:var(--brand);
}
.section h2:not(.section-title)::after{
content:""; display:block; width:84px; height:4px; margin:.55rem .2rem 0 .2rem;
border-radius:4px; background:linear-gradient(90deg,var(--accent), var(--accent-light));
box-shadow:0 6px 14px rgba(200,169,113,.3);
}
/* Ajustes responsivos finos */
@media (max-width: 576px){
.section .section-title,
.section h2:not(.section-title){
font-size:clamp(1.25rem, 4.5vw, 1.6rem);
}
.section .section-subtitle{padding:12px 14px}
}
/* ===== INLINE <style> BLOCK #4 ===== */
/* ==== FIXES INYECTADOS (no rompen tu diseño) ==== */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ max-width: 100%; overflow-x: hidden; }
.container, .container-fluid{ overflow-x: clip; }
/* Evita que algo salga del contenedor en mobile */
@media (max-width: 575.98px){
.row{ margin-left: 0; margin-right: 0; }
}
/* Navbar: icono visible siempre + no desborde */
.navbar .navbar-toggler-icon{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar .navbar-collapse{ max-width: 100vw; }
/* Hero y frames sin provocar scroll lateral */
.hero{ overflow: hidden; }
#trabajos .frame{ overflow: hidden; }
#trabajos .viewport{ overflow-x: auto; }
#trabajos .track{ will-change: transform; }
/* Botones del carrusel dentro del viewport en phone */
@media (max-width: 767.98px){
#trabajos .prev{ left: 8px !important; }
#trabajos .next{ right: 8px !important; }
}
/* Asegura que imágenes no rompan el ancho */
img, video{ max-width: 100%; height: auto; }
/* ===== INLINE <style> BLOCK #5 ===== */
/* ==== NAVBAR MOBILE FIXES (inyectado) ==== */
.navbar .container, .navbar .container-fluid{ flex-wrap: nowrap; }
.navbar-brand{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.navbar-brand img{ height:40px; width:auto; object-fit:contain; }
/* Evita que el logo empuje el toggler a una segunda línea */
.navbar-toggler{ margin-left:auto; }
/* Compacta el alto del navbar y achica el logo en phone */
@media (max-width: 575.98px){
.navbar{ padding-top:.4rem; padding-bottom:.4rem; }
.navbar-brand img{ height:28px; }
}
/* Si el brand trae un texto al lado del logo, evitá cortes feos */
.navbar-brand span, .navbar-brand small, .navbar-brand strong{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
display:inline-block;
max-width: 60vw; /* no dejemos que tape el toggler */
}
/* ===== INLINE <style> BLOCK #6 ===== */
/* === FIX: forzar fuente de emojis para banderas en desktop === */
.flag-dot,
#ciudadanias .flag-dot,
#visados .flag-dot{
font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
"Twemoji Mozilla","Segoe UI Symbol", system-ui, sans-serif !important;
font-variant-ligatures: normal;
-webkit-font-smoothing: antialiased;
}
/* ===== INLINE <style> BLOCK #7 ===== */
/* ===== Scope a #quienes para no romper otros estilos ===== */
#quienes .heading-wrap{position:relative;padding-left:18px;margin-bottom:12px}
#quienes .heading-eyebrow{
display:inline-block;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted,#6c757d)
}
#quienes .heading-wrap::before{
content:"";position:absolute;left:0;top:.35rem;height:1.15rem;width:3px;background:var(--primary,#0d6efd);
border-radius:2px
}
#quienes .heading-title{margin:.15rem 0 0;line-height:1.15}
#quienes .lead-paper{
background:linear-gradient(180deg,#fff,rgba(255,255,255,.96));
border:1px solid var(--line,rgba(0,0,0,.08));
box-shadow:0 8px 24px rgba(0,0,0,.06);
border-radius:14px;padding:16px 18px
}
#quienes .strong{font-weight:700}
#quienes .contact-card{
background:#fff;border:1px solid var(--line,rgba(0,0,0,.08));
border-radius:14px;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.05)
}
#quienes .contact-item{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
#quienes .contact-item i{font-size:1.1rem;opacity:.85;margin-top:.15rem}
#quienes .contact-label{font-weight:600}
#quienes .cta-wrap{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
#quienes .btn-ghost{border:1px solid var(--line,rgba(0,0,0,.1));background:#fff}
#quienes .quienes-photo{
position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line,rgba(0,0,0,.08));
box-shadow:0 12px 30px rgba(0,0,0,.08)
}
#quienes .quienes-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* ===== INLINE <style> BLOCK #8 ===== */
/* ===== Scope solo #servicios ===== */
#servicios{--card-radius:14px;--card-pad:16px}
#servicios .eyebrow{
display:inline-block;margin-bottom:.25rem;
font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted,#6c757d)
}
#servicios .title{
margin:0 0 .5rem 0;font-weight:700;line-height:1.15;
font-size:1.75rem; /* más contenido, menos altura */
}
#servicios .subtitle{
color:var(--muted,#6c757d);max-width:900px;margin:.25rem auto 0 auto;
font-size:.98rem
}
/* Grid compacto */
#servicios .row.g-compact{--bs-gutter-y:1rem;--bs-gutter-x:1rem}
/* Card compacta + premium */
#servicios .svc-card{
background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.98));
border:1px solid rgba(0,0,0,.06);
border-radius:var(--card-radius); padding:var(--card-pad); height:100%;
box-shadow:0 6px 18px rgba(0,0,0,.05);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
display:flex;flex-direction:column;align-items:center;text-align:center;
}
#servicios .svc-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 26px rgba(0,0,0,.07);
border-color:rgba(0,0,0,.12);
}
/* Icono más chico y fino */
#servicios .icon-wrap{
width:48px;height:48px;border-radius:50%;
display:grid;place-items:center;margin-bottom:.6rem;
background:linear-gradient(180deg,#f8f9fc,#ffffff);
border:1px solid rgba(0,0,0,.06);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
#servicios .icon-wrap i{font-size:1.25rem;opacity:.9}
/* Tipos más sobrios y compactos */
#servicios .svc-title{font-weight:600;margin-bottom:.25rem;font-size:1.02rem}
#servicios .svc-text{color:var(--muted,#6c757d);margin:0;font-size:.93rem}
/* Stagger si usás .reveal */
@media (min-width: 768px){
#servicios [data-delay="1"]{transition-delay:.06s}
#servicios [data-delay="2"]{transition-delay:.12s}
#servicios [data-delay="3"]{transition-delay:.18s}
#servicios [data-delay="4"]{transition-delay:.24s}
#servicios [data-delay="5"]{transition-delay:.30s}
}
/* ===== INLINE <style> BLOCK #9 ===== */
/* ===== Scope solo #ciudadanias ===== */
#ciudadanias{--card-r:16px;--line:rgba(0,0,0,.06);--muted:#6c757d}
#ciudadanias .eyebrow{
display:inline-block;margin-bottom:.25rem;font-size:.78rem;
letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6c757d)
}
#ciudadanias .title{margin:0 0 .5rem;font-weight:700;line-height:1.12}
/* Grid compacto y simétrico */
#ciudadanias .row.g-tight{--bs-gutter-x:1rem;--bs-gutter-y:1rem}
/* Card: glass + hairline + hover sutil */
#ciudadanias .country-card{
position:relative;height:100%;
border:1px solid var(--line);
border-radius:var(--card-r);
background:
linear-gradient(180deg,#ffffff,rgba(255,255,255,.98)) padding-box,
radial-gradient(120% 120% at 0% 0%, rgba(13,110,253,.12), transparent 60%) border-box;
box-shadow:0 6px 18px rgba(0,0,0,.05);
padding:18px 16px;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
display:flex;gap:.65rem;flex-direction:column;justify-content:flex-start;
}
#ciudadanias .country-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,.08);
border-color:rgba(13,110,253,.22);
background:
linear-gradient(180deg,#ffffff,rgba(255,255,255,.98)) padding-box,
radial-gradient(120% 120% at 0% 0%, rgba(13,110,253,.18), transparent 60%) border-box;
}
/* Header de país */
#ciudadanias .country-head{
display:flex;align-items:center;gap:.65rem
}
#ciudadanias .flag-dot{
width:40px;height:40px;border-radius:50%;
display:grid;place-items:center;font-size:1.15rem;
background:#fff;border:1px solid var(--line);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
flex:0 0 40px
}
#ciudadanias .country-name{
font-weight:700;letter-spacing:.2px
}
/* Texto */
#ciudadanias .muted{color:var(--muted)}
#ciudadanias .small{font-size:.92rem}
/* Divider sutil */
#ciudadanias .hairline{
height:1px;background:linear-gradient(90deg,transparent, rgba(0,0,0,.08), transparent);
margin:.35rem 0 .2rem
}
/* CTA inferior opcional dentro de la card */
#ciudadanias .cta{
margin-top:auto;display:flex;justify-content:flex-start
}
#ciudadanias .btn-ghost{
padding:.4rem .7rem;border-radius:999px;border:1px solid var(--line);background:#fff;
font-size:.9rem
}
/* Stagger si usás .reveal */
@media (min-width:768px){
#ciudadanias [data-d="1"]{transition-delay:.06s}
#ciudadanias [data-d="2"]{transition-delay:.12s}
#ciudadanias [data-d="3"]{transition-delay:.18s}
#ciudadanias [data-d="4"]{transition-delay:.24s}
#ciudadanias [data-d="5"]{transition-delay:.30s}
#ciudadanias [data-d="6"]{transition-delay:.36s}
}
/* ===== INLINE <style> BLOCK #10 ===== */
/* ===== Scope solo #visados ===== */
#visados{--line:rgba(0,0,0,.06);--muted:#6c757d;--r:14px}
#visados .eyebrow{
display:inline-block;margin-bottom:.25rem;font-size:.78rem;
letter-spacing:.08em;text-transform:uppercase;color:var(--muted)
}
#visados .title{margin:0 0 .5rem;font-weight:700;line-height:1.12}
#visados .subtitle{color:var(--muted);max-width:900px;margin:.25rem auto 0}
/* Grid apretado */
#visados .row.g-tight{--bs-gutter-x:1rem;--bs-gutter-y:1rem}
/* Card compacta + premium (sin enlaces) */
#visados .visa-card{
height:100%;padding:16px;border-radius:var(--r);
border:1px solid var(--line);
background:
linear-gradient(180deg,#ffffff,rgba(255,255,255,.98)) padding-box,
radial-gradient(120% 120% at 0% 0%, rgba(13,110,253,.10), transparent 60%) border-box;
box-shadow:0 6px 18px rgba(0,0,0,.05);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;justify-content:flex-start;
text-align:left;
}
#visados .visa-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 26px rgba(0,0,0,.07);
border-color:rgba(13,110,253,.18);
background:
linear-gradient(180deg,#ffffff,rgba(255,255,255,.98)) padding-box,
radial-gradient(120% 120% at 0% 0%, rgba(13,110,253,.15), transparent 60%) border-box;
}
/* Encabezado país */
#visados .head{display:flex;align-items:center;gap:.6rem}
#visados .flag-dot{
width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
font-size:1.15rem;background:#fff;border:1px solid var(--line);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);flex:0 0 40px
}
#visados .country{font-weight:700;letter-spacing:.2px}
/* Texto + chips */
#visados .muted{color:var(--muted)}
#visados .small{font-size:.92rem}
#visados .chips{display:flex;flex-wrap:wrap;gap:6px}
#visados .chip{
padding:.25rem .55rem;border-radius:999px;font-size:.78rem;
background:#f6f8ff;border:1px solid rgba(13,110,253,.16)
}
/* Stagger con .reveal (si lo usás) */
@media (min-width:768px){
#visados [data-d="1"]{transition-delay:.06s}
#visados [data-d="2"]{transition-delay:.12s}
#visados [data-d="3"]{transition-delay:.18s}
}
/* ===== INLINE <style> BLOCK #11 ===== */
/* ===== Scope solo a #genea-heraldica ===== */
#genea-heraldica{--line:rgba(0,0,0,.06);--muted:#6c757d;--r:16px}
#genea-heraldica .eyebrow{
display:inline-block;margin-bottom:.3rem;font-size:.78rem;
letter-spacing:.08em;text-transform:uppercase;color:var(--muted)
}
#genea-heraldica .title{margin:0 0 .75rem;font-weight:700;line-height:1.12}
#genea-heraldica .subtitle{color:var(--muted);max-width:900px;margin:.25rem auto 0}
/* Grid simétrico y compacto */
#genea-heraldica .row.g-tight{--bs-gutter-x:1rem;--bs-gutter-y:1rem}
/* Card “gemela” */
#genea-heraldica .twin-card{
height:100%;
border:1px solid var(--line);
border-radius:var(--r);
background:
linear-gradient(180deg,#ffffff,rgba(255,255,255,.98)) padding-box,
radial-gradient(120% 120% at 0% 0%, rgba(13,110,253,.10), transparent 60%) border-box;
box-shadow:0 6px 18px rgba(0,0,0,.05);
padding:28px 22px;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
text-align:center; display:flex; flex-direction:column; gap:.8rem; justify-content:center;
}
#genea-heraldica .twin-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,.08);
border-color:rgba(13,110,253,.18);
background:
linear-gradient(180deg,#ffffff,rgba(255,255,255,.98)) padding-box,
radial-gradient(120% 120% at 0% 0%, rgba(13,110,253,.15), transparent 60%) border-box;
}
/* Icono circular sutil */
#genea-heraldica .icon-wrap{
width:54px;height:54px;border-radius:50%; margin:0 auto .5rem auto;
display:grid;place-items:center;background:#fff;border:1px solid var(--line);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
#genea-heraldica .icon-wrap i{font-size:1.3rem;opacity:.9}
/* Títulos y textos */
#genea-heraldica .card-title{font-weight:700;margin:0}
#genea-heraldica .muted{color:var(--muted)}
#genea-heraldica .small{font-size:.96rem}
/* Separador sutil */
#genea-heraldica .hairline{
height:1px;background:linear-gradient(90deg,transparent, rgba(0,0,0,.08), transparent);
margin:.2rem 0 .2rem
}
/* ===== INLINE <style> BLOCK #12 ===== */
/* Scope solo a #opiniones */
#opiniones{
--line:rgba(0,0,0,.06);
--muted:#6c757d;
--r:16px;
}
#opiniones .title{
margin:0 0 .5rem;
font-weight:700;
line-height:1.15;
}
#opiniones .subtitle{
color:var(--muted);
max-width:720px;
margin:.25rem auto 0;
font-size:.98rem;
}
#opiniones .opin-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:1.25rem;
}
@media (max-width:991.98px){
#opiniones .opin-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media (max-width:575.98px){
#opiniones .opin-grid{
grid-template-columns:1fr;
}
}
#opiniones .opin-card{
height:100%;
border-radius:var(--r);
border:1px solid var(--line);
background:
linear-gradient(180deg,#ffffff,rgba(255,255,255,.98)) padding-box,
radial-gradient(130% 130% at 0% 0%, rgba(200,169,113,.10), transparent 60%) border-box;
box-shadow:0 8px 20px rgba(0,0,0,.04);
padding:16px 16px 14px;
display:flex;
flex-direction:column;
gap:.4rem;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#opiniones .opin-card:hover{
transform:translateY(-3px);
box-shadow:0 14px 32px rgba(0,0,0,.08);
border-color:rgba(0,0,0,.12);
}
#opiniones .opin-header{
display:flex;
align-items:center;
gap:.65rem;
margin-bottom:.2rem;
}
#opiniones .opin-avatar{
width:34px;
height:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:1rem;
background:var(--brand,#0f1f2a);
color:#fff;
box-shadow:0 4px 10px rgba(0,0,0,.25);
}
#opiniones .opin-name{
font-weight:600;
font-size:.96rem;
color:#111;
line-height:1.2;
}
#opiniones .opin-role{
font-size:.82rem;
color:var(--muted);
}
#opiniones .opin-text{
font-size:.95rem;
color:var(--muted);
margin:0;
}
/* ===== INLINE <style> BLOCK #13 ===== */
/* ===== Scope solo #contacto ===== */
#contacto{--line:rgba(0,0,0,.08);--muted:#6c757d;--r:14px}
#contacto .heading-wrap{position:relative;margin-bottom:.5rem}
#contacto .subtitle{color:var(--muted);margin:0}
/* Cards */
#contacto .card-soft{
background:#fff;border:1px solid var(--line);border-radius:var(--r);
box-shadow:0 8px 22px rgba(0,0,0,.05)
}
/* Datos de contacto */
#contacto .contact-list .item{display:flex;gap:.6rem;align-items:flex-start;margin:.35rem 0;color:var(--muted)}
#contacto .contact-list .item i{font-size:1.05rem;opacity:.9;margin-top:.15rem}
#contacto .label{font-weight:600;color:#111}
#contacto .contact-list a{text-decoration:none}
#contacto .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);margin:.8rem 0}
/* Mapa */
#contacto .map-wrap{margin-top:12px}
#contacto .map-tabs{display:flex;gap:.5rem;flex-wrap:wrap}
#contacto .map-btn{
border:1px solid var(--line);background:#fff;border-radius:999px;padding:.35rem .8rem;
font-size:.9rem;cursor:pointer
}
#contacto .map-btn.active{border-color:rgba(13,110,253,.25);box-shadow:0 2px 10px rgba(13,110,253,.10)}
#contacto .map-frame{
width:100%;height:260px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6)
}
#contacto .map-frame iframe{width:100%;height:100%;border:0}
/* Form */
#contacto .contact-card .form-label{font-weight:600}
#contacto .btn-brand{background:#0d6efd;border:1px solid #0d6efd;color:#fff}
#contacto .btn-brand:hover{filter:brightness(.95)}
/* ===== INLINE <style> BLOCK #14 ===== */
/* Scope solo al footer */
#site-footer {
--fg: #e9edf3;
--muted: #94a3b8;
--line: rgba(255, 255, 255, .1);
background: #000;
color: var(--fg);
}
#site-footer a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
#site-footer a:hover {
opacity: .9;
}
#site-footer .title {
font-weight: 700;
margin: 0 0 .5rem;
line-height: 1.1;
font-size: 1rem;
}
#site-footer .mini {
font-size: .92rem;
color: var(--muted);
}
#site-footer .hairline {
height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
margin: .75rem 0 1rem;
}
/* Columna de enlaces: grilla 2 col, alineada a la izquierda y con filas parejas */
#site-footer .links-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .35rem 2rem;
align-items: start;
}
#site-footer .links-grid a {
display: inline-block;
font-size: .96rem;
padding: .05rem 0;
transition: opacity .2s ease;
}
/* Barra inferior */
#site-footer .footbar {
border-top: 1px solid var(--line);
margin-top: 1.6rem;
padding-top: .9rem;
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
color: var(--muted);
font-size: .9rem;
}
#site-footer .foot-nav {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
#site-footer .badge-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .22rem .55rem;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, .03);
color: var(--muted);
font-size: .85rem;
}
/* Ajustes responsivos: en phone, una sola columna de enlaces */
@media (max-width: 576px) {
#site-footer .links-grid {
grid-template-columns: 1fr;
}
}
/* ===== INLINE <style> BLOCK #15 ===== */
:root{
--wa:#25D366; --wa-dark:#128C7E; --wa-darker:#075E54;
/* paleta sobria tipo estudio */
--dark-bg:#0e1726; --darker-bg:#0b1220;
--light-text:#ffffff; --muted-text:rgba(255,255,255,.7);
}
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:10050; 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; }
.wa-card{
position:absolute; right:0; bottom:74px; width:min(360px, 92vw);
background:var(--dark-bg); color:var(--light-text); border-radius:18px; overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
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:linear-gradient(180deg, #10203a, var(--darker-bg)); border-bottom:1px solid rgba(255,255,255,.06);
}
.wa-avatar{ width:40px; height:40px; border-radius:8px; background:#0f1c33;
display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); 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:#fff; 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(255,255,255,.1); }
.wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background:var(--dark-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 4px 14px rgba(0,0,0,.25); animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.wa-bot{ background:#0f192d; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px; }
.wa-user{ background:var(--wa-darker); align-self:flex-end; border-bottom-right-radius:4px; }
.wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background:var(--dark-bg); border-top:1px solid rgba(255,255,255,.08); }
.wa-compose textarea{
resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12);
background:#0b1529; 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:#0b1220; 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 */
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.3); }
/* Cuando el chat está abierto, desactivo clicks a otros flotantes */
.wa-open .ig-float{ pointer-events:none; opacity:.7; }
/* Responsive */
@media (max-width:480px){
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}
/* ===== INLINE <style> BLOCK #16 ===== */
/* Botón flotante de Instagram — menor z-index para no tapar WA */
.ig-float{
position:fixed; right:18px;
bottom:calc(18px + 60px + 10px);
z-index:100; /* menor que .wa-float (10050) */
width:60px; height:60px; border-radius:50%;
display:grid; place-items:center;
background:#f0f0f0;
box-shadow:0 10px 30px rgba(0,0,0,.25);
border:0; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
text-decoration:none;
}
.ig-float:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(0,0,0,.35);
filter:saturate(1.1);
}
.ig-float svg{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
@media (max-width:480px){
.ig-float{
right:12px;
bottom:calc(12px + 60px + 10px);
width:56px; height:56px;
}
}