Preview de mixed.css
/* MIXED CSS PACK */
/* Template: cheyole.com/index.html */
/* Template mtime: 2025-09-15 19:56:00 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600;700;800&family=Raleway: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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css */
/* external link (no embedded): https://unpkg.com/[email protected]/dist/aos.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ==================
VARIABLES & BASE
================== */
:root {
--brand: #b3122b;
--brand-dark: #7f0d1f;
--brand-light: #ff4d6d;
--ink: #111;
--paper: #faf7f2;
--gold: #d4af37;
--gold-light: #f8e08e;
--muted: #6c757d;
--light-bg: #f8f9fa;
--radius-xl: 1.25rem;
--radius-lg: 1rem;
--shadow-soft: 0 10px 30px rgba(0,0,0,.08);
--shadow-medium: 0 15px 35px rgba(0,0,0,.12);
--shadow-intense: 0 25px 50px rgba(0,0,0,.15);
--nav-h: 80px;
--transition: .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-slow: .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--gallery-max-h: 360px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body {
font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
color: var(--ink);
background: #fff;
line-height: 1.7;
}
img{max-width:100%;height:auto;display:block}
h1, h2, h3, h4, h5 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
.text-brand { color: var(--brand) !important; }
.text-gold { color: var(--gold) !important; }
.bg-paper { background-color: var(--paper) !important; }
.bg-light { background-color: var(--light-bg) !important; }
.section { padding: 7rem 0; position: relative; }
.section-title {
position: relative; margin-bottom: 3rem; display: inline-block;
}
.section-title::after {
content: ''; display:block; width:80px; height:4px; background:var(--brand);
margin-top:1.2rem; border-radius:2px; transition: width .8s ease;
}
.section-title:hover::after { width:120px; }
.small-muted { color: var(--muted); font-size: 1rem; }
/* ==================
NAVBAR (FIX MOBILE)
================== */
.navbar {
height: var(--nav-h);
background: #fff !important;
color: #000;
backdrop-filter: blur(10px);
box-shadow: 0 5px 20px rgba(0,0,0,.05);
transition: var(--transition);
padding: 0.5rem 0;
z-index: 1040; /* por encima del hero */
}
.navbar-brand { font-weight: 800; font-size: 1.4rem; color:#000; }
.navbar .nav-link {
position: relative; font-weight:600; padding:.5rem .8rem !important; transition: var(--transition);
color:#111 !important;
}
.navbar .nav-link::after {
content:''; position:absolute; bottom:0; left:50%; width:0; height:2px; background:var(--brand);
transition: var(--transition); transform: translateX(-50%);
}
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width:70%; }
.navbar .navbar-toggler{ border:none; padding:.4rem; z-index:1052; }
.navbar .navbar-toggler:focus{ box-shadow:none; }
/* icono hamburguesa rojo */
.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='%23b3122b' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
transition: var(--transition);
}
/* Menú desplegado: bloque full-width SOLIDO (para que se vea y no empuje nada) */
@media (max-width: 991.98px){
.navbar .navbar-collapse{
position: absolute;
top: var(--nav-h);
left: 0; right: 0;
background:#fff;
border-bottom: 1px solid rgba(0,0,0,.06);
box-shadow: 0 15px 30px rgba(0,0,0,.08);
padding: .75rem 1rem;
}
}
/* ==================
HERO
================== */
.hero {
min-height: calc(100svh - var(--nav-h));
display: flex; align-items: center;
position: relative; color: #fff;
padding-top: var(--nav-h);
overflow: hidden;
isolation: isolate; /* evita fugas z-index */
}
.hero::before {
content:''; position:absolute; inset:0;
background: url('https://nodo25.netfan.host/cheyole.com/img/hero.jpg') 50% 30%/cover no-repeat;
z-index: -2; transform: scale(1.08); transition: transform 10s ease;
}
.hero:hover::before { transform: scale(1); }
.hero::after {
content:''; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.35) 100%);
z-index:-1;
}
.hero-content { position: relative; z-index: 2; }
.hero-title{ font-size: clamp(1.6rem, 6vw, 2.6rem); margin-bottom:1.25rem; text-shadow:0 2px 10px rgba(0,0,0,.3); }
.hero-subtitle{ font-size: clamp(.95rem, 3.5vw, 1.15rem); margin-bottom: 1.75rem; opacity:.95; }
@media (max-width: 575.98px){
.hero{ min-height: calc(82svh - var(--nav-h)); }
.hero::before{ background-position: 50% 22%; }
.hero-title, .hero-subtitle{ text-align:center; }
.hero-content .d-flex{ justify-content:center; }
}
/* ==================
CARDS
================== */
.card-soft {
border:0; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft);
transition: var(--transition); overflow: hidden; height: 100%; background:#fff;
}
.card-soft:hover { transform: translateY(-10px); box-shadow: var(--shadow-intense); }
.card-img-overlay-custom {
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
display:flex; flex-direction:column; justify-content:flex-end; padding:2rem;
opacity:0; transition: var(--transition);
}
.card-soft:hover .card-img-overlay-custom{ opacity:1; }
.btn {
border-radius:50px; padding:.8rem 2rem; font-weight:600;
transition: var(--transition); position:relative; overflow:hidden; z-index:1;
}
.btn::before{ content:''; position:absolute; inset:0; width:0%; height:100%; background:rgba(255,255,255,.2); transition: var(--transition); z-index:-1; }
.btn:hover::before{ width:100%; }
.btn-brand{ background:var(--brand); color:#fff; border:0; box-shadow:0 5px 15px rgba(179,18,43,.3); }
.btn-brand:hover{ background:var(--brand-dark); color:#fff; transform: translateY(-3px); box-shadow:0 8px 20px rgba(179,18,43,.4); }
.btn-outline-light:hover{ background: rgba(255,255,255,.1); }
/* ==================
GALERÍA / TICKER (SIN RECORTE + NO DESBORDA)
================== */
#galeria .ticker{
display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding: 1rem .5rem; scrollbar-width:none; -ms-overflow-style:none;
}
#galeria .ticker::-webkit-scrollbar{ display:none; }
#galeria .tile{
flex:0 0 auto; display:flex; align-items:center; justify-content:center;
background:#000; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft);
scroll-snap-align:center; position:relative;
}
#galeria .tile img{
height: var(--gallery-max-h); width:auto; max-width:100%;
object-fit: contain; border-radius: var(--radius-xl);
}
@media (max-width: 991px){ :root{ --gallery-max-h: 300px; } }
@media (max-width: 575px){ :root{ --gallery-max-h: 220px; } }
/* ==================
CONTACTO
================== */
.contact-card{ background:var(--paper); border-radius:var(--radius-xl); padding:2.5rem; box-shadow:var(--shadow-soft); height:100%; }
.contact-icon{ width:50px; height:50px; border-radius:50%; background:rgba(179,18,43,.1); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.form-control{ border-radius:10px; padding:.8rem 1.2rem; border:1px solid #e9e9e9; transition: var(--transition); }
.form-control:focus{ box-shadow:0 0 0 3px rgba(179,18,43,.2); border-color: var(--brand); }
/* ==================
FOOTER
================== */
footer{ background: linear-gradient(to bottom,#0a0a0a 0%,#000 100%); color:#e9e9e9; position:relative; overflow:hidden; }
footer::before{ content:''; position:absolute; top:0; left:0; width:100%; height:3px; background: linear-gradient(to right, var(--brand), var(--gold)); }
.footer-links a{ transition: var(--transition); }
.footer-links a:hover{ color: var(--gold) !important; padding-left:5px; }
/* ==================
DECORACIONES (no interferir con clicks/scroll)
================== */
.flamenco-dot, .tango-curve { pointer-events:none; }
.flamenco-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--brand); opacity:.6; }
.flamenco-dot-1{ top:20%; left:5%; animation: float 6s ease-in-out infinite; }
.flamenco-dot-2{ top:60%; right:10%; animation: float 7s ease-in-out infinite 1s; }
.flamenco-dot-3{ bottom:30%; left:15%; animation: float 5s ease-in-out infinite .5s; }
.tango-curve{ position:absolute; width:200px; height:200px; border:2px solid rgba(179,18,43,.15);
border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; animation: morphing 15s infinite linear; z-index:-1; }
@keyframes morphing {
0% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
25% { border-radius: 53% 47% 32% 68%/63% 38% 62% 37%; }
50% { border-radius: 40% 60% 70% 30%/30% 70% 30% 70%; }
75% { border-radius: 33% 67% 47% 53%/67% 33% 67% 33%; }
100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
}
.tango-curve-1{ top:10%; right:5%; }
.tango-curve-2{ bottom:15%; left:8%; }
/* ==================
MEDIA
================== */
@media (max-width: 1199px){
.hero-title{ font-size: 3rem; }
}
@media (max-width: 991px){
:root{ --nav-h: 70px; }
.section{ padding:5rem 0; }
.hero-title{ font-size: 2.5rem; }
}
@media (max-width: 767px){
.hero-title{ font-size: 2.2rem; }
.hero-subtitle{ font-size: 1.1rem; }
.contact-card{ padding:1.5rem; }
}
@media (max-width: 575px){
.btn{ padding:.7rem 1.5rem; }
.navbar-brand{ font-size:1.2rem; }
}
/* Animaciones extra */
@keyframes fadeInUp { from{opacity:0; transform: translate3d(0,40px,0);} to{opacity:1; transform: translate3d(0,0,0);} }
@keyframes pulse { 0%{transform:scale(1);} 50%{transform:scale(1.05);} 100%{transform:scale(1);} }
@keyframes float { 0%{transform:translateY(0);} 50%{transform:translateY(-10px);} 100%{transform:translateY(0);} }
.animate-pulse{ animation: pulse 2s infinite; }
.animate-float{ animation: float 3s ease-in-out infinite; }
/* ===== INLINE <style> BLOCK #2 ===== */
/* Oculta la imagen de fondo del hero cuando el video está listo */
#inicio.video-ready::before{ opacity: 0; transition: opacity .6s ease; }
#inicio.video-failed::before{ opacity: 1; }
/* Asegura que el video siempre cubra el plano trasero */
#inicio .hero-video{ z-index: 0; }
#inicio::before{ z-index: -2; }
/* ===== INLINE <style> BLOCK #3 ===== */
/* Ocultar barra superior y gadget */
.goog-te-banner-frame.skiptranslate { display:none !important; }
.goog-te-banner-frame { display:none !important; }
.skiptranslate { display:none !important; }
#google_translate_element { display:none !important; }
.goog-te-gadget { height:0 !important; overflow:hidden !important; }
.goog-logo-link, .goog-te-gadget-icon { display:none !important; }
/* Evitar desplazamiento al agregar top al body/html */
html, body { top:0 !important; position: static !important; margin-top:0 !important; }
/* Tooltips/balloons */
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip { display:none !important; visibility:hidden !important; }
/* ===== INLINE <style> BLOCK #4 ===== */
.brand-img{ height:44px; width:auto; vertical-align:middle; }
/* ===== INLINE <style> BLOCK #5 ===== */
/* ======= Ajustes de altura (podés tocarlos) ======= */
:root{
--navbar-h: 72px; /* alto real de tu navbar */
--hero-extra: 32rem; /* extra de altura encima del alto de la ventana */
}
/* ======= HERO ======= */
.hero{
position: relative;
isolation: isolate; /* asegura stacking context para que nada tape el botón */
min-height: calc(100svh - var(--navbar-h) + var(--hero-extra));
color: #fff;
overflow: hidden;
}
/* Capa video al fondo */
.hero .hero-video{ position: absolute; inset: 0; z-index: 0; }
.hero .hero-video video{
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* llena el contenedor (puede recortar bordes) */
object-position: 50% 35%; /* mové el encuadre si hace falta: 50% 25% / 50% 60% */
background: #000;
}
/* Overlay para contraste (no bloquea clicks) */
.hero::after{
content:"";
position:absolute;
inset:0;
z-index:1;
background: linear-gradient(
to bottom,
rgba(0,0,0,.55),
rgba(0,0,0,.35) 40%,
rgba(0,0,0,.6)
);
pointer-events:none;
}
/* Contenido por encima del video */
.hero .hero-content{
position: relative;
z-index: 2;
padding-block: clamp(24px, 6vh, 80px);
}
/* En móviles muy chicos, sumá un poco más de altura si recorta */
@media (max-width: 576px){
:root{ --hero-extra: 36rem; }
}
/* ======= Botón de sonido (flotante fijo) ======= */
#btnSound.btn-sound{
position: fixed; /* siempre visible */
bottom: 16px;
right: 16px;
z-index: 9999;
padding: .55rem .9rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.35);
background: rgba(0,0,0,.55);
color: #fff;
font-size: .95rem;
line-height: 1;
backdrop-filter: blur(4px);
cursor: pointer;
transition: transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s;
}
#btnSound.btn-sound:hover{
transform: translateY(-1px);
background: rgba(0,0,0,.7);
border-color: rgba(255,255,255,.55);
}
/* Si preferís el botón dentro del hero, cambiá a:
position:absolute; top:1rem; right:1rem; z-index:10; */
/* ===== INLINE <style> BLOCK #6 ===== */
/* Miniatura uniforme 16:9 por card */
.obra-thumb{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
display:block;
border-top-left-radius:.75rem;
border-top-right-radius:.75rem;
}
/* Cards consistentes */
.card.card-soft{ display:flex; flex-direction:column; }
.card.card-soft .card-body{ display:flex; flex-direction:column; }
/* Clamp de descripción */
.obra-desc{
--lines: 4; /* líneas visibles antes de expandir */
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:var(--lines);
overflow:hidden;
}
.obra-desc.expanded{
-webkit-line-clamp:unset;
display:block;
}
/* Botón leer más estilo link */
.btn-readmore{
border:none;
background:transparent;
padding:0;
font-weight:600;
text-decoration:underline;
}
/* ===== INLINE <style> BLOCK #7 ===== */
.video-thumb .thumb-video{
width:100%; height:100%;
object-fit:cover; display:block;
background:#000; /* por si tarda en cargar */
}
.video-thumb:hover .bi-play-circle-fill{ transform:scale(1.08); }
/* ===== INLINE <style> BLOCK #8 ===== */
.alx-galeria{ --gap:16px; --thumb:260px; --radius:14px; --brd:#e9eef3; --shadow:0 8px 26px rgba(0,0,0,.08); --muted:#6b7280 }
.alx-galeria .section-title{ margin-bottom:4px }
.alx-galeria .small-muted{ color:var(--muted); font-size:.95rem }
.alx-country-head{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; }
.alx-country-head .country{ font-size:1.25rem; font-weight:700; letter-spacing:.3px; margin:0; display:flex; gap:8px; align-items:center }
.alx-country-head .country img{ width:22px; height:auto }
.alx-country-head .photog{ margin:0; color:var(--muted); font-weight:500 }
.alx-ticker{ position:relative; padding:12px; border-radius:16px; border:1px solid var(--brd); background:#fff; box-shadow:var(--shadow);
display:flex; gap:var(--gap); overflow:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.alx-ticker .tile{ flex:0 0 auto; width:var(--thumb); height:var(--thumb); border-radius:var(--radius); overflow:hidden; scroll-snap-align:start;
position:relative; border:1px solid #eef2f6; background:#f8fafc; transition:transform .18s ease, box-shadow .18s ease; cursor:zoom-in; }
.alx-ticker .tile:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12) }
.alx-ticker .tile img{ width:100%; height:100%; object-fit:cover; display:block }
.alx-ticker.is-marquee{ overflow:hidden; scroll-snap-type:none }
.alx-ticker .marquee-inner{ display:flex; width:max-content; gap:var(--gap); animation:alx-scroll var(--dur, 40s) linear infinite }
.alx-ticker.paused .marquee-inner{ animation-play-state:paused }
.alx-ticker .marquee-group{ display:flex; gap:var(--gap) }
@keyframes alx-scroll { 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }
#lb-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.92); z-index:2147483647 }
#lb-overlay.show{ display:flex }
#lb-overlay .lb-stage{ position:relative; width:100%; max-width:1200px; padding:0 64px }
#lb-overlay img{ width:100%; max-height:85vh; object-fit:contain; display:block }
#lb-overlay .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); border:0; width:48px; height:48px; border-radius:50%;
background:rgba(255,255,255,.22); color:#fff; font-size:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#lb-prev{ left:12px } #lb-next{ right:12px }
#lb-overlay .lb-nav:hover{ background:rgba(255,255,255,.33) }
#lb-close{ position:absolute; top:12px; right:12px; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.22);
color:#fff; font-size:26px; line-height:1; cursor:pointer; }
#lb-close:hover{ background:rgba(255,255,255,.33) }
#lb-caption{ position:absolute; left:0; right:0; bottom:0; color:#e5e7eb; padding:.6rem 1rem; display:flex; justify-content:space-between; align-items:center;
background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); }
#lb-meta b{ letter-spacing:.3px }
@media (max-width:576px){ .alx-galeria{ --thumb:200px } }
@media (prefers-reduced-motion: reduce){ .alx-ticker.is-marquee .marquee-inner{ animation:none !important } }
/* ===== INLINE <style> BLOCK #9 ===== */
/* ===== Scroller ===== */
#prensa .press-scroller{
position: relative;
overflow: hidden;
border-radius: var(--radius-xl, 16px);
box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,.08));
background: #fff;
padding: 12px 0;
isolation:isolate;
}
#prensa .press-track{
display: flex;
align-items: center;
gap: 16px;
will-change: transform;
animation: press-scroll 45s linear infinite;
animation-play-state: paused; /* solo corre al entrar en viewport */
padding: 6px 12px;
}
/* Miniaturas un poquito más grandes */
#prensa .press-item{
height: clamp(165px, 24vw, 240px);
width: auto;
border-radius: 12px;
box-shadow: 0 8px 22px rgba(0,0,0,.08);
object-fit: contain;
background:#000;
transition: transform .35s ease, box-shadow .35s ease;
cursor: pointer;
user-select: none;
}
#prensa .press-item[aria-hidden="true"]{ pointer-events: none; }
#prensa .press-item:hover{
transform: translateY(-3px) scale(1.015);
box-shadow: 0 16px 35px rgba(0,0,0,.15);
}
/* Gradientes laterales para fade */
#prensa .press-mask{
position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
#prensa .press-mask-left{ left:0; background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); }
#prensa .press-mask-right{ right:0; background:linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0)); }
@media (prefers-color-scheme: dark){
#prensa .press-mask-left{ background:linear-gradient(to right, rgba(255,255,255,.06), rgba(255,255,255,0)); }
#prensa .press-mask-right{ background:linear-gradient(to left, rgba(255,255,255,.06), rgba(255,255,255,0)); }
}
@keyframes press-scroll{
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* duplicamos la serie */
}
@media (hover:hover){
#prensa .press-scroller:hover .press-track{ animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce){
#prensa .press-track{ animation: none; }
}
#prensa .press-scroller.is-running .press-track{ animation-play-state: running; }
/* ===== INLINE <style> BLOCK #10 ===== */
/* ======== FIX MOBILE: video 100% responsive sin estirar ======== */
/* Teléfonos en vertical */
@media (max-width: 575.98px) and (orientation: portrait){
:root{
--hero-extra: 0rem; /* sin extra para que no corte */
}
.hero{
/* alto exacto de la ventana móvil (barra de direcciones incluida) */
min-height: calc(100dvh - var(--nav-h));
padding-top: var(--nav-h); /* si tu navbar es fixed */
}
.hero .hero-video{
position: absolute;
inset: 0;
}
.hero .hero-video video{
width: 100%;
height: 100%;
object-fit: contain; /* <- clave: no recorta ni deforma */
object-position: center center;
background: #000; /* franjas prolijas si no coincide el ratio */
}
/* el botón de sonido centrado para que no tape cosas */
#btnSound.btn-sound{
bottom: 12px;
right: 50%;
transform: translateX(50%);
}
}
/* Teléfonos en horizontal: se puede cubrir sin “aplastar” */
@media (max-width: 575.98px) and (orientation: landscape){
.hero{
min-height: calc(100dvh - var(--nav-h));
}
.hero .hero-video video{
object-fit: cover; /* aprovecha todo el ancho/alto */
object-position: 50% 50%;
}
}
/* Fallback si el navegador no soporta d vh */
@supports not (height: 100dvh) {
@media (max-width: 575.98px) and (orientation: portrait){
.hero{ min-height: calc(100vh - var(--nav-h)); }
}
}
/* Tablets chicas en vertical (opcional) */
@media (min-width: 576px) and (max-width: 991.98px) and (orientation: portrait){
.hero{
min-height: calc(100dvh - var(--nav-h));
}
.hero .hero-video video{
object-fit: contain;
background: #000;
}
}