/* ========================================================= Presentación · Curso de Crecimiento Personal y Desarrollo Psicoafectivo — Madrid 2026 Oro de «El beso» sobre negro, con acentos de las joyas del cuadro (naranja, lapislázuli, violeta). ========================================================= */ @property --ang { syntax: ""; inherits: false; initial-value: 0deg; } :root { --bg: #0B0906; --bg-2: #15100A; --crema: #F6EEDC; --crema-2: rgba(246, 238, 220, .74); --crema-3: rgba(246, 238, 220, .52); --oro-claro: #F7E2A4; --oro: #E3B64F; --naranja: #F07A1E; --lapis: #4C7BE0; --violeta: #8A5CC8; --jade: #6FD39A; --linea: rgba(227, 182, 79, .16); --linea-2: rgba(227, 182, 79, .32); --degradado: linear-gradient(100deg, #F7E2A4 0%, #E3B64F 28%, #F07A1E 52%, #E3B64F 76%, #F7E2A4 100%); --serif: "Instrument Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --r: 20px; --maxw: 1180px; --ease: cubic-bezier(.2, .7, .2, 1); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--bg); color-scheme: dark; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--crema-2); /* Sin fondo propio: el de pasa al lienzo y así la capa .bg (z-index -1) queda visible */ background: transparent; -webkit-font-smoothing: antialiased; overflow-x: clip; } ::selection { background: rgba(240, 122, 30, .35); color: var(--crema); } img { max-width: 100%; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--oro); color: var(--bg); padding: 10px 16px; border-radius: 0 0 10px 0; } .skip:focus { left: 0; } .enlace { color: var(--oro-claro); text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; overflow-wrap: anywhere; } .enlace:hover { color: #fff; text-decoration-color: var(--naranja); } .enlace svg { width: 14px; height: 14px; vertical-align: -1px; margin-left: 2px; } /* --------------------------------------------------------- Fondo --------------------------------------------------------- */ .bg { --p: 0; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg__bruma { position: absolute; inset: -15%; background: url(/assets/klimt-bruma.webp) 78% 50% / 70% auto no-repeat; opacity: .22; filter: saturate(1.3); } .bg__halo { position: absolute; width: min(95vw, 1150px); aspect-ratio: 1; right: -22vw; top: 50%; translate: 0 -50%; background: radial-gradient(closest-side, rgba(240, 122, 30, .20), rgba(227, 182, 79, .09) 45%, transparent 72%); } .bg__arte { position: absolute; top: 50%; right: max(-6vw, calc(50% - 760px)); height: min(116vh, 1080px); width: auto; max-width: none; translate: 0 -48%; scale: calc(1 + var(--p) * .06); opacity: calc(.3 - var(--p) * .17); filter: saturate(1.05) contrast(1.04); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 94%); mask-image: linear-gradient(to bottom, #000 40%, transparent 94%); animation: respira 20s ease-in-out infinite alternate; } /* Oscurece el lado del texto para que el cuadro nunca compita con la lectura */ .bg__velo { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(11, 9, 6, .88) 32%, rgba(11, 9, 6, .25) 68%, rgba(11, 9, 6, .55) 100%), linear-gradient(180deg, rgba(11, 9, 6, .5) 0%, transparent 25%, transparent 70%, rgba(11, 9, 6, .7) 100%); } .bg__red { position: absolute; inset: 0; opacity: .7; } .bg__grano { position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,"); } @media (max-width: 860px) { .bg__arte { right: auto; left: 50%; height: min(96svh, 900px); translate: -50% -46%; opacity: calc(.26 - var(--p) * .14); } .bg__halo { right: auto; left: 50%; translate: -50% -50%; } .bg__bruma { background-position: 50% 45%; background-size: 130% auto; } .bg__velo { background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(11, 9, 6, .45), rgba(11, 9, 6, .85) 85%), linear-gradient(180deg, rgba(11, 9, 6, .4), transparent 30%, transparent 70%, rgba(11, 9, 6, .75)); } } @keyframes respira { from { transform: rotate(-.8deg) translateY(0); } to { transform: rotate(.8deg) translateY(-1.5%); } } /* --------------------------------------------------------- Navegación --------------------------------------------------------- */ .nav { position: fixed; top: 14px; left: 50%; z-index: 50; translate: -50% 0; width: min(calc(100% - 32px), 1100px); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 999px; border: 1px solid transparent; transition: background .35s, border-color .35s, box-shadow .35s; } .nav.is-scrolled { background: rgba(14, 11, 7, .66); border-color: var(--linea); box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } .nav__marca { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--crema); text-decoration: none; font-family: var(--serif); font-size: 1.2rem; line-height: 1; white-space: nowrap; } .nav__marca img { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(227, 182, 79, .45)); } .nav__links { display: flex; gap: 2px; } .nav__links a { color: var(--crema-2); text-decoration: none; font-size: 14px; padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; } .nav__links a:hover { color: var(--crema); background: rgba(246, 238, 220, .06); } @media (max-width: 860px) { .nav__links { display: none; } } @media (max-width: 400px) { .nav__marca span { display: none; } } /* --------------------------------------------------------- Botones --------------------------------------------------------- */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 15px/1 var(--sans); color: #1A1206; text-decoration: none; padding: 16px 26px; border-radius: 999px; background: linear-gradient(180deg, #F8DC8E 0%, #E3B64F 48%, #DA8F2C 100%); box-shadow: inset 0 1px 0 rgba(255, 245, 210, .7), 0 0 0 1px rgba(255, 220, 140, .25), 0 12px 32px -10px rgba(240, 122, 30, .6), 0 0 60px -12px rgba(227, 182, 79, .55); transition: transform .25s var(--ease), box-shadow .3s; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); translate: -120% 0; transition: translate .9s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 245, 210, .8), 0 0 0 1px rgba(255, 220, 140, .4), 0 18px 40px -10px rgba(240, 122, 30, .7), 0 0 80px -8px rgba(227, 182, 79, .7); } .btn:hover::after { translate: 120% 0; } .btn:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 4px; } .btn svg { width: 18px; height: 18px; transition: translate .25s var(--ease); } .btn:hover svg { translate: 3px 0; } .btn--vidrio { color: var(--crema); background: rgba(246, 238, 220, .05); box-shadow: inset 0 0 0 1px var(--linea-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn--vidrio::after { display: none; } .btn--vidrio:hover { background: rgba(246, 238, 220, .1); box-shadow: inset 0 0 0 1px rgba(227, 182, 79, .55); } .btn--sm { padding: 11px 18px; font-size: 14px; } .btn--grande { padding: 20px 34px; font-size: 17px; } /* --------------------------------------------------------- Texto dorado --------------------------------------------------------- */ .oro { font-style: italic; background: var(--degradado); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: .08em; animation: brillo 9s linear infinite; } @keyframes brillo { to { background-position: -220% 0; } } /* --------------------------------------------------------- Hero --------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 24px 110px; } .hero__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; } .chip { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 8px 14px 8px 11px; border-radius: 999px; border: 1px solid var(--linea-2); background: rgba(227, 182, 79, .07); font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--oro-claro); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .chip__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 0 rgba(111, 211, 154, .6); animation: latido 2.2s infinite; } .cerrado .chip__dot { background: var(--crema-3); animation: none; } @keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(111, 211, 154, .55); } 70% { box-shadow: 0 0 0 9px rgba(111, 211, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 211, 154, 0); } } .hero__titulo { max-width: 13ch; margin: 0 0 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7.6vw, 6.6rem); line-height: .98; letter-spacing: -.02em; color: var(--crema); text-wrap: balance; } .hero__pre { display: block; margin-bottom: 22px; font: 500 13px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--crema-3); } .hero__lema { max-width: 14em; margin: 0 0 40px; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.3; color: var(--crema-2); } .hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 60px; } .hero__datos { display: flex; flex-wrap: wrap; gap: 18px 0; margin: 0; padding-top: 24px; max-width: 640px; border-top: 1px solid var(--linea); } .hero__datos div { padding-right: 30px; margin-right: 30px; border-right: 1px solid var(--linea); } .hero__datos div:last-child { border: 0; margin: 0; padding: 0; } dt { margin-bottom: 8px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); } dd { margin: 0; color: var(--crema); font-size: 15px; } @media (max-width: 560px) { .hero__acciones .btn { flex: 1 1 100%; } .hero__datos { flex-direction: column; } .hero__datos div { border: 0; margin: 0; padding: 0; } } .aviso-cerrado { margin: -36px 0 48px; padding: 14px 18px; border-left: 2px solid var(--naranja); background: linear-gradient(90deg, rgba(240, 122, 30, .1), transparent); border-radius: 0 12px 12px 0; color: var(--crema); max-width: 34em; } .hero__scroll { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; width: 26px; height: 42px; border-radius: 999px; border: 1px solid var(--linea-2); } .hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--oro); animation: rueda 2s var(--ease) infinite; } @keyframes rueda { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } } @media (max-height: 700px) { .hero__scroll { display: none; } } /* --------------------------------------------------------- Cinta --------------------------------------------------------- */ .cinta { overflow: hidden; padding: 20px 0; border-block: 1px solid var(--linea); background: rgba(11, 9, 6, .55); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .cinta__pista { display: flex; width: max-content; animation: cinta 48s linear infinite; } .cinta__grupo { display: flex; align-items: center; gap: 30px; padding-right: 30px; } .cinta span { font-family: var(--serif); font-style: italic; font-size: 1.65rem; line-height: 1; color: var(--crema-2); white-space: nowrap; } .cinta i { font-style: normal; font-size: .85rem; color: var(--naranja); } @keyframes cinta { to { transform: translateX(-50%); } } /* --------------------------------------------------------- Cifras --------------------------------------------------------- */ .cifras { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 9vw, 110px) 24px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .cifra { padding: 4px 28px; border-left: 1px solid var(--linea); } .cifra:first-child { border-left: 0; padding-left: 0; } .cifra strong { display: block; margin-bottom: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1; color: var(--crema); font-variant-numeric: tabular-nums; } .cifra > span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--crema-3); max-width: 22ch; } @media (max-width: 860px) { .cifras { grid-template-columns: 1fr 1fr; gap: 40px 0; } .cifra:nth-child(odd) { border-left: 0; padding-left: 0; } } @media (max-width: 420px) { .cifra { padding: 4px 16px; } } /* --------------------------------------------------------- Secciones --------------------------------------------------------- */ .seccion { max-width: var(--maxw); margin: 0 auto; padding: clamp(96px, 13vw, 160px) 24px 0; } .etiqueta { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); } .etiqueta::before { content: ""; flex: none; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); } .titulo { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.015em; color: var(--crema); text-wrap: balance; } .entradilla { margin: 0 0 52px; max-width: 40em; font-size: clamp(1rem, 1.5vw, 1.125rem); } .gran-frase { max-width: 960px; margin: 0 0 64px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.8vw, 4rem); line-height: 1.08; letter-spacing: -.012em; color: var(--crema); text-wrap: balance; } /* --------------------------------------------------------- Tarjeta con foco que sigue al cursor --------------------------------------------------------- */ .tarjeta { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); border: 1px solid var(--linea); background: linear-gradient(180deg, rgba(30, 23, 13, .82), rgba(15, 11, 7, .86)); } .tarjeta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -40%), rgba(227, 182, 79, .13), transparent 60%); opacity: 0; transition: opacity .45s; } .tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, -40%), rgba(247, 226, 164, .6), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .45s; pointer-events: none; } .tarjeta:hover::before, .tarjeta:hover::after { opacity: 1; } /* --------------------------------------------------------- 01 · Qué hacemos --------------------------------------------------------- */ .curso__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: start; } .curso__texto p { margin: 0 0 18px; font-size: 1.06rem; } .curso__texto strong { color: var(--crema); font-weight: 500; } .curso__abierto { margin-top: 30px !important; padding: 18px 22px; border-left: 2px solid var(--naranja); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgba(240, 122, 30, .09), transparent); } .curso__abierto span { color: var(--crema); font-weight: 500; } .disciplinas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .disciplina { min-height: 160px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; } .disciplina__icono { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--linea-2); background: rgba(227, 182, 79, .07); color: var(--oro-claro); box-shadow: 0 0 26px -8px rgba(227, 182, 79, .5); } .disciplina__icono svg { width: 22px; height: 22px; } .psi { font-family: var(--serif); font-size: 1.7rem; line-height: 1; } .disciplina h3 { margin: 0; font: 400 1.6rem/1.1 var(--serif); color: var(--crema); } @media (max-width: 880px) { .curso__grid { grid-template-columns: 1fr; } } @media (max-width: 380px) { .disciplina { min-height: 130px; padding: 18px; } .disciplina h3 { font-size: 1.35rem; } } /* --------------------------------------------------------- 02 · Por qué --------------------------------------------------------- */ .manifiesto { position: relative; max-width: 1020px; margin: 0 0 64px; } .manifiesto__comillas { width: 46px; height: auto; margin-bottom: 22px; color: var(--naranja); filter: drop-shadow(0 0 18px rgba(240, 122, 30, .5)); } .manifiesto__texto { margin: 0; font-family: var(--serif); font-size: clamp(2.1rem, 4.8vw, 4rem); line-height: 1.1; letter-spacing: -.012em; color: var(--crema); text-wrap: balance; } .razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .razon { padding: 30px 28px 32px; } .razon__n { display: block; margin-bottom: 40px; font-family: var(--serif); font-style: italic; font-size: 2.4rem; line-height: 1; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; } .razon h3 { margin: 0 0 14px; font: 400 1.85rem/1.08 var(--serif); color: var(--crema); } .razon p { margin: 0; font-size: .98rem; } @media (max-width: 900px) { .razones { grid-template-columns: 1fr; } .razon__n { margin-bottom: 22px; } } /* --------------------------------------------------------- 03 · Contenidos (bento) --------------------------------------------------------- */ .bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .tema { min-height: 200px; padding: 24px 24px 26px; display: flex; flex-direction: column; } .tema__n { display: flex; align-items: center; gap: 12px; margin-bottom: auto; padding-bottom: 30px; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--oro); } .tema__n::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--linea-2), transparent); } .tema h3 { margin: 0 0 6px; font: 400 clamp(1.45rem, 2vw, 1.75rem)/1.1 var(--serif); color: var(--crema); } .tema p { margin: 0; font-size: .95rem; color: var(--crema-3); } /* Las tarjetas anchas llevan los círculos concéntricos del cuadro */ .tema--ancho { grid-column: span 2; background: url("data:image/svg+xml,") right -60px bottom -70px / 230px no-repeat, linear-gradient(180deg, rgba(30, 23, 13, .82), rgba(15, 11, 7, .86)); } .tema--ancho:nth-child(2) { background: url("data:image/svg+xml,") right -60px top -70px / 230px no-repeat, linear-gradient(180deg, rgba(30, 23, 13, .82), rgba(15, 11, 7, .86)); } .tema--ancho:nth-child(8) { background: url("data:image/svg+xml,") right -60px bottom -70px / 230px no-repeat, linear-gradient(180deg, rgba(30, 23, 13, .82), rgba(15, 11, 7, .86)); } .tema--ancho h3 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); } /* La última: borde de luz que gira */ .tema--luz { grid-column: span 2; border: 1px solid transparent; background: linear-gradient(180deg, rgba(40, 28, 13, .94), rgba(18, 13, 8, .96)) padding-box, conic-gradient(from var(--ang), rgba(227, 182, 79, .12) 0%, #F07A1E 12%, #F7E2A4 20%, #4C7BE0 30%, rgba(227, 182, 79, .12) 42%, rgba(227, 182, 79, .12) 100%) border-box; box-shadow: 0 0 60px -20px rgba(240, 122, 30, .45); animation: gira 7s linear infinite; } .tema--luz h3 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); } .tema--luz p { color: var(--crema-2); } @keyframes gira { to { --ang: 360deg; } } @media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .tema--ancho { grid-column: span 1; } .tema--luz { grid-column: span 2; } } @media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .tema--luz { grid-column: auto; } .tema { min-height: 0; } .tema__n { padding-bottom: 22px; } /* Círculos más pequeños y en la esquina para no pisar el texto */ .tema--ancho { background-size: 150px, auto; background-position: right -62px bottom -62px, 0 0; } .tema--ancho:nth-child(2) { background-size: 150px, auto; background-position: right -62px top -62px, 0 0; } } /* --------------------------------------------------------- 04 · Caminos --------------------------------------------------------- */ .caminos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; } .camino { padding: 30px 28px 26px; display: flex; flex-direction: column; } .camino--com { order: 1; } .camino--crece { order: 2; } .camino--con { order: 3; } .camino__sigla { margin-bottom: 20px; font: 500 13px/1 var(--mono); letter-spacing: .22em; color: var(--oro); } .camino h3 { margin: 0 0 10px; font: 400 2.05rem/1.05 var(--serif); color: var(--crema); } .camino > p { margin: 0 0 28px; color: var(--crema-3); } .camino__badge { position: absolute; top: 22px; right: 22px; padding: 6px 10px; border-radius: 999px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #1A1206; background: linear-gradient(90deg, #F7E2A4, #F0A23A); } .camino--crece { border: 1px solid transparent; background: radial-gradient(120% 80% at 50% 0%, rgba(240, 122, 30, .16), transparent 60%) padding-box, linear-gradient(180deg, rgba(40, 28, 13, .94), rgba(18, 13, 8, .96)) padding-box, conic-gradient(from var(--ang), rgba(227, 182, 79, .2) 0%, #F7E2A4 10%, #F07A1E 20%, rgba(227, 182, 79, .2) 36%, rgba(227, 182, 79, .2) 100%) border-box; box-shadow: 0 30px 80px -30px rgba(240, 122, 30, .5); animation: gira 9s linear infinite; } .camino__precios { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 10px; min-height: 62px; } .camino__precios li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; } .camino__precios b { font: 400 1.8rem/1 var(--serif); color: var(--crema); font-variant-numeric: tabular-nums; } .camino__precios .camino__nota { font-size: 13px; color: var(--crema-3); } .esqueleto { height: 26px; border-radius: 8px; background: linear-gradient(90deg, rgba(227, 182, 79, .06) 0%, rgba(227, 182, 79, .18) 50%, rgba(227, 182, 79, .06) 100%); background-size: 200% 100%; animation: brillo 1.6s linear infinite; } @media (max-width: 900px) { .caminos { grid-template-columns: 1fr; } .camino--crece { order: 0; } } /* --------------------------------------------------------- 05 · Fechas y lugar --------------------------------------------------------- */ .cuando { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-areas: "fecha lugar" "fecha incluye"; gap: 14px; } .fecha { grid-area: fecha; padding: 34px 34px 32px; display: flex; flex-direction: column; } .lugar { grid-area: lugar; padding: 28px; } .incluye { grid-area: incluye; padding: 28px; } .fecha__mes { margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); } /* Tres días en rejilla: números arriba, día de la semana debajo */ .fecha__dias { display: grid; /* inicio.js la rehace según el número de días */ grid-template-columns: auto minmax(var(--conector, 18px), 1fr) auto minmax(var(--conector, 18px), 1fr) auto; align-items: center; column-gap: clamp(10px, 1.6vw, 18px); row-gap: 14px; max-width: 560px; margin-block: auto; padding: 34px 0 44px; } .fecha__dias span { font: 400 clamp(4.2rem, 10vw, 8rem)/.9 var(--serif); font-variant-numeric: tabular-nums; background: var(--degradado); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo 9s linear infinite; } .fecha__dias i { position: relative; overflow: hidden; height: 1px; background: var(--linea-2); } /* Un pulso de luz recorre la línea de un día al siguiente */ .fecha__dias i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--oro-claro), var(--naranja), transparent); translate: -100% 0; animation: pulso 3.2s var(--ease) infinite; } .fecha__dias i + span + i::after { animation-delay: 1.6s; } @keyframes pulso { to { translate: 100% 0; } } .fecha__dias small { justify-self: center; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crema-3); } @media (max-width: 380px) { .fecha__dias small { letter-spacing: .04em; font-size: 10px; } } /* Ediciones de 4 o 5 días: números más pequeños para que quepan en móvil */ @media (max-width: 600px) { .fecha__dias[data-n="4"], .fecha__dias[data-n="5"] { --conector: 6px; column-gap: 6px; } .fecha__dias[data-n="4"] span { font-size: 3rem; } .fecha__dias[data-n="5"] span { font-size: 2.4rem; } } .fecha__horas { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 22px; border-top: 1px solid var(--linea); } .fecha__horas dd { font-size: 1.05rem; } .lugar__radar { position: relative; width: 64px; height: 64px; margin-bottom: 22px; display: grid; place-items: center; color: var(--oro-claro); } .lugar__radar svg { width: 26px; height: 26px; position: relative; } .lugar__radar i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--oro); opacity: 0; animation: onda 3.6s var(--ease) infinite; } .lugar__radar i:nth-child(2) { animation-delay: 1.2s; } .lugar__radar i:nth-child(3) { animation-delay: 2.4s; } @keyframes onda { 0% { transform: scale(.35); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } } .lugar h3, .incluye h3 { margin: 0 0 4px; font: 400 1.9rem/1.1 var(--serif); color: var(--crema); } .lugar p { margin: 0 0 16px; } .incluye h3 { margin-bottom: 16px; } .incluye ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .incluye li { display: flex; align-items: center; gap: 12px; color: var(--crema); } .incluye svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #1A1206; background: linear-gradient(180deg, #F7E2A4, #E3B64F); } @media (max-width: 860px) { .cuando { grid-template-columns: 1fr; grid-template-areas: "fecha" "lugar" "incluye"; } .fecha { padding: 28px; } } @media (max-width: 520px) { .fecha__horas { grid-template-columns: 1fr; } } /* --------------------------------------------------------- 06 · Inscripción --------------------------------------------------------- */ .pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .paso { padding: 28px 28px 30px; } .paso__n { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 26px; border-radius: 50%; border: 1px solid var(--linea-2); background: rgba(227, 182, 79, .07); box-shadow: 0 0 28px -6px rgba(227, 182, 79, .5); font: 500 13px/1 var(--mono); color: var(--oro-claro); } .paso h3 { margin: 0 0 10px; font: 400 1.8rem/1.1 var(--serif); color: var(--crema); } .paso p { margin: 0; font-size: .98rem; } @media (max-width: 900px) { .pasos { grid-template-columns: 1fr; } } /* --------------------------------------------------------- Cierre --------------------------------------------------------- */ .final { padding: clamp(110px, 14vw, 180px) 24px clamp(80px, 10vw, 120px); } .final__caja { position: relative; isolation: isolate; overflow: hidden; max-width: 1000px; margin: 0 auto; padding: clamp(52px, 8vw, 100px) clamp(22px, 6vw, 84px); text-align: center; border-radius: 32px; border: 1px solid var(--linea-2); background: radial-gradient(110% 80% at 50% 0%, rgba(240, 122, 30, .2), transparent 60%), linear-gradient(180deg, rgba(28, 20, 11, .92), rgba(12, 9, 6, .95)); box-shadow: 0 40px 120px -40px rgba(240, 122, 30, .45); } .final__caja::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/assets/klimt-arco.webp) 50% 20% / auto 150% no-repeat; opacity: .1; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); } .final__logo { width: 64px; height: 64px; margin-bottom: 22px; filter: drop-shadow(0 0 22px rgba(227, 182, 79, .6)); } .final__kicker { margin: 0 0 16px; text-wrap: balance; font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); } .final__titulo { margin: 0 auto 22px; max-width: 16ch; font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; letter-spacing: -.015em; color: var(--crema); text-wrap: balance; } .final__texto { margin: 0 auto 40px; max-width: 38em; font-size: 1.06rem; } .final .aviso-cerrado { margin: 0 auto; text-align: left; } /* --------------------------------------------------------- Pie --------------------------------------------------------- */ .pie { max-width: var(--maxw); margin: 0 auto; padding: 36px 24px 48px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; font-size: 14px; } .pie__org { display: flex; align-items: center; gap: 14px; color: var(--crema); text-decoration: none; } .pie__org > span:last-child { display: flex; flex-direction: column; line-height: 1.3; } .pie__org small { font-size: 12px; color: var(--crema-3); } .pie__org small:first-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); } .pie__org strong { font-weight: 500; } .pie__psi { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--linea-2); font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--oro-claro); } .pie__contacto { display: flex; flex-wrap: wrap; gap: 8px 22px; } .pie__legal { margin: 0; color: var(--crema-3); font-size: 13px; } /* --------------------------------------------------------- Aparición al hacer scroll --------------------------------------------------------- */ .js .reveal { opacity: 0; translate: 0 26px; filter: blur(8px); transition: opacity .9s var(--ease) calc(var(--d, 0) * 90ms), translate .9s var(--ease) calc(var(--d, 0) * 90ms), filter .9s var(--ease) calc(var(--d, 0) * 90ms); } .js .reveal.is-in { opacity: 1; translate: 0 0; filter: none; } /* --------------------------------------------------------- Movimiento reducido --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .js .reveal { opacity: 1; translate: none; filter: none; } .cinta__pista { flex-wrap: wrap; width: auto; justify-content: center; } .cinta__grupo + .cinta__grupo { display: none; } } /* --------------------------------------------------------- Objetivos tactiles en movil Los enlaces sueltos y el CTA de la cabecera se quedaban por debajo de los 44px recomendados. Se amplia el area de toque sin tocar el aspecto: solo padding y min-height. Los enlaces dentro de un parrafo se dejan como estan: la excepcion de enlaces en linea del criterio WCAG 2.5.5. --------------------------------------------------------- */ .btn--sm { min-height: 44px; padding: 12px 18px; } .nav__marca { min-height: 44px; padding: 7px 0; } .enlace { display: inline-block; padding: 12px 0; } p .enlace, li .enlace, .enlace.enlace--linea { display: inline; padding: 0; } .hero__scroll { min-height: 44px; min-width: 44px; display: inline-grid; place-items: center; }