/* ============================================================
Teatro Corfú 7 — Landing de lanzamiento
============================================================ */
:root{
--black: #000000;
--white: #ffffff;
--lime: #C7CC00;
--blue: #019EC7;
--teal: #12A38C;
--ink-dim: rgba(255,255,255,.62);
--ink-faint: rgba(255,255,255,.38);
--hairline: rgba(255,255,255,.16);
--display: "tt-modernoir", sans-serif;
--body: "futura-100", sans-serif;
--tiny: "cofo-sans-pixel", sans-serif;
--container: 1160px;
--ease: cubic-bezier(.16,.8,.24,1);
/* Fixed header stack: announce bar + site nav + breathing room (desktop slim — see DESKTOP-HEADER-SLIM) */
/* ANNOUNCE-NAV-BREATH — was: clamp(20px,2.5vh,28px) / clamp(48px,5.5vh,60px) */
/* NAV-TALLER — was: clamp(64px,7vh,80px) / 64px / 60px */
--announce-h: clamp(22px, 2.8vh, 32px);
--nav-h: clamp(72px, 7.5vh, 88px);
/* NAV-SLIDER-GAP — was: clamp(48px, 5vh, 72px) */
--nav-slider-gap: clamp(56px, 6.5vh, 88px);
--header-offset: calc(var(--announce-h) + var(--nav-h) + var(--nav-slider-gap));
--bottom-bar-h: clamp(48px, 6vh, 60px);
}
*, *::before, *::after{ box-sizing: border-box; }
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
html, body{
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
body{
margin: 0;
background: var(--black);
color: var(--white);
font-family: var(--body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
::selection{ background: var(--teal); color: var(--black); }
a{ color: inherit; }
:focus-visible{
outline: 1.5px solid var(--white);
outline-offset: 4px;
border-radius: 2px;
}
img{ max-width: 100%; display: block; }
h1, h2{
font-family: var(--corfu7-display);
font-weight: 700;
margin: 0;
text-wrap: balance;
}
p{ margin: 0; }
/* Announce bar lives entirely in site.css — no duplicate here */
/* ---------- Animated backdrop ---------- */
.backdrop{
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
/* gradiente base permanente: nunca queda en negro puro */
background:
radial-gradient(ellipse 80% 60% at 15% 20%, rgba(1,158,199,.18) 0%, transparent 70%),
radial-gradient(ellipse 70% 55% at 85% 80%, rgba(18,163,140,.16) 0%, transparent 70%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(1,158,199,.08) 0%, transparent 60%),
#08090d;
}
.blob-wrap{
position: absolute;
inset: 0;
transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
will-change: transform;
}
.blob{
position: absolute;
border-radius: 50%;
filter: blur(85px) saturate(1.7);
opacity: .68;
will-change: transform;
}
.blob-a{
width: 48vw; height: 48vw;
top: 5%; left: 5%;
background: var(--blue);
animation: drift-a 28s ease-in-out infinite;
}
.blob-b{
width: 42vw; height: 42vw;
top: 30%; left: 40%;
background: var(--teal);
opacity: .7;
animation: drift-b 36s ease-in-out infinite;
}
.blob-c{
width: 32vw; height: 32vw;
top: 10%; left: 55%;
background: var(--lime);
opacity: .35;
animation: drift-c 44s ease-in-out infinite;
}
/* Blob azul: recorre diagonal top-left → bottom-right y vuelve */
@keyframes drift-a{
0% { transform: translate(0, 0) scale(1); opacity: .68; }
18% { transform: translate(22vw, 8vh) scale(1.18); opacity: .72; }
35% { transform: translate(38vw, 28vh) scale(0.88); opacity: .60; }
52% { transform: translate(28vw, 52vh) scale(1.22); opacity: .75; }
70% { transform: translate(8vw, 62vh) scale(0.92); opacity: .64; }
85% { transform: translate(-4vw, 38vh) scale(1.14); opacity: .70; }
100% { transform: translate(0, 0) scale(1); opacity: .68; }
}
/* Blob verde-azul: movimiento lento y amplio, más vertical */
@keyframes drift-b{
0% { transform: translate(0, 0) scale(1); opacity: .70; }
22% { transform: translate(-18vw, -14vh) scale(1.20); opacity: .55; }
44% { transform: translate(-32vw, 10vh) scale(0.85); opacity: .75; }
66% { transform: translate(-14vw, 34vh) scale(1.15); opacity: .60; }
88% { transform: translate(6vw, 18vh) scale(0.90); opacity: .68; }
100% { transform: translate(0, 0) scale(1); opacity: .70; }
}
/* Blob lima: más pequeño y rápido, baila en el tercio derecho */
@keyframes drift-c{
0% { transform: translate(0, 0) scale(1); opacity: .35; }
25% { transform: translate(-12vw, 18vh) scale(1.25); opacity: .50; }
50% { transform: translate(-22vw, 42vh) scale(0.80); opacity: .28; }
75% { transform: translate(-6vw, 28vh) scale(1.18); opacity: .45; }
100% { transform: translate(0, 0) scale(1); opacity: .35; }
}
.grain{
position: absolute; inset: 0;
opacity: .04;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Ambiente teatral: focos y polvo ---------- */
.stage-glow{
position: fixed;
top: 30%; left: 50%;
width: 130vmax; height: 130vmax;
background: radial-gradient(circle, rgba(199,204,0,.1) 0%, rgba(1,158,199,.12) 32%, transparent 62%);
animation: glow-pulse 14s ease-in-out infinite, glow-drift 100s ease-in-out infinite alternate;
pointer-events: none;
z-index: 1;
}
@keyframes glow-pulse{
0%,100%{ opacity: .78; }
50%{ opacity: .92; }
}
@keyframes glow-drift{
0%{ transform: translate(calc(-50% - 1%), calc(-50% - .8%)); }
100%{ transform: translate(calc(-50% + 1%), calc(-50% + 1%)); }
}
.dust{
position: fixed; inset: 0;
z-index: 3;
pointer-events: none;
overflow: hidden;
}
.dust span{
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,.55);
box-shadow: 0 0 6px rgba(199,204,0,.5);
animation: dust-float linear infinite;
}
@keyframes dust-float{
0%{ transform: translateY(0); opacity: 0; }
12%{ opacity: .6; }
88%{ opacity: .35; }
100%{ transform: translateY(-62vh); opacity: 0; }
}
/* ---------- Telón ---------- */
.curtain{
position: fixed;
top: 0;
width: 50%; height: 100%;
z-index: 50;
background-color: #14161c;
background-image:
repeating-linear-gradient(90deg,
rgba(0,0,0,.34) 0px,
rgba(255,255,255,.09) 20px,
rgba(255,255,255,.16) 34px,
rgba(255,255,255,.03) 52px,
rgba(0,0,0,.24) 72px,
rgba(0,0,0,.38) 92px),
repeating-linear-gradient(90deg,
rgba(255,255,255,.04) 0px,
rgba(0,0,0,.14) 66px,
rgba(255,255,255,.04) 142px),
linear-gradient(180deg, #0a0c11 0%, #191d26 45%, #0a0c11 100%);
filter: blur(.6px) brightness(1.8);
box-shadow: inset 0 0 120px rgba(0,0,0,.65);
pointer-events: none;
}
.curtain-left{
left: 0;
transform-origin: top right;
box-shadow: inset -46px 0 80px rgba(0,0,0,.6);
}
.curtain-right{
right: 0;
transform-origin: top left;
box-shadow: inset 46px 0 80px rgba(0,0,0,.6);
}
.is-ready .curtain-left{
animation: curtain-open-left 1.7s ease-in-out forwards;
}
.is-ready .curtain-right{
animation: curtain-open-right 1.7s ease-in-out forwards;
}
@keyframes curtain-open-left{
0%{ transform: translate(0,0) rotate(0deg) scale(1,1); filter: blur(.6px) brightness(1.8); }
100%{ transform: translate(-100%,0) rotate(10deg) scale(.1,1.5); filter: blur(.6px) brightness(1); }
}
@keyframes curtain-open-right{
0%{ transform: translate(0,0) rotate(0deg) scale(1,1); filter: blur(.6px) brightness(1.8); }
100%{ transform: translate(100%,0) rotate(-10deg) scale(.1,1.5); filter: blur(.6px) brightness(1); }
}
@media (prefers-reduced-motion: reduce){
.stage-glow, .dust span{ display: none; }
}
/* ---------- Reveal on load ---------- */
.reveal{
opacity: 0;
transform: translateY(14px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.is-ready .reveal{
opacity: 1;
transform: translateY(0);
}
/* ---------- Single screen layout ---------- */
.screen{
position: relative;
z-index: 10;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: stretch;
padding:
calc(clamp(20px, 2.6vh, 28px) + clamp(8px, 1vh, 12px))
clamp(20px, 5vw, 56px)
calc(clamp(40px, 5.5vh, 56px) + clamp(8px, 1vh, 12px));
max-width: 1320px;
margin: 0 auto;
}
/* ---------- Center group: brand + event card, vertically centered as a unit ---------- */
.center-group{
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(24px, 3.8vh, 54px);
}
/* ---------- Home slider strip ---------- */
.visually-hidden{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.home-slider{
--slider-h: clamp(245px, 38vh, 450px);
/* SLIDER-TRANSITION — was: .55s opacity only */
--slider-transition: 700ms;
width: min(100%, var(--container));
max-width: var(--container);
margin-inline: auto;
/* SLIDER-VERTICAL-AIR — was: clamp(16px, 2.4vh, 28px) bottom only */
margin-top: clamp(8px, 1.2vh, 16px);
margin-bottom: clamp(32px, 4vh, 52px);
position: relative;
}
.home-slider__viewport{
position: relative;
height: var(--slider-h);
overflow: hidden;
background: #0a0c14;
border-radius: 10px;
border: 1px solid var(--hairline);
touch-action: pan-y;
}
.home-slider__track{
position: relative;
width: 100%;
height: 100%;
}
.home-slider__slide{
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
/* Delay visibility:hidden until fade-out completes for smooth crossfade */
transition:
opacity var(--slider-transition) var(--ease),
visibility 0ms linear var(--slider-transition);
pointer-events: none;
}
.home-slider__slide.is-active{
opacity: 1;
visibility: visible;
transition:
opacity var(--slider-transition) var(--ease),
visibility 0ms;
pointer-events: auto;
z-index: 1;
}
.home-slider__slide img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.035);
transition: transform var(--slider-transition) var(--ease);
}
.home-slider__slide.is-active img{
transform: scale(1);
}
/* SLIDER-ARROWS-MINIMAL — revert: restore circular bg/border on .home-slider__prev/.home-slider__next */
.home-slider__prev,
.home-slider__next{
position: absolute;
top: 50%;
z-index: 3;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 10px;
border: none;
border-radius: 0;
background: transparent;
color: rgba(255,255,255,.82);
cursor: pointer;
backdrop-filter: none;
transition: color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.home-slider__prev svg,
.home-slider__next svg{
width: clamp(22px, 2.8vw, 30px);
height: clamp(22px, 2.8vw, 30px);
filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.home-slider__prev{
left: clamp(4px, 1vw, 12px);
}
.home-slider__next{
right: clamp(4px, 1vw, 12px);
}
.home-slider__prev:hover,
.home-slider__next:hover,
.home-slider__prev:focus-visible,
.home-slider__next:focus-visible{
background: transparent;
color: var(--white);
transform: translateY(-50%) scale(1.06);
}
/* HOME-SLIDER-DOTS-REMOVED — revert: restore markup + .home-slider__dots/.home-slider__dot blocks */
.home-slider__dots{
display: none;
}
@media (prefers-reduced-motion: reduce){
.home-slider__slide,
.home-slider__slide img{
transition: none;
}
}
@media (max-width: 600px){
.home-slider{
--slider-h: clamp(220px, 33vh, 365px);
margin-bottom: clamp(24px, 3.2vh, 36px);
}
}
/* HOME-SLIDER-OVERLAY START — Option A: bottom-left text + light gradient scrim */
.home-slider__overlay{
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
text-align: left;
/* Inline padding clears ~44px arrow touch targets at viewport edges */
padding-block: clamp(14px, 3vw, 28px);
padding-inline: clamp(48px, 10vw, 72px);
pointer-events: none;
background: linear-gradient(
18deg,
rgba(0,0,0,.25) 0%,
rgba(0,0,0,.12) 32%,
transparent 58%
);
}
/* SLIDER-OVERLAY-TYPE-BUMP */
.home-slider__tag{
font-family: var(--tiny);
font-size: clamp(.72rem, 1.15vw + .52rem, 1.05rem);
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(255,255,255,.88);
margin: 0;
max-width: 100%;
text-shadow:
0 1px 6px rgba(0,0,0,.55),
0 2px 12px rgba(0,0,0,.35);
}
.home-slider__title{
font-family: var(--corfu7-display);
font-weight: 700;
font-size: clamp(1.8rem, 3.5vw + 1rem, 3.5rem);
line-height: 1.08;
letter-spacing: -.01em;
text-transform: uppercase;
color: #fff;
margin: clamp(6px, 1.2vw, 12px) 0 0;
width: 100%;
max-width: min(18ch, 100%);
text-wrap: balance;
text-shadow:
0 2px 14px rgba(0,0,0,.65),
0 1px 4px rgba(0,0,0,.5);
}
@media (max-width: 768px){
.home-slider__overlay{
padding-top: clamp(14px, 3vw, 24px);
padding-bottom: clamp(24px, 5vw, 36px);
}
.home-slider__tag{
font-size: clamp(.78rem, 1.2vw + .58rem, 1.12rem);
}
.home-slider__title{
font-size: clamp(1.45rem, 3.2vw + .75rem, 3.2rem);
line-height: 1.04;
}
}
@media (min-width: 769px){
.home-slider__title{
max-width: min(22ch, 100%);
}
}
/* HOME-SLIDER-OVERLAY END */
/* ---------- Unified home stage: tagline + cartelera ---------- */
.home-stage{
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(24px, 3.5vh, 40px);
}
.hero-tagline{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(8px, 1.2vh, 16px) 0 clamp(4px, .8vh, 12px);
}
.hero-tagline .hero-tag{
margin-top: 0;
}
.hero-tagline .hero-title{
margin-top: clamp(12px, 1.8vh, 20px);
font-size: clamp(1.5rem, 2.8vh + 1.2vw, 3rem);
text-transform: uppercase;
max-width: 920px;
}
.hero-tag{
font-family: var(--tiny);
font-size: clamp(.76rem, .9vh + .36rem, 1.15rem);
letter-spacing: .28em;
text-transform: uppercase;
color: rgba(255,255,255,.78);
margin-top: 0;
}
.hero-title{
font-size: clamp(1.45rem, 2.4vh + 1vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.01em;
font-weight: 700;
color: var(--white);
margin-top: clamp(10px, 1.4vh, 18px);
}
body.corfu7-home{
background: transparent;
}
/* ---------- Cartelera section ---------- */
.cartelera{
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(28px, 3.5vh, 40px);
}
.cartelera__header{
text-align: center;
padding: clamp(4px, .6vh, 8px) 0;
margin-bottom: clamp(4px, .8vh, 12px);
}
.cartelera__eyebrow{
font-family: var(--tiny);
font-size: clamp(.58rem, .35vw + .48rem, .72rem);
letter-spacing: .28em;
text-transform: uppercase;
color: rgba(199,204,0,.7);
margin: 0 0 clamp(8px, 1vh, 14px);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cartelera__title{
font-family: var(--corfu7-display);
font-size: clamp(1.6rem, 2.4vh + .9vw, 2.35rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--white);
position: relative;
display: inline-block;
padding-bottom: clamp(10px, 1.2vh, 16px);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cartelera__title::after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: clamp(44px, 8vw, 72px);
height: 2px;
background: linear-gradient(90deg, var(--lime), var(--teal) 50%, var(--blue));
border-radius: 1px;
opacity: .85;
}
/* ---------- Cartelera filters ---------- */
.cartelera-filters{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
gap: clamp(14px, 2vw, 28px);
padding: clamp(12px, 1.6vh, 18px) clamp(14px, 2vw, 22px);
border-radius: 10px;
border: 1px solid var(--hairline);
background: rgba(255,255,255,.03);
backdrop-filter: blur(8px);
}
.cartelera-filters__group{
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.cartelera-filters__label{
font-family: var(--tiny);
font-size: clamp(.58rem, .3vw + .5rem, .68rem);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-faint);
}
.cartelera-filters__pills{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.filter-pill{
font-family: var(--tiny);
font-size: clamp(.56rem, .28vw + .48rem, .68rem);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-dim);
background: rgba(255,255,255,.04);
border: 1px solid var(--hairline);
border-radius: 999px;
padding: .55em 1.1em;
cursor: pointer;
transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.filter-pill:hover{
color: var(--white);
border-color: rgba(18,163,140,.4);
}
.filter-pill.is-active{
color: var(--black);
border-color: transparent;
background: linear-gradient(100deg, var(--lime), var(--teal) 55%, var(--blue));
box-shadow: 0 4px 16px -4px rgba(1,158,199,.45);
}
/* DESKTOP-FILTERS-ROW START — revert: delete block; restores stacked label-above-pills layout */
@media (min-width: 769px) {
.cartelera-filters {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.2vw, 18px);
max-width: fit-content;
margin-left: auto;
margin-right: auto;
padding: clamp(8px, 1vh, 12px) clamp(12px, 1.4vw, 16px);
}
.cartelera-filters__group {
flex-direction: row;
align-items: center;
gap: clamp(6px, .8vw, 10px);
flex-shrink: 0;
}
.cartelera-filters__label {
flex-shrink: 0;
white-space: nowrap;
}
.cartelera-filters__pills {
flex-wrap: nowrap;
gap: 4px;
}
.filter-pill {
padding: .45em .8em;
white-space: nowrap;
}
}
/* DESKTOP-FILTERS-ROW END */
/* MOBILE-FILTER-DROPDOWNS START — revert: delete block */
.cartelera-filters__mobile-selects {
display: none;
}
.cartelera-filters__select-wrap {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.cartelera-filters__select-label {
font-family: var(--tiny);
font-size: .52rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-faint);
padding-left: 2px;
}
.cartelera-filters__select {
width: 100%;
min-height: 44px;
font-family: var(--body);
font-size: clamp(.82rem, .35vw + .74rem, .92rem);
color: var(--white);
background: rgba(255,255,255,.04);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: .55em 2em .55em .85em;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.55)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .75em center;
background-size: 12px 8px;
cursor: pointer;
outline: none;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.cartelera-filters__select:hover {
border-color: rgba(18,163,140,.4);
}
.cartelera-filters__select:focus-visible {
border-color: rgba(18,163,140,.55);
box-shadow: 0 0 0 3px rgba(18,163,140,.18);
}
@media (max-width: 768px) {
.cartelera-filters__mobile-selects {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
}
.cartelera-filters__group {
display: none;
}
.cartelera-filters {
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
padding: 8px 10px;
}
}
@media (min-width: 769px) {
.cartelera-filters__mobile-selects {
display: none !important;
}
}
/* MOBILE-FILTER-DROPDOWNS END */
/* CARTELERA-SPACING-TWEAK START — revert: delete block; restores pre-tweak vertical rhythm */
@media (min-width: 769px) {
.home-stage {
gap: clamp(32px, 4vh, 48px);
}
.cartelera {
gap: clamp(10px, 1.4vh, 16px);
}
.cartelera__header {
margin-bottom: 0;
padding: 0;
}
.cartelera__title {
padding-bottom: clamp(8px, 1vh, 12px);
}
.cartelera-filters {
gap: clamp(16px, 1.8vw, 24px);
}
.cartelera-filters__group + .cartelera-filters__group {
padding-left: clamp(12px, 1.4vw, 18px);
border-left: 1px solid var(--hairline);
}
}
/* CARTELERA-SPACING-TWEAK END */
.cartelera-empty{
font-family: var(--tiny);
font-size: clamp(.62rem, .35vw + .52rem, .76rem);
letter-spacing: .12em;
text-transform: uppercase;
text-align: center;
color: var(--ink-faint);
padding: clamp(24px, 3vh, 36px) 0;
}
/* ---------- Events grid ---------- */
.events-grid{
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(10px, 1.4vw, 16px);
padding-bottom: clamp(8px, 1.2vh, 16px);
}
.event-card{
display: flex;
flex-direction: column;
border-radius: 10px;
overflow: hidden;
background: rgba(255,255,255,.04);
border: 1px solid var(--hairline);
box-shadow: 0 8px 28px -8px rgba(0,0,0,.65);
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.event-card:hover{
transform: translateY(-4px);
box-shadow: 0 18px 44px -10px rgba(0,0,0,.8);
border-color: rgba(18,163,140,.35);
}
.event-card__img-wrap{
display: block;
line-height: 0;
flex: 1 1 auto;
position: relative;
}
.event-card__img-wrap img{
width: 100%;
height: auto;
display: block;
}
.event-card[hidden]{
display: none !important;
}
.event-card__cta.btn{
flex: 0 0 auto;
width: 100%;
background: transparent;
border: none;
border-top: 1px solid var(--hairline);
border-radius: 0;
color: rgba(255,255,255,.6);
letter-spacing: .2em;
font-size: clamp(.56rem, .35vw + .46rem, .68rem);
padding: clamp(.7em, 1.2vh, .9em) 1em;
box-shadow: none;
transition: background .25s var(--ease), color .25s var(--ease);
}
.event-card__cta.btn::before{ display: none; }
.event-card:hover .event-card__cta.btn{
background: rgba(18,163,140,.12);
color: var(--teal);
transform: none;
box-shadow: none;
}
@media (max-width: 600px) {
.events-grid{
grid-template-columns: repeat(2, 1fr);
gap: clamp(8px, 2.5vw, 12px);
padding-bottom: clamp(8px, 1.2vh, 16px);
}
}
/* ---------- Ubicación (fixed bottom bar) ---------- */
.bottom-bar{
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 100;
/* Dark bar tokens — immune to HOME-WHITE-BG body overrides */
--ink-dim: rgba(255,255,255,.62);
--ink-faint: rgba(255,255,255,.38);
--hairline: rgba(255,255,255,.16);
}
.ubicacion-strip{
position: static;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
text-align: center;
padding: clamp(7px, .9vh, 11px) clamp(16px, 4vw, 40px);
background: #0a0b0f;
border-top: 1px solid var(--hairline);
}
.ubicacion-strip .btn{
height: clamp(36px, 4vh, 44px);
padding-top: 0;
padding-bottom: 0;
}
.ubicacion-direccion{
font-family: var(--tiny);
font-size: clamp(.68rem, .4vw + .58rem, .82rem);
letter-spacing: .04em;
line-height: 1.3;
color: var(--ink-dim);
}
.ubicacion-strip__sep{
color: var(--ink-faint);
user-select: none;
font-size: clamp(.68rem, .4vw + .58rem, .82rem);
}
.footer-partner-inline{
display: inline-flex;
align-items: center;
gap: clamp(6px, 1vw, 10px);
}
.footer-partner-inline__label{
font-family: var(--tiny);
font-size: clamp(.62rem, .35vw + .52rem, .72rem);
letter-spacing: .06em;
color: var(--ink-faint);
white-space: nowrap;
}
.footer-partner-inline__logo{
height: clamp(16px, 2vw, 22px);
width: auto;
opacity: .88;
transition: opacity .25s var(--ease);
}
.footer-partner-inline__logo:hover{ opacity: 1; }
.social-icon{
flex: 0 0 auto;
width: clamp(36px, 4vh, 44px);
height: clamp(36px, 4vh, 44px);
border-radius: 50%;
border: 1px solid var(--hairline);
background: rgba(255,255,255,.03);
color: var(--ink-dim);
display: flex;
align-items: center;
justify-content: center;
transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.social-icon svg{ width: 55%; height: 55%; }
.social-icon:hover{
transform: translateY(-3px);
color: var(--black);
border-color: transparent;
background: linear-gradient(135deg, var(--lime), var(--teal) 55%, var(--blue));
box-shadow: 0 10px 26px -8px rgba(18,163,140,.55);
}
/* ---------- Buttons ---------- */
.btn{
font-family: var(--tiny);
font-size: .82rem;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1.1em 2.2em;
border-radius: 2px;
transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-primary{
position: relative;
overflow: hidden;
color: var(--white);
background: rgba(255,255,255,.03);
border: 1px solid var(--white);
box-shadow: 0 8px 24px -12px rgba(1,158,199,.4);
transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary::before{
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .45s ease;
}
.btn-primary:hover::before{ transform: translateX(120%); }
.btn-primary:hover{
color: var(--black);
border-color: transparent;
background: linear-gradient(100deg, var(--lime), var(--teal) 55%, var(--blue));
box-shadow: 0 16px 40px -10px rgba(1,158,199,.55), 0 0 0 1px rgba(255,255,255,.08);
transform: translateY(-3px) scale(1.015);
}
.btn-secondary{
color: var(--ink-dim);
background: transparent;
border: 1px solid var(--hairline);
}
.btn-secondary:hover{
color: var(--teal);
border-color: rgba(18,163,140,.45);
transform: translateY(-2px);
}
.btn-compact{
font-size: clamp(.62rem, .4vw + .52rem, .76rem);
padding: clamp(.7em, 1.4vh, .95em) clamp(1.1em, 2vw, 1.6em);
white-space: nowrap;
}
/* ============================================================
Responsive breakpoints
============================================================ */
/* --- Pantallas muy cortas (≤ 580px alto): compactar hero --- */
@media (max-height: 580px) {
.hero-tagline{ padding: clamp(4px, .8vh, 10px) 0; }
.hero-tagline .hero-title{ font-size: clamp(.95rem, 1.6vh + .5vw, 1.6rem); margin-top: clamp(6px, .8vh, 10px); }
.home-stage{ gap: clamp(16px, 2vh, 24px); }
.center-group{ gap: clamp(8px, 1.2vh, 16px); }
.cartelera-filters{ padding: 10px 12px; gap: 10px; }
}
/* .title-break: bloque en mobile, inline en desktop */
.title-break{ display: inline; }
/* --- Móvil portrait (≤ 600px ancho) --- */
@media (max-width: 600px) {
.title-break{ display: block; }
.ubicacion-strip{ gap: 10px 12px; padding: 10px 16px; flex-wrap: wrap; }
.ubicacion-direccion{ font-size: .68rem; flex: 1 1 100%; }
.ubicacion-strip__sep{ display: none; }
.footer-partner-inline__label{ white-space: normal; }
:root{
--bottom-bar-h: clamp(52px, 7vh, 64px);
}
/* Padding vertical: center-group gestiona el espacio sobre el footer */
.corfu7-home .screen{
padding-top: var(--header-offset);
padding-bottom: 0;
}
.hero-tagline .hero-title{
font-size: clamp(1.25rem, 5.8vw, 1.85rem);
margin-top: clamp(8px, 1vh, 12px);
max-width: none;
}
.cartelera-filters{
flex-direction: column;
align-items: stretch;
}
.cartelera-filters__group{
align-items: stretch;
}
.cartelera-filters__pills{
justify-content: flex-start;
}
.filter-pill{
min-height: 44px;
padding: .6em 1.15em;
}
.sala-stripe{
padding: clamp(12px, 2vh, 14px) clamp(14px, 3vw, 18px);
}
.sala-stripe__main{
gap: clamp(12px, 2.5vw, 16px);
}
.sala-stripe__main img{
width: 64px;
height: 64px;
}
.sala-stripe__pitch-link{
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Gaps: más aire entre secciones */
.center-group{ gap: clamp(20px, 2.8vh, 32px); }
}
@media (max-width: 768px){
:root{
/* ANNOUNCE-NAV-BREATH — was: clamp(20px,3vh,26px) / 52px */
/* NAV-TALLER — was: 64px */
--announce-h: clamp(22px, 3.2vh, 28px);
--nav-h: 72px;
/* NAV-SLIDER-GAP — was: clamp(40px, 4.5vh, 56px) */
--nav-slider-gap: clamp(48px, 5.5vh, 68px);
--header-offset: calc(var(--announce-h) + var(--nav-h) + var(--nav-slider-gap));
}
.announce-bar{ height: var(--announce-h); }
.announce-track p{ font-size: clamp(.58rem, 1.7vw, .72rem); }
}
@media (max-width: 480px) {
:root{
/* ANNOUNCE-NAV-BREATH — was: clamp(18px,2.8vh,22px) / 48px */
/* NAV-TALLER — was: 60px */
--announce-h: clamp(20px, 3vh, 24px);
--nav-h: 68px;
/* NAV-SLIDER-GAP — was: clamp(36px, 4vh, 48px) */
--nav-slider-gap: clamp(44px, 5vh, 60px);
--header-offset: calc(var(--announce-h) + var(--nav-h) + var(--nav-slider-gap));
}
.announce-track p{ font-size: clamp(.54rem, 1.5vw, .66rem); }
.ubicacion-strip{
gap: 8px;
padding: 10px 14px;
}
.footer-partner-inline{
flex: 1 1 100%;
justify-content: center;
}
.corfu7-home .screen{
--screen-pad-x: clamp(16px, 4vw, 20px);
padding-left: var(--screen-pad-x);
padding-right: var(--screen-pad-x);
}
}
/* MOBILE-FILTERS-COMPACT */
@media (max-width: 768px){
.cartelera{
gap: clamp(14px, 2vh, 24px);
}
.cartelera__header{
margin-bottom: 0;
padding: 0;
}
.cartelera__eyebrow{
margin-bottom: 6px;
}
.cartelera__title{
padding-bottom: clamp(6px, .8vh, 10px);
}
.cartelera-filters{
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
}
.cartelera-filters__group{
align-items: stretch;
gap: 4px;
min-width: 0;
}
.cartelera-filters__label{
font-size: .52rem;
letter-spacing: .14em;
padding-left: 2px;
}
.cartelera-filters__pills{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 5px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
padding-bottom: 1px;
margin: 0 -2px;
}
.cartelera-filters__pills::-webkit-scrollbar{
display: none;
}
.filter-pill{
flex-shrink: 0;
font-size: .54rem;
letter-spacing: .1em;
padding: .42em .88em;
min-height: 44px;
white-space: nowrap;
}
}
@media (max-width: 480px){
.cartelera-filters{
gap: 6px;
padding: 6px 8px;
}
.cartelera-filters__group{
gap: 3px;
}
.cartelera-filters__label{
font-size: .5rem;
}
.cartelera-filters__pills{
gap: 4px;
}
.filter-pill{
font-size: .52rem;
padding: .38em .78em;
min-height: 44px;
}
}
/* MOBILE-FILTERS-COMPACT END */
/* Nav styles live in site.css — loaded on all pages including home */
.corfu7-home .screen{
--screen-pad-x: clamp(20px, 5vw, 56px);
padding-top: var(--header-offset);
}
.corfu7-home .center-group{
justify-content: flex-start;
padding-top: 0;
padding-bottom: calc(clamp(64px, 9vh, 92px) + var(--bottom-bar-h) - clamp(64px, 8vh, 84px));
gap: clamp(28px, 4vh, 48px);
}
.sala-stripe{
display: flex;
flex-direction: column;
gap: clamp(10px, 1.4vh, 14px);
width: 100%;
max-width: 720px;
margin-inline: auto;
padding: clamp(12px, 1.6vh, 16px) clamp(16px, 2.5vw, 24px);
border-radius: 10px;
border: 1px solid var(--hairline);
background:
linear-gradient(90deg, rgba(1,158,199,.1) 0%, rgba(18,163,140,.06) 42%, rgba(255,255,255,.03) 100%);
backdrop-filter: blur(8px);
color: inherit;
transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.sala-stripe:has(.sala-stripe__main:hover){
border-color: rgba(18,163,140,.35);
background:
linear-gradient(90deg, rgba(1,158,199,.14) 0%, rgba(18,163,140,.1) 42%, rgba(255,255,255,.05) 100%);
box-shadow: 0 10px 28px -14px rgba(0,0,0,.45);
}
.sala-stripe__main{
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 22px);
text-decoration: none;
color: inherit;
transition: transform .3s var(--ease);
}
.sala-stripe__main:hover{
transform: translateY(-2px);
color: inherit;
}
.sala-stripe__main img{
width: clamp(64px, 9vw, 76px);
height: clamp(64px, 9vw, 76px);
aspect-ratio: 1;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.sala-stripe__text{
font-family: var(--tiny);
font-size: clamp(.56rem, .28vw + .48rem, .68rem);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-dim);
line-height: 1.4;
text-align: left;
flex: 1 1 auto;
}
.sala-stripe__text strong{
display: block;
font-family: var(--corfu7-display);
font-size: clamp(.95rem, 1.1vw + .45rem, 1.15rem);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--lime);
margin-bottom: .3em;
}
.sala-stripe__pitch{
margin: 0;
padding-top: clamp(10px, 1.2vh, 12px);
border-top: 1px solid var(--hairline);
font-family: var(--tiny);
font-size: clamp(.56rem, .28vw + .48rem, .68rem);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-dim);
line-height: 1.5;
text-align: center;
}
/* LINE-ACCENT-FIX START */
/* Sala stripe CTA — horizontal gradient underline only (no L-bracket) */
.sala-stripe__pitch-link{
position: relative;
display: inline-block;
font-weight: 700;
color: var(--white);
text-decoration: none;
border-left: none;
padding-left: 0;
transition: color .25s var(--ease);
}
.sala-stripe__pitch-link::before{
content: none;
display: none;
}
.sala-stripe__pitch-link::after{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -.14em;
height: 2px;
background: linear-gradient(90deg, var(--lime), var(--teal) 50%, var(--blue));
border-radius: 1px;
opacity: .9;
pointer-events: none;
}
.sala-stripe__pitch-link:hover,
.sala-stripe__pitch-link:focus-visible{
color: var(--lime);
}
.sala-stripe__pitch-link:hover::after,
.sala-stripe__pitch-link:focus-visible::after{
opacity: 1;
background: var(--lime);
}
/* LINE-ACCENT-FIX END */
/* NEWSLETTER-MODULE START — revert: delete this block to remove newsletter section */
.newsletter-module{
position: relative;
align-self: stretch;
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
padding: clamp(28px, 4.5vh, 52px) clamp(20px, 5vw, 56px);
border: none;
border-top: 1px solid rgba(255,255,255,.12);
border-bottom: 1px solid rgba(0,0,0,.12);
border-radius: 0;
background: linear-gradient(100deg, var(--lime) 0%, var(--teal) 25%, var(--blue) 50%, var(--teal) 75%, var(--lime) 100%);
background-size: 200% 100%;
animation: newsletter-gradient-shift 8s ease-in-out infinite alternate;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
overflow: hidden;
isolation: isolate;
}
/* NEWSLETTER-GRADIENT-ANIM START — revert: delete block; restore static background on .newsletter-module */
@keyframes newsletter-gradient-shift{
0%{ background-position: 0% 50%; }
100%{ background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
.newsletter-module{
background: linear-gradient(100deg, var(--lime) 0%, var(--teal) 52%, var(--blue) 100%);
background-size: auto;
animation: none;
}
}
/* NEWSLETTER-GRADIENT-ANIM END */
.newsletter-module::before{
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 120px 120px;
opacity: .07;
mix-blend-mode: soft-light;
pointer-events: none;
}
.newsletter-module__inner{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(18px, 2.5vh, 28px);
width: 100%;
max-width: min(1120px, 100%);
margin-inline: auto;
text-align: center;
}
.newsletter-module__title{
font-family: var(--corfu7-display);
font-size: clamp(1.15rem, 1.6vh + .65vw, 1.75rem);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.2;
color: #ffffff;
margin: 0;
max-width: 22ch;
text-wrap: balance;
text-shadow: 0 1px 18px rgba(0,0,0,.12);
}
.newsletter-module__form{
display: flex;
flex-direction: column;
align-items: stretch;
gap: clamp(12px, 1.6vh, 16px);
width: 100%;
max-width: min(360px, 100%);
margin: 0 auto;
}
.newsletter-module__field{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
text-align: left;
}
.newsletter-module__label{
font-family: var(--tiny);
font-size: clamp(.58rem, .3vw + .5rem, .68rem);
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.82);
}
.newsletter-module__input{
width: 100%;
height: 46px;
min-height: 46px;
font-family: var(--body);
font-size: clamp(.9rem, .35vw + .82rem, 1rem);
line-height: 1.2;
color: var(--black);
background: #ffffff;
border: 1px solid rgba(255,255,255,.65);
border-radius: 999px;
padding: 0 clamp(1em, 2.5vw, 1.25em);
box-shadow: 0 4px 18px -8px rgba(0,0,0,.18);
transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.newsletter-module__input::placeholder{
color: rgba(0,0,0,.38);
}
.newsletter-module__input:hover{
border-color: rgba(255,255,255,.85);
}
.newsletter-module__input:focus-visible{
outline: none;
border-color: #ffffff;
background: #ffffff;
box-shadow:
0 0 0 3px rgba(255,255,255,.35),
0 4px 18px -8px rgba(0,0,0,.2);
}
.newsletter-module__submit.btn-primary{
align-self: stretch;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
min-height: 46px;
min-width: clamp(140px, 40vw, 180px);
padding: 0 clamp(1.1em, 2vw, 1.6em);
border-radius: 999px;
cursor: pointer;
color: #ffffff;
background: #0a0c11;
border-color: rgba(255,255,255,.14);
box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
}
.newsletter-module__submit.btn-primary:hover:not(:disabled){
color: #ffffff;
background: #141820;
border-color: rgba(255,255,255,.22);
box-shadow: 0 10px 28px -10px rgba(0,0,0,.5);
transform: none;
}
.newsletter-module__submit.btn-primary:disabled{
opacity: .65;
cursor: not-allowed;
transform: none;
}
.newsletter-module__status{
margin: 0;
font-family: var(--tiny);
font-size: clamp(.58rem, .3vw + .5rem, .68rem);
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.92);
}
.newsletter-module__status[hidden]{
display: none !important;
}
.newsletter-module__status.is-success{
color: #ffffff;
}
@media (min-width: 769px){
.newsletter-module__inner{
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: clamp(28px, 4vw, 56px);
text-align: left;
}
.newsletter-module__title{
flex: 1 1 42%;
max-width: none;
}
.newsletter-module__form{
flex: 0 1 min(480px, 52%);
max-width: min(480px, 52%);
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: clamp(10px, 1.2vw, 14px);
}
.newsletter-module__field{
flex: 1 1 180px;
min-width: 0;
}
.newsletter-module__submit.btn-primary{
align-self: center;
min-width: auto;
width: auto;
}
.newsletter-module__status{
flex: 1 1 100%;
}
}
@media (max-width: 768px){
.newsletter-module{
padding: clamp(24px, 4vh, 36px) clamp(16px, 4vw, 24px);
}
.newsletter-module__title{
max-width: none;
font-size: clamp(1.05rem, 4.5vw, 1.35rem);
}
.newsletter-module__form{
width: 100%;
max-width: min(320px, 88vw);
margin-inline: auto;
}
.newsletter-module__submit.btn-primary{
width: 100%;
}
}
/* Newsletter flush against footer — no white gap below full-bleed band */
.corfu7-home .center-group:has(.newsletter-module){
padding-bottom: 0;
}
.corfu7-home .screen:has(.newsletter-module){
padding-bottom: 0;
}
/* NEWSLETTER-MODULE END */
/* === POLISH-PACK START === */
/* 2. Event cards hover + unified CTA */
.event-card{
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.event-card:hover{
transform: translateY(-2px);
box-shadow:
0 12px 32px -10px rgba(0,0,0,.72),
0 0 0 1px rgba(18,163,140,.35),
0 0 20px -8px rgba(199,204,0,.12);
border-color: rgba(199,204,0,.22);
}
.event-card__cta.btn{
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.event-card:hover .event-card__cta.btn,
.event-card__cta.btn:hover{
background: rgba(18,163,140,.1);
color: var(--lime);
border-top-color: rgba(199,204,0,.35);
text-decoration: underline;
text-underline-offset: .22em;
text-decoration-color: rgba(199,204,0,.45);
transform: none;
box-shadow: none;
}
/* 4. Empty state (home cartelera) */
.cartelera-empty{
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(12px, 2vh, 18px);
padding: clamp(28px, 4vh, 44px) clamp(16px, 4vw, 24px);
text-align: center;
}
.cartelera-empty[hidden]{
display: none !important;
}
.cartelera-empty__message{
margin: 0;
font-family: var(--tiny);
font-size: clamp(.62rem, .35vw + .52rem, .76rem);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-faint);
}
.cartelera-empty__reset{
cursor: pointer;
}
/* 6. Footer polish (home) */
.ubicacion-strip{
padding-top: clamp(12px, 1.4vh, 18px);
border-top: 1px solid rgba(255,255,255,.14);
box-shadow: inset 0 1px 0 rgba(18,163,140,.1);
}
/* === POLISH-PACK END === */
/* === MOBILE-FIX START === */
/* height:100% on html/body trapped overflow — home + programación (loads home.css) couldn't scroll on narrow viewports */
@media (max-width: 768px) {
html, body {
height: auto;
min-height: 100%;
}
.corfu7-home .screen {
min-height: auto;
padding-bottom: calc(var(--bottom-bar-h) + clamp(12px, 2vh, 20px));
}
.event-card__cta.btn {
min-height: 44px;
padding-top: .85em;
padding-bottom: .85em;
}
}
/* === MOBILE-FIX END === */
/* === MOBILE-FILTERS-COMPACT START === */
/* Revert: delete this block — restores taller stacked filter pills on mobile */
@media (max-width: 768px) {
.cartelera {
gap: clamp(14px, 2vh, 22px);
}
.cartelera__header {
margin-bottom: 0;
padding: 0;
}
.cartelera__eyebrow {
margin-bottom: clamp(4px, .6vh, 8px);
}
.cartelera__title {
padding-bottom: clamp(6px, .8vh, 10px);
}
.cartelera-filters {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 8px 10px;
}
.cartelera-filters__group {
align-items: stretch;
gap: 4px;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.cartelera-filters__label {
font-size: clamp(.52rem, .28vw + .44rem, .6rem);
letter-spacing: .14em;
}
.cartelera-filters__pills {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 5px;
padding-bottom: 2px;
margin: 0 -2px;
width: 100%;
max-width: 100%;
}
.cartelera-filters__pills::-webkit-scrollbar {
display: none;
}
.filter-pill {
flex-shrink: 0;
min-height: 44px;
padding: .45em .85em;
font-size: clamp(.5rem, .24vw + .44rem, .58rem);
letter-spacing: .1em;
}
}
/* === MOBILE-FILTERS-COMPACT END === */
/* HOME-WHITE-BG START — revert: delete this block to restore dark theatrical home */
body.corfu7-home{
--ink-dim: rgba(0,0,0,.62);
--ink-faint: rgba(0,0,0,.42);
--hairline: rgba(0,0,0,.12);
background: #ffffff;
color: var(--black);
}
body.corfu7-home .backdrop,
body.corfu7-home .stage-glow,
body.corfu7-home .dust,
body.corfu7-home .curtain{
display: none !important;
}
body.corfu7-home :focus-visible{
outline-color: var(--black);
}
body.corfu7-home .hero-tag{
color: rgba(0,0,0,.58);
}
body.corfu7-home .hero-title{
color: var(--black);
}
body.corfu7-home .cartelera__eyebrow{
color: rgba(100,105,0,.82);
}
body.corfu7-home .cartelera__title{
color: var(--black);
}
body.corfu7-home .cartelera-filters{
background: rgba(0,0,0,.025);
border-color: rgba(0,0,0,.1);
backdrop-filter: none;
}
body.corfu7-home .filter-pill{
color: rgba(0,0,0,.58);
background: #ffffff;
border-color: rgba(0,0,0,.14);
}
body.corfu7-home .filter-pill:hover{
color: var(--black);
border-color: rgba(18,163,140,.5);
}
body.corfu7-home .filter-pill.is-active{
color: var(--black);
}
body.corfu7-home .cartelera-filters__select {
color: var(--black);
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(0,0,0,0.45)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
border-color: rgba(0,0,0,.14);
}
body.corfu7-home .cartelera-filters__select-label {
color: rgba(0,0,0,.45);
}
body.corfu7-home .cartelera-empty,
body.corfu7-home .cartelera-empty__message{
color: var(--ink-faint);
}
body.corfu7-home .event-card{
background: #ffffff;
border-color: rgba(0,0,0,.1);
box-shadow: 0 4px 20px -6px rgba(0,0,0,.12);
}
body.corfu7-home .event-card:hover{
box-shadow:
0 10px 28px -8px rgba(0,0,0,.16),
0 0 0 1px rgba(18,163,140,.3),
0 0 16px -6px rgba(199,204,0,.1);
border-color: rgba(18,163,140,.35);
}
body.corfu7-home .event-card__cta.btn{
border-top-color: rgba(0,0,0,.1);
color: rgba(0,0,0,.55);
}
body.corfu7-home .event-card:hover .event-card__cta.btn,
body.corfu7-home .event-card__cta.btn:hover{
background: rgba(18,163,140,.08);
color: var(--teal);
border-top-color: rgba(18,163,140,.25);
}
body.corfu7-home .sala-stripe{
background: rgba(0,0,0,.025);
border-color: rgba(0,0,0,.1);
backdrop-filter: none;
}
body.corfu7-home .sala-stripe:has(.sala-stripe__main:hover){
background: rgba(1,158,199,.06);
border-color: rgba(18,163,140,.3);
box-shadow: 0 8px 24px -12px rgba(0,0,0,.12);
}
body.corfu7-home .sala-stripe__text{
color: rgba(0,0,0,.58);
}
body.corfu7-home .sala-stripe__text strong{
color: #6b7000;
}
body.corfu7-home .sala-stripe__pitch{
border-top-color: rgba(0,0,0,.1);
color: rgba(0,0,0,.58);
}
body.corfu7-home .sala-stripe__pitch-link{
color: var(--black);
}
body.corfu7-home .newsletter-module{
border-top-color: rgba(255,255,255,.14);
border-bottom-color: rgba(0,0,0,.1);
}
body.corfu7-home .newsletter-module__title{
color: #ffffff;
}
body.corfu7-home .newsletter-module__label{
color: rgba(255,255,255,.82);
}
body.corfu7-home .newsletter-module__input{
color: var(--black);
background: #ffffff;
border-color: rgba(255,255,255,.65);
}
body.corfu7-home .newsletter-module__input::placeholder{
color: rgba(0,0,0,.38);
}
body.corfu7-home .newsletter-module__input:hover{
border-color: rgba(255,255,255,.85);
}
body.corfu7-home .newsletter-module__input:focus-visible{
border-color: #ffffff;
background: #ffffff;
box-shadow:
0 0 0 3px rgba(255,255,255,.35),
0 4px 18px -8px rgba(0,0,0,.2);
}
body.corfu7-home .newsletter-module__status,
body.corfu7-home .newsletter-module__status.is-success{
color: rgba(255,255,255,.92);
}
body.corfu7-home .newsletter-module__submit.btn-primary{
color: #ffffff;
background: #0a0c11;
border-color: rgba(255,255,255,.14);
box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
}
body.corfu7-home .newsletter-module__submit.btn-primary:hover:not(:disabled){
color: #ffffff;
background: #141820;
border-color: rgba(255,255,255,.22);
}
/* Dark footer tokens — immune to HOME-WHITE-BG body overrides */
body.corfu7-home .site-footer,
body.corfu7-home .bottom-bar{
--ink-dim: rgba(255,255,255,.62);
--ink-faint: rgba(255,255,255,.38);
--hairline: rgba(255,255,255,.16);
}
/* HOME-WHITE-BG END */
/* === FOOTER-REDESIGN START === */
/* Full-bleed: Hello Elementor constrains .site-footer:not(.dynamic-footer) to ~1140px */
body .site-footer,
body .site-footer:not(.dynamic-footer),
.site-footer{
position: relative;
z-index: 1;
width: 100%;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
background: #0a0b0f;
border-top: 1px solid rgba(255,255,255,.14);
box-shadow: inset 0 1px 0 rgba(18,163,140,.1);
overflow: visible;
}
.bottom-bar{
width: 100%;
max-width: none;
left: 0;
right: 0;
}
.site-footer__main{
padding: clamp(32px, 4vh, 48px) clamp(20px, 5vw, 40px) calc(clamp(28px, 3.5vh, 40px) + var(--bottom-bar-h));
overflow: visible;
}
.site-footer__inner{
max-width: var(--container);
margin: 0 auto;
}
.site-footer__brand{
margin-bottom: clamp(22px, 3vh, 32px);
}
.site-footer__brand .site-footer__social{
margin-top: clamp(12px, 1.8vh, 16px);
}
.site-footer__logo{
display: inline-block;
margin-bottom: 0;
line-height: 0;
}
.site-footer__logo img{
display: block;
width: clamp(100px, 14vw, 120px);
height: auto;
filter: brightness(0) invert(1);
}
.site-footer__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3.5vw, 40px);
align-items: start;
overflow: visible;
}
.site-footer__col{
overflow: visible;
min-height: auto;
}
.site-footer__heading{
margin: 0 0 clamp(8px, 1.2vh, 12px);
font-family: var(--tiny);
font-size: clamp(.62rem, .35vw + .52rem, .72rem);
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--white);
}
.site-footer__list{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.site-footer__list a{
font-family: var(--body);
font-size: clamp(.84rem, .3vw + .76rem, .94rem);
line-height: 1.35;
color: var(--ink-dim);
text-decoration: none;
transition: color .25s var(--ease);
}
.site-footer__list a:hover{
color: var(--lime);
}
.site-footer__address{
margin: 0 0 clamp(10px, 1.5vh, 14px);
font-style: normal;
font-size: clamp(.84rem, .3vw + .76rem, .94rem);
line-height: 1.45;
color: var(--ink-dim);
}
.site-footer__address a{
color: var(--teal);
text-decoration: none;
}
.site-footer__address a:hover{
color: var(--lime);
}
.site-footer__directions{
margin-bottom: clamp(12px, 1.8vh, 16px);
}
.site-footer__social{
display: flex;
align-items: center;
gap: 14px;
margin-top: clamp(12px, 1.8vh, 16px);
}
.site-footer__social-link{
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.85);
border-radius: 50%;
border: 1px solid transparent;
transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.site-footer__social-link svg{
width: 100%;
height: 100%;
}
.site-footer__social-link:hover{
color: var(--black);
border-color: transparent;
background: linear-gradient(135deg, var(--lime), var(--teal) 55%, var(--blue));
box-shadow: 0 6px 18px -6px rgba(18,163,140,.45);
transform: translateY(-1px);
}
.site-footer__bar{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 20px;
padding: clamp(14px, 1.8vh, 20px) clamp(16px, 4vw, 40px);
background: #0a0b0f;
border-top: 1px solid rgba(255,255,255,.1);
}
.site-footer__copy{
margin: 0;
font-family: var(--tiny);
font-size: clamp(.62rem, .35vw + .52rem, .72rem);
letter-spacing: .06em;
color: var(--ink-faint);
}
.bottom-bar .site-footer__bar{
box-shadow: inset 0 1px 0 rgba(18,163,140,.08);
}
@media (max-width: 768px){
.site-footer__main{
padding-bottom: calc(clamp(40px, 6vh, 56px) + var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
}
.site-footer__inner{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(22px, 4vw, 32px);
}
.site-footer__brand{
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(12px, 2vh, 16px);
margin-bottom: 0;
}
.site-footer__grid{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: clamp(20px, 3.5vw, 28px);
}
.site-footer__col{
width: 100%;
max-width: 320px;
}
.site-footer__col:nth-child(2) .site-footer__list{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(16px, 5vw, 24px);
row-gap: 6px;
text-align: left;
}
.site-footer__col:nth-child(3){
padding-top: clamp(16px, 2.5vh, 20px);
border-top: 1px solid rgba(255,255,255,.1);
}
.site-footer__col:nth-child(3) .site-footer__directions{
display: inline-flex;
}
.site-footer__brand .site-footer__social{
justify-content: center;
margin-top: 0;
gap: 12px;
}
.site-footer__social-link{
width: 36px;
height: 36px;
padding: 8px;
box-sizing: border-box;
}
.site-footer__directions.btn{
min-height: 44px;
}
/* Legacy footer markup (no .site-footer__brand wrapper) */
.site-footer__inner:not(:has(.site-footer__brand)){
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.site-footer__inner:not(:has(.site-footer__brand)) > .site-footer__logo{
margin-bottom: 0;
}
}
@media (max-width: 600px){
.site-footer__bar{
padding: clamp(12px, 1.6vh, 16px) clamp(16px, 4vw, 40px);
}
}
/* === FOOTER-REDESIGN END === */
/* === MOB-FOOTER-B START === */
/* Opción B — Accordion footer mobile. Revert: delete this block */
/* Hide on desktop, show on mobile */
.mob-footer-b { display: none; }
@media (max-width: 768px) {
.site-footer__inner { display: none !important; }
.mob-footer-b { display: block; padding: 28px 20px calc(24px + var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px)); }
}
/* Brand: logo + social */
.mob-footer-b__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.mob-footer-b__logo img {
display: block;
width: 108px;
height: auto;
filter: brightness(0) invert(1);
}
/* Social */
.mob-footer-b__social {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.mob-footer-b__social-link {
width: 36px;
height: 36px;
padding: 8px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.85);
border-radius: 50%;
border: 1px solid transparent;
transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.mob-footer-b__social-link svg { width: 100%; height: 100%; }
.mob-footer-b__social-link:hover {
color: var(--black);
background: linear-gradient(135deg, var(--lime), var(--teal) 55%, var(--blue));
transform: translateY(-1px);
}
/* Accordions */
.mob-footer-b__accordions {
display: flex;
flex-direction: column;
}
.mob-footer-b__accordion {
border-top: 1px solid rgba(255,255,255,.1);
}
.mob-footer-b__accordion:last-child {
border-bottom: 1px solid rgba(255,255,255,.1);
}
.mob-footer-b__accordion > summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 4px;
cursor: pointer;
font-family: var(--tiny);
font-size: clamp(.64rem, .38vw + .54rem, .74rem);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--white);
user-select: none;
}
.mob-footer-b__accordion > summary::-webkit-details-marker { display: none; }
.mob-footer-b__accordion > summary::after {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--teal);
border-bottom: 1.5px solid var(--teal);
transform: rotate(45deg);
transition: transform .25s var(--ease);
margin-top: -3px;
}
.mob-footer-b__accordion[open] > summary::after {
transform: rotate(-135deg);
margin-top: 3px;
}
.mob-footer-b__accordion-body {
padding: 0 4px 16px;
}
/* Lists */
.mob-footer-b__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
}
.mob-footer-b__list a {
display: block;
padding: 4px 0;
font-family: var(--body);
font-size: clamp(.92rem, .34vw + .82rem, 1.02rem);
line-height: 1.35;
color: var(--ink-dim);
text-decoration: none;
transition: color .25s var(--ease);
}
.mob-footer-b__list a:hover { color: var(--lime); }
/* Address */
.mob-footer-b__address {
margin: 0 0 12px;
font-style: normal;
font-size: clamp(.92rem, .34vw + .82rem, 1.02rem);
line-height: 1.45;
color: var(--ink-dim);
text-align: left;
}
.mob-footer-b__address a { color: var(--teal); text-decoration: none; }
.mob-footer-b__address a:hover { color: var(--lime); }
/* Directions button */
.mob-footer-b__directions { min-height: 44px; }
/* === MOB-FOOTER-B END === */
/* === MOBILE-TYPE-BUMP START === */
/* Revert: delete this block to restore pre-bump mobile typography (home) */
@media (max-width: 768px){
.sala-stripe__text{
font-size: clamp(.62rem, .32vw + .52rem, .75rem);
}
.sala-stripe__text strong{
font-size: clamp(1.05rem, 1.2vw + .5rem, 1.25rem);
}
.sala-stripe__pitch{
font-size: clamp(.62rem, .32vw + .52rem, .75rem);
}
.event-card__cta.btn{
font-size: clamp(.62rem, .4vw + .5rem, .75rem);
letter-spacing: .16em;
}
}
/* === MOBILE-TYPE-BUMP END === */
/* === ANNOUNCE-TICKER-TYPE START === */
/* Revert: delete this block to restore pre-bump announce ticker typography */
:root{
/* was: clamp(22px, 2.8vh, 32px) */
--announce-h: clamp(38px, 4.8vh, 50px);
}
.announce-track p{
/* was: clamp(.62rem, .32vw + .54rem, .74rem) */
font-size: clamp(.74rem, .36vw + .62rem, .88rem);
}
@media (max-width: 768px){
:root{
/* was: clamp(22px, 3.2vh, 28px) */
--announce-h: clamp(26px, 3.6vh, 32px);
}
.announce-track p{
/* was: clamp(.58rem, 1.7vw, .72rem) */
font-size: clamp(.72rem, 2vw, .85rem);
}
}
@media (max-width: 480px){
:root{
/* was: clamp(20px, 3vh, 24px) */
--announce-h: clamp(24px, 3.4vh, 28px);
}
.announce-track p{
/* was: clamp(.54rem, 1.5vw, .66rem) */
font-size: clamp(.68rem, 1.85vw, .8rem);
}
}
/* === ANNOUNCE-TICKER-TYPE END === */