/* Un plan de la agenda (/events/{slug}/), «El cartel» (docs/diseno-paginas/eventos.md). Solo se carga en esta página (gb_pieza() = evento); lo común (capítulos, hoja de mes, carteles, calendario, villa cerca) está en eventos.css, que la plantilla carga también. Todo acotado a body.vista-evento. Móvil primero. El movimiento va solo bajo html.animar (header.php): sin él, la página se ve completa y quieta. */ /* ── Portada: el cartel pegado y la fecha en grande ─────────────────────── */ .vista-evento .plan-portada { position: relative; isolation: isolate; color: #fff; padding-bottom: clamp(52px, 7vw, 104px); /* sin overflow: hidden, para que el desplegable del calendario pueda salir por abajo */ background: radial-gradient(110% 120% at 85% 0%, #135b6d 0%, var(--azul-noche) 48%, var(--azul-profundo) 100%); } .vista-evento .plan-portada::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--agd-firma); } .vista-evento .plan-portada__fondo { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; } .vista-evento .plan-portada__isla { position: absolute; right: -24%; bottom: -26%; width: min(120vw, 860px); aspect-ratio: 1080 / 874; overflow: visible; pointer-events: none; stroke: rgb(207 232 166 / 0.2); stroke-width: 2.5px; stroke-linejoin: round; --z-resto: rgb(255 255 255 / 0.02); fill-opacity: 0.22; } .vista-evento .plan-portada__dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .vista-evento .plan-portada__texto { min-width: 0; } .vista-evento .plan-portada__migas { margin-bottom: 18px; } .vista-evento .plan-portada__migas ol { color: rgb(255 255 255 / 0.72); } .vista-evento .plan-portada__migas a { color: #fff; } .vista-evento .plan-portada__migas [aria-current] { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .vista-evento .plan-portada__ante { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--agd-claro); } .vista-evento .plan-portada__ritmo { padding: 4px 12px; border: 1px solid rgb(207 232 166 / 0.4); border-radius: 999px; color: #fff; letter-spacing: 0.02em; text-transform: none; font-size: var(--t-xs); } .vista-evento .plan-portada__titulo { max-width: 15em; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.4rem); font-weight: 200; line-height: 0.98; letter-spacing: -0.03em; } /* El cartel. Las fotos de los eventos de la web actual tienen 400 px de ancho: a sangre solo en el móvil (menos de 600 px, a su tamaño); desde 600 px, pegado en la pared con su cinta (arriba en la tableta, al lado en escritorio) */ .vista-evento .plan-portada__cartel { position: relative; order: -1; margin: 0 calc(-1 * var(--hueco)); } .vista-evento .plan-portada__img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 295; object-fit: cover; background: var(--agd-noche); } .vista-evento .plan-portada__cartel::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(180deg, transparent, var(--azul-noche)); pointer-events: none; } .vista-evento .plan-portada__cinta { display: none; } .vista-evento .plan-portada__dentro { padding-top: 0; } /* Con JS la cabecera es transparente sobre la foto: su sombra para leerse */ @media (max-width: 599px) { .js .vista-evento .cabecera:not(.is-solida) { text-shadow: 0 1px 12px rgb(0 0 0 / 0.3); } .js .vista-evento .cabecera:not(.is-solida)::before { content: ""; position: absolute; inset: 0 0 -70px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(4 18 22 / 0.66) 0%, rgb(4 18 22 / 0.32) 55%, rgb(4 18 22 / 0) 100%); } } @media (min-width: 600px) { .vista-evento .plan-portada { padding-top: clamp(28px, 4vw, 64px); } .js .vista-evento .plan-portada { padding-top: calc(var(--cabecera) + clamp(28px, 4vw, 64px)); } .vista-evento .plan-portada__cartel { justify-self: center; width: min(100%, 470px); margin: 18px 0 0; padding: 14px; border-radius: 6px; background: #fff; transform: rotate(-1.8deg); box-shadow: 0 2px 4px rgb(0 0 0 / 0.12), 0 40px 80px rgb(0 0 0 / 0.38); } .vista-evento .plan-portada__cartel::after { display: none; } .vista-evento .plan-portada__img { border-radius: 2px; } /* La cinta: papel translúcido (sin vidrio: fondo casi opaco) */ .vista-evento .plan-portada__cinta { display: block; position: absolute; z-index: 1; top: -18px; left: 50%; width: 132px; height: 36px; transform: translateX(-50%) rotate(-3deg); background: rgb(242 247 230 / 0.82); box-shadow: 0 2px 6px rgb(0 0 0 / 0.18); transform-origin: 50% 50%; } .vista-evento .plan-portada__cinta::before, .vista-evento .plan-portada__cinta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8px; background: inherit; } .vista-evento .plan-portada__cinta::before { left: -6px; clip-path: polygon(100% 0, 0 12%, 60% 28%, 0 46%, 70% 64%, 0 82%, 100% 100%); } .vista-evento .plan-portada__cinta::after { right: -6px; clip-path: polygon(0 0, 100% 14%, 40% 30%, 100% 50%, 30% 66%, 100% 84%, 0 100%); } } @media (min-width: 900px) { .vista-evento .plan-portada__dentro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: clamp(40px, 6vw, 96px); } .vista-evento .plan-portada__cartel { order: 0; width: auto; margin: 0; } } /* La fecha en grande */ .vista-evento .plan-fecha { margin-top: 26px; } .vista-evento .plan-fecha__t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--agd-claro); } .vista-evento .plan-fecha__rel { letter-spacing: 0.02em; text-transform: none; } .vista-evento .plan-fecha__grande time { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); margin-top: 8px; } .vista-evento .plan-fecha__dia { font-family: var(--f-titulo); font-size: clamp(6rem, 3.6rem + 7vw, 10rem); font-weight: 200; line-height: 0.8; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--agd-claro) 10%, #8fd3d3 55%, #9fd0ec 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .vista-evento .plan-fecha__resto { display: grid; gap: 2px; padding-left: clamp(14px, 2vw, 22px); border-left: 1px solid rgb(255 255 255 / 0.22); } .vista-evento .plan-fecha__sem { font-family: var(--f-titulo); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-style: italic; line-height: 1.05; } .vista-evento .plan-fecha__mes { font-size: var(--t-l); color: rgb(255 255 255 / 0.85); } .vista-evento .plan-fecha__hora { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem); color: var(--agd-claro); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .vista-evento .plan-fecha__mas { margin-top: 12px; color: rgb(255 255 255 / 0.75); } .vista-evento .plan-fecha--fin .plan-fecha__t { font-size: var(--t-l); letter-spacing: 0; text-transform: none; color: #fff; } .vista-evento .plan-fecha__vuelve { margin-top: 8px; color: rgb(255 255 255 / 0.85); } .vista-evento .plan-fecha__vuelve .por-confirmar { text-decoration-color: var(--agd-c2); } .vista-evento .plan-portada__botones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; margin-top: 28px; } .vista-evento .plan-portada__botones .boton .icono { transform: none !important; } .vista-evento .plan-portada__botones .boton--contorno { border-color: rgb(255 255 255 / 0.5); color: #fff; } .vista-evento .plan-portada__botones .boton--contorno:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); } .vista-evento .plan-portada__llegar { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: #fff; font-size: var(--t-m); text-underline-offset: 4px; } .vista-evento .plan-portada__llegar .icono { color: var(--agd-claro); } .vista-evento .plan-portada .agd-cal__panel .icono { color: var(--azul); } /* ── Los capítulos ──────────────────────────────────────────────────────── */ .vista-evento .plan-cap { padding-block: clamp(64px, 9vw, 120px); scroll-margin-top: var(--cabecera); } .vista-evento .plan-cuando { background: var(--arena); } .vista-evento .plan-texto { background: var(--papel); } .vista-evento .plan-donde { background: var(--verde-claro); } .vista-evento .plan-dormir { background: var(--papel); } .vista-evento .plan-cerca { background: var(--arena); } /* 01 · Cuándo */ .vista-evento .plan-cuando__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; } .vista-evento .plan-cuando__horarios { display: grid; gap: 12px; } .vista-evento .plan-cuando__horarios li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-l); line-height: 1.35; } .vista-evento .plan-cuando__horarios .icono { width: 24px; height: 24px; margin-top: 3px; color: color-mix(in srgb, var(--c) 55%, #000); } .vista-evento .plan-cuando__sig-t { margin-top: 30px; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); } .vista-evento .plan-cuando__fichas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .vista-evento .plan-cuando__fichas time { display: grid; justify-items: center; min-width: 74px; padding: 10px 8px 9px; border-radius: 16px; background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgb(15 76 92 / 0.06), 0 8px 20px rgb(15 76 92 / 0.06); text-align: center; } .vista-evento .plan-cuando__fichas .is-primera time { background: var(--azul-noche); color: #fff; } .vista-evento .plan-cuando__f-sem, .vista-evento .plan-cuando__f-mes { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; } .vista-evento .plan-cuando__f-dia { font-family: var(--f-titulo); font-size: 2rem; font-weight: 300; line-height: 1; } .vista-evento .plan-cuando__f-hora { margin-top: 4px; font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--c) 55%, #000); } .vista-evento .plan-cuando__fichas .is-primera .plan-cuando__f-hora { color: var(--agd-claro); } .vista-evento .plan-cuando__cal { margin-top: 28px; } .vista-evento .plan-cuando__asi { margin-bottom: 14px; font-family: var(--f-titulo); font-size: 1.5rem; font-style: italic; color: var(--tinta-suave); } .vista-evento .plan-cuando__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; } .vista-evento .plan-cuando__lista .hoja-mes { width: auto; max-width: 440px; } /* Escritorio: el horario a la izquierda, las próximas fechas y el calendario a la derecha; los meses, debajo a lo ancho */ @media (min-width: 1000px) { .vista-evento .plan-cuando__texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h t" "h f" "h c"; grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; } .vista-evento .plan-cuando__horarios { grid-area: h; } .vista-evento .plan-cuando__sig-t { grid-area: t; margin-top: 0; } .vista-evento .plan-cuando__fichas { grid-area: f; } .vista-evento .plan-cuando__cal { grid-area: c; } .vista-evento .plan-cuando__texto:not(:has(.plan-cuando__fichas)) { grid-template-areas: "h c"; grid-template-rows: auto; } } /* 02 · El plan: texto con capitular y el programa como línea de tiempo */ .vista-evento .plan-texto__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } .vista-evento .plan-texto__prosa { max-width: 40em; } .vista-evento .plan-texto__prosa p { font-size: var(--t-l); line-height: 1.6; } .vista-evento .plan-texto__prosa p + p { margin-top: 1em; } .vista-evento .plan-texto__entrada::first-letter { float: left; margin: 0.06em 0.1em 0 0; font-family: var(--f-titulo); font-size: 4.1em; font-weight: 200; line-height: 0.78; color: var(--verde-oscuro); } .vista-evento .plan-programa__t { margin-bottom: 20px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 200; } .vista-evento .plan-programa__lista { position: relative; display: grid; gap: 22px; padding-left: 30px; } .vista-evento .plan-programa__lista::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--verde), #5fb0b0, var(--azul)); } .vista-evento .plan-programa__item { position: relative; } .vista-evento .plan-programa__item::before { content: ""; position: absolute; left: -30px; top: 0.35em; width: 16px; height: 16px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 2px var(--azul-noche); } .vista-evento .plan-programa__cuando { font-family: var(--f-titulo); font-size: 1.3rem; font-style: italic; line-height: 1.2; color: var(--verde-oscuro); } .vista-evento .plan-programa__que { margin-top: 4px; font-size: var(--t-m); color: var(--tinta); } /* Sin programa: la cita, en grande y en cursiva */ .vista-evento .plan-cita { margin: 0; padding-left: clamp(20px, 3vw, 36px); border-left: 2px solid transparent; border-image: linear-gradient(180deg, var(--verde), #5fb0b0, var(--azul)) 1; } .vista-evento .plan-cita blockquote { margin: 0; } .vista-evento .plan-cita p { font-family: var(--f-titulo); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-style: italic; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; color: var(--verde-oscuro); } .vista-evento .plan-cita p::before { content: "«"; margin-right: 0.08em; } .vista-evento .plan-cita p::after { content: "»"; margin-left: 0.08em; } :lang(en) .vista-evento .plan-cita p::before { content: "“"; } :lang(en) .vista-evento .plan-cita p::after { content: "”"; } @media (min-width: 1000px) { .vista-evento .plan-texto__rejilla:has(.plan-cita) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; } .vista-evento .plan-texto__rejilla:has(.plan-programa) .plan-texto__prosa { position: sticky; top: calc(var(--cabecera) + 32px); } .vista-evento .plan-texto__rejilla:has(.plan-programa) { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 96px); align-items: start; } } /* 03 · Dónde: la isla grande */ .vista-evento .plan-donde__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; } .vista-evento .plan-donde__mapa { margin: 0; } .vista-evento .plan-donde__mapa svg { display: block; width: 100%; height: auto; overflow: visible; } .vista-evento .plan-donde__zona { fill: #fff; stroke: rgb(61 107 31 / 0.38); stroke-width: 2.5px; stroke-linejoin: round; } .vista-evento .plan-donde__zona.is-suya { fill: url(#donde-suya); stroke: #fff; stroke-width: 3px; } .vista-evento .plan-donde__casa circle { fill: rgb(255 255 255 / 0.55); stroke: var(--azul); stroke-width: 3px; } .vista-evento .plan-donde__casa text { fill: var(--azul); font-family: var(--f-texto); font-size: 26px; font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 5px; } .vista-evento .plan-donde__pin-halo { fill: rgb(7 42 51 / 0.16); } .vista-evento .plan-donde__pin-punto { fill: var(--agd-noche); stroke: #fff; stroke-width: 5px; } .vista-evento .plan-donde__leyenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: var(--t-s); color: var(--tinta-suave); } .vista-evento .plan-donde__l { display: inline-flex; align-items: center; gap: 8px; } .vista-evento .plan-donde__l::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; } .vista-evento .plan-donde__l--pin::before { background: var(--agd-noche); box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(7 42 51 / 0.16); } .vista-evento .plan-donde__l--zona::before { border-radius: 4px; background: linear-gradient(135deg, #90c947, #2f8fb8); } .vista-evento .plan-donde__l--casa::before { background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 2px var(--azul); } .vista-evento .plan-donde__lugar { font-family: var(--f-titulo); font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 200; line-height: 1.1; } .vista-evento .plan-donde__zona-d { margin-top: 12px; font-size: var(--t-l); color: var(--tinta-suave); } .vista-evento .plan-donde__nota { margin-top: 12px; font-size: var(--t-s); color: var(--tinta-suave); } .vista-evento .plan-donde__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .vista-evento .plan-donde__botones .icono { transform: none !important; } @media (min-width: 900px) { .vista-evento .plan-donde__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); } } /* 04 · Duerme cerca */ .vista-evento .plan-dormir__casas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; } .vista-evento .plan-dormir__nota { margin-top: 18px; font-size: var(--t-xs); color: var(--tinta-suave); } .vista-evento .plan-dormir__reservar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 64px); } .vista-evento .plan-buscar { padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--verde-claro); } .vista-evento .plan-buscar__t { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 200; line-height: 1.1; } .vista-evento .plan-buscar__d { margin-top: 8px; color: var(--tinta-suave); } .vista-evento .plan-buscar__campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 20px; } .vista-evento .plan-buscar__campo { display: grid; gap: 6px; } .vista-evento .plan-buscar__campo--personas { grid-column: 1 / -1; } .vista-evento .plan-buscar__campo label { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); } .vista-evento .plan-buscar__campo input { width: 100%; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--linea); border-radius: 14px; background: #fff; font-size: var(--t-m); } .vista-evento .plan-buscar__campo input:focus-visible { border-color: var(--verde-oscuro); outline-offset: 1px; } .vista-evento .plan-buscar__boton { width: 100%; margin-top: 18px; } .vista-evento .plan-buscar__nota { margin-top: 10px; font-size: var(--t-xs); color: var(--tinta-suave); } .vista-evento .plan-wa { display: grid; align-content: start; justify-items: start; gap: 10px; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--azul-noche); color: #fff; } .vista-evento .plan-wa__icono { width: 40px; height: 40px; color: var(--whatsapp); } .vista-evento .plan-wa__t { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 200; line-height: 1.1; } .vista-evento .plan-wa__d { color: rgb(255 255 255 / 0.82); } .vista-evento .plan-wa .boton { margin-top: 8px; } .vista-evento .plan-wa__zona { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: #fff; text-underline-offset: 4px; } .vista-evento .plan-wa__zona .icono { transition: transform var(--suave); } .vista-evento .plan-wa__zona:hover .icono { transform: translateX(4px); } @media (min-width: 640px) { .vista-evento .plan-dormir__casas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vista-evento .plan-buscar__campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr); } .vista-evento .plan-buscar__campo--personas { grid-column: auto; } } @media (min-width: 960px) { .vista-evento .plan-dormir__reservar { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .vista-evento .plan-buscar__boton { width: auto; } } /* 05 · Y cerca */ .vista-evento .plan-cerca__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .vista-evento .plan-sitio { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 1px 2px rgb(15 76 92 / 0.06), 0 14px 40px rgb(15 76 92 / 0.07); } .vista-evento .plan-sitio__foto { overflow: hidden; aspect-ratio: 16 / 10; background: var(--verde-claro); } .vista-evento .plan-sitio__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--agd-ease); } .vista-evento .plan-sitio:hover .plan-sitio__img { transform: scale(1.04); } .vista-evento .plan-sitio__texto { padding: clamp(20px, 3vw, 30px); } .vista-evento .plan-sitio__ante { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde-oscuro); } .vista-evento .plan-sitio__nombre { margin-top: 8px; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 200; line-height: 1.05; } .vista-evento .plan-sitio__nombre small { margin-left: 6px; font-family: var(--f-texto); font-size: var(--t-s); color: var(--tinta-suave); } .vista-evento .plan-sitio__comida { margin-top: 10px; font-size: var(--t-m); } .vista-evento .plan-sitio__consejo { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--arena); font-size: var(--t-s); } .vista-evento .plan-sitio__enlaces { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; } .vista-evento .plan-sitio__enlaces a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--verde-oscuro); text-underline-offset: 4px; } .vista-evento .plan-otros__t, .vista-evento .plan-compartir__t { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 200; line-height: 1.1; } .vista-evento .plan-otros__lista { display: grid; gap: 22px; margin-top: 20px; } .vista-evento .cartel--mini { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); align-items: center; gap: 18px; } .vista-evento .cartel--mini .cartel__imagen { padding: 10px 0 0 8px; } .vista-evento .cartel--mini .cartel__imagen::before { display: none; } .vista-evento .cartel--mini .cartel__marco { padding: 5px; } .vista-evento .cartel--mini .cartel__sello { min-width: 54px; padding: 5px 6px; border-radius: 10px; } .vista-evento .cartel--mini .cartel__sello-dia { font-size: 1.5rem; } .vista-evento .cartel--mini .cartel__sello-sem, .vista-evento .cartel--mini .cartel__sello-mes { font-size: 0.625rem; letter-spacing: 0.12em; } .vista-evento .cartel--mini .cartel__titulo { margin-top: 6px; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); } .vista-evento .cartel--mini .cartel__ante { font-size: 0.75rem; } .vista-evento .cartel--mini .cartel__proxima { margin-top: 6px; font-size: var(--t-s); } .vista-evento .cartel--mini.is-pasado .cartel__img { filter: grayscale(1); } .vista-evento .cartel--mini.is-pasado .cartel__sello { background: #5d6b70; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9aa6aa; } .vista-evento .plan-otros__agenda { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; color: var(--verde-oscuro); font-size: var(--t-m); text-underline-offset: 4px; } .vista-evento .plan-otros__agenda .icono { transition: transform var(--suave); } .vista-evento .plan-otros__agenda:hover .icono { transform: translateX(4px); } .vista-evento .plan-compartir { display: grid; justify-items: start; gap: 8px; padding: clamp(22px, 3vw, 30px); border-radius: 26px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); } .vista-evento .plan-compartir__icono { width: 34px; height: 34px; color: var(--azul); } .vista-evento .plan-compartir__d { color: var(--tinta-suave); } .vista-evento .plan-compartir__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .vista-evento .plan-compartir__botones .icono { transform: none !important; } .vista-evento .plan-compartir__wa { color: #1da851; } .vista-evento .plan-compartir__botones .boton:hover .plan-compartir__wa { color: #fff; } .vista-evento .plan-compartir__aviso { min-height: 1.4em; font-size: var(--t-s); color: var(--verde-oscuro); } @media (min-width: 1000px) { .vista-evento .plan-cerca__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: start; } .vista-evento .plan-sitio { grid-row: span 2; } .vista-evento .plan-cerca__rejilla:not(:has(.plan-sitio)) .plan-otros { grid-row: span 2; } } /* ── Movimiento (solo con html.animar) ──────────────────────────────────── */ @keyframes plan-pega { from { transform: rotate(-7deg) translateY(-30px) scale(1.04); } 65% { transform: rotate(-1deg) translateY(3px); } } @keyframes plan-cinta { from { transform: translateX(-50%) rotate(-3deg) scaleX(0); } } @keyframes plan-sube { from { opacity: 0; transform: translateY(18px); } } @keyframes plan-casa { from { transform: scale(0); } } .animar .vista-evento .plan-portada__texto > * { animation: plan-sube 0.85s var(--agd-ease) backwards; } .animar .vista-evento .plan-portada__ante { animation-delay: 0.05s; } .animar .vista-evento .plan-portada__titulo { animation-delay: 0.12s; } .animar .vista-evento .plan-fecha { animation-delay: 0.24s; } .animar .vista-evento .plan-portada__botones { animation-delay: 0.34s; } @media (min-width: 600px) { .animar .vista-evento .plan-portada__cartel { animation: plan-pega 1s var(--agd-ease) 0.15s backwards; } .animar .vista-evento .plan-portada__cinta { animation: plan-cinta 0.5s var(--agd-ease) 0.95s backwards; transform-origin: 0 50%; } } /* La isla grande: se enciende su municipio y aparecen las casas y el punto */ .animar .vista-evento .con-revela .plan-donde__mapa:not(.is-revelada) .is-suya { fill-opacity: 0; } .animar .vista-evento .plan-donde__mapa.is-revelada:not(.sin-entrada) .is-suya { transition: fill-opacity 1s ease 0.2s; } .vista-evento .plan-donde__casa, .vista-evento .plan-donde__pin { transform-box: fill-box; transform-origin: 50% 50%; } .animar .vista-evento .con-revela .plan-donde__mapa:not(.is-revelada) :is(.plan-donde__casa, .plan-donde__pin) { transform: scale(0); } .animar .vista-evento .plan-donde__mapa.is-revelada:not(.sin-entrada) .plan-donde__casa { transition: transform 0.55s cubic-bezier(0.3, 1.45, 0.5, 1); transition-delay: calc(0.7s + var(--i, 0) * 0.12s); } .animar .vista-evento .plan-donde__mapa.is-revelada:not(.sin-entrada) .plan-donde__pin { transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.5s; } .animar .vista-evento .con-revela .plan-donde__mapa[data-revela]:not(.is-revelada) { transform: none; } /* El programa: cada línea sube al llegar (el texto, con su opacidad) */ .animar .vista-evento .con-revela .plan-programa__item:not(.is-revelada) { opacity: 0; } .animar .vista-evento .plan-programa__item.is-revelada:not(.sin-entrada) { transition: opacity 0.7s ease, transform 0.8s var(--agd-ease); transition-delay: calc(var(--i, 0) * 80ms); } /* Los