/* ============================================================================ ARC365 CLUB — estilos de la web Identidad de marca (marca/MARCA.md): negro #0B0B0C, blanco roto #F5F5F3 y rojo #E10600 SOLO para el arco y una palabra por titular. Sin degradados ni un segundo color. Titulares en mayúsculas con espaciado .10em. Móvil primero: el tráfico viene de Reels, Shorts y TikTok. ⚠️ Bahnschrift (la del logo y los vídeos) es de Microsoft y su licencia no permite servirla en una web. Aquí va Barlow Semi Condensed, una grotesca condensada de licencia abierta con el mismo aire. ========================================================================== */ /* Fuentes alojadas en el propio dominio (no en Google): misma tipografía, sin ceder la IP de cada visitante a un tercero. El unicode-range hace que el navegador solo baje el subconjunto latin-ext si de verdad lo necesita. */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --fondo: #0B0B0C; --fondo-2: #141416; /* tarjetas */ --fondo-3: #1c1c1f; /* tarjeta destacada, campos */ --linea: rgba(245, 245, 243, .12); --linea-2: rgba(245, 245, 243, .22); --crema: #F5F5F3; /* blanco roto de la marca */ --crema-2: #b5b5b2; /* texto secundario */ --gris: #8a8a88; /* notas */ --rojo: #E10600; /* rojo ARC365: el arco y UNA palabra por titular */ --rojo-2: #b80500; --titular: 'Barlow Semi Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --ancho: 1120px; --lateral: clamp(20px, 5vw, 40px); --radio: 14px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { margin: 0; background: var(--fondo); color: var(--crema); font-family: var(--texto); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } /* `hidden` tiene que ganar SIEMPRE. Sin esto, cualquier regla con display (la casilla del kit es grid, el botón de descarga es flex) lo anula, y se veían la casilla del kit sin PDF subido y el botón de descarga del kit a quien no lo había comprado (el servidor lo negaba, pero el botón estaba). */ [hidden] { display: none !important; } a { color: inherit; } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--lateral); } /* ── Titulares ────────────────────────────────────────────────────────────── Regla de marca: mayúsculas, espaciado .10em y una sola palabra en rojo por titular (la clase .rojo). line-height con un respiro arriba: por debajo se cortan las tildes de las mayúsculas (Á, Ó). */ .titular, h1, h2 { font-family: var(--titular); font-weight: 600; text-transform: uppercase; letter-spacing: .10em; line-height: 1.1; padding-top: .08em; margin: 0; overflow: visible; } h1 { font-size: clamp(2.3rem, 9.5vw, 4.4rem); } h2 { font-size: clamp(1.8rem, 6.5vw, 2.9rem); margin-bottom: .5em; } h3 { font-family: var(--titular); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 1.2rem; line-height: 1.25; margin: 0 0 .35em; } /* El rojo, SOLO para una palabra del titular y para el arco. */ .rojo { color: var(--rojo); } .antetitulo { font-family: var(--titular); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--crema-2); margin: 0 0 1rem; } /* El trocito de arco que abre cada antetítulo: el mismo gesto del logo. */ .antetitulo::before { content: ''; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin: 0 .7em .2em 0; border: 3px solid var(--rojo); border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); } /* ── Cabecera ─────────────────────────────────────────────────────────────── */ .cabecera { border-bottom: 1px solid var(--linea); } .cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 64px; } /* Logotipo: el arco (vector de marca) + el nombre. «CLUB» en rojo, como la marca de agua de los vídeos. */ .logotipo { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; color: var(--crema); font-family: var(--titular); font-weight: 600; font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; } .logotipo img { width: 26px; height: 26px; } .logotipo em { font-style: normal; color: var(--rojo); } .cabecera__canal { font-size: .88rem; color: var(--crema-2); text-decoration: none; display: inline-flex; align-items: center; gap: .45em; } .cabecera__canal:hover { color: var(--crema); } .cabecera__canal svg { width: 22px; height: 22px; } /* ── Botones ──────────────────────────────────────────────────────────────── */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 58px; padding: .8em 1.6em; border: 0; border-radius: 12px; cursor: pointer; background: var(--rojo); color: var(--crema); text-decoration: none; /* 19 px en negrita = texto grande en WCAG: el crema sobre el rojo (3,5:1) cumple AA. */ font-family: var(--titular); font-weight: 600; font-size: 1.2rem; letter-spacing: .02em; box-shadow: 0 10px 30px -12px rgba(225, 6, 0, .7); transition: background .15s ease, transform .15s ease; } .boton:hover { background: var(--rojo-2); } .boton:active { transform: translateY(1px); } .boton[disabled] { background: var(--fondo-3); color: var(--gris); box-shadow: none; cursor: not-allowed; } .boton--ancho { width: 100%; } .boton .flecha { transition: transform .15s ease; } .boton:hover .flecha { transform: translateX(3px); } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { padding-block: clamp(36px, 7vw, 88px) clamp(48px, 8vw, 96px); overflow: hidden; } .hero .contenedor { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; } @media (min-width: 900px) { .hero .contenedor { grid-template-columns: 1.15fr .85fr; } } .hero h1 .linea-2 { display: block; color: var(--crema-2); } .hero__sub { font-size: clamp(1.1rem, 3.6vw, 1.3rem); color: var(--crema-2); max-width: 34ch; margin: 1.1rem 0 1.8rem; } .hero__sub strong { color: var(--crema); } .hero__cta { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; } /* El arco de la marca en el hero: el año que se cierra y el hueco, que es el día en que empiezas. Gira muy despacio; quieto si el sistema pide menos movimiento. */ .arco-escena { display: grid; place-items: center; gap: 14px; } .arco-img { width: min(70vw, 300px); height: auto; animation: arco 60s linear infinite; } @keyframes arco { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .arco-img { animation: none; } } .arco-pie { font-family: var(--titular); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--gris); margin: 0; text-align: center; } @media (max-width: 899px) { .arco-img { width: min(46vw, 190px); } } /* El manual en el hero */ .libro-escena { display: grid; place-items: center; gap: 12px; } .libro-img { width: min(70vw, 330px); height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); } @media (max-width: 899px) { .libro-img { width: min(48vw, 190px); } } /* Qué trae el extra */ .extra-grid { display: grid; gap: 22px; align-items: start; } @media (min-width: 760px) { .extra-grid { grid-template-columns: 240px 1fr; } } .extra-img { width: 150px; height: auto; justify-self: center; filter: drop-shadow(0 20px 34px rgba(0,0,0,.6)); } @media (min-width: 760px) { .extra-img { width: 240px; } } .extra-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } @media (min-width: 760px) { .extra-lista { grid-template-columns: repeat(2, 1fr); } } .extra-lista li { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px 22px; display: grid; gap: 4px; } .extra-lista b { font-family: var(--titular); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; } .extra-lista span { color: var(--crema-2); font-size: .95rem; } /* Las tres redes */ .redes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .redes a { display: inline-block; text-decoration: none; border: 1px solid var(--linea-2); border-radius: 999px; padding: .5em 1.2em; font-family: var(--titular); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; } .redes a:hover { background: var(--fondo-2); } /* ── Secciones ────────────────────────────────────────────────────────────── */ .seccion { padding-block: clamp(64px, 10vw, 120px); border-top: 1px solid var(--linea); } .seccion__intro { max-width: 60ch; color: var(--crema-2); font-size: 1.08rem; margin-bottom: clamp(28px, 5vw, 48px); } /* Qué hay dentro: cinco piezas numeradas */ .dentro { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } @media (min-width: 760px) { .dentro { grid-template-columns: repeat(2, 1fr); } .dentro li:first-child { grid-column: 1 / -1; } } .dentro li { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px 22px; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: start; } .dentro__n { font-family: var(--titular); font-weight: 600; font-size: 2.8rem; line-height: 1; color: var(--rojo); grid-row: span 2; font-variant-numeric: tabular-nums; } .dentro p { margin: 0; color: var(--crema-2); font-size: .98rem; } .dentro li:first-child { background: var(--fondo-3); border-color: var(--linea-2); } /* Con la primera a lo ancho, si las demás son impares la última también. */ @media (min-width: 760px) { .dentro li:last-child:nth-child(even) { grid-column: 1 / -1; } } .dentro__etiqueta { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fondo); background: var(--crema); padding: .15em .55em; border-radius: 4px; margin-left: .4em; vertical-align: .2em; } .nota { font-size: .85rem; color: var(--gris); margin-top: 1rem; } /* Carrusel de móvil: las tarjetas que en el escritorio van en rejilla se pasan a una fila que se desliza con el dedo, con parada en cada tarjeta. Se sale del contenedor a propósito para llegar a los dos bordes, y la siguiente tarjeta asoma para que se vea que hay más. */ .desliza { display: none; } @media (max-width: 759px) { .dentro, .patrones { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--lateral)); padding: 2px var(--lateral) 8px; scrollbar-width: none; -ms-overflow-style: none; } .dentro::-webkit-scrollbar, .patrones::-webkit-scrollbar { display: none; } .dentro > li, .patrones > li { flex: 0 0 82%; scroll-snap-align: center; } .desliza { display: block; color: var(--gris); font-size: .8rem; margin: .2rem 0 0; } } @media (max-width: 759px) and (prefers-reduced-motion: no-preference) { .dentro, .patrones { scroll-behavior: smooth; } } /* Para quién */ .quien { display: grid; gap: 16px; } @media (min-width: 760px) { .quien { grid-template-columns: 1fr 1fr; } } .quien > div { border-radius: var(--radio); padding: 26px 24px; border: 1px solid var(--linea); background: var(--fondo-2); } .quien h3 { display: flex; align-items: center; gap: .5em; } .quien ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7em; } .quien li { padding-left: 1.7em; position: relative; color: var(--crema-2); } .quien .si li::before { content: '✓'; position: absolute; left: 0; color: #7fd18b; font-weight: 600; } .quien .no li::before { content: '✕'; position: absolute; left: 0; color: var(--rojo); font-weight: 600; } .quien .no { background: transparent; border-style: dashed; } /* ── Precio ───────────────────────────────────────────────────────────────── */ .precio { max-width: 560px; margin: 0 auto; background: var(--fondo-2); border: 1px solid var(--linea-2); border-radius: 20px; padding: clamp(24px, 6vw, 40px); box-shadow: 0 40px 90px -40px rgba(0,0,0,.95); } .precio h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); text-align: center; } .precio__incluye { list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; display: grid; gap: .55em; } .precio__incluye li { padding-left: 1.7em; position: relative; color: var(--crema-2); font-size: .98rem; } .precio__incluye li::before { content: '✓'; position: absolute; left: 0; color: var(--rojo); font-weight: 600; } .precio__cifra { text-align: center; margin: 0 0 1.2rem; } .precio__cifra b { font-family: var(--titular); font-weight: 600; font-size: clamp(3.6rem, 16vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums; } .precio__cifra span { display: block; font-size: .9rem; color: var(--crema-2); margin-top: .3rem; } /* La casilla del upsell. Desmarcada siempre: marcarla por el comprador es un patrón oscuro y acaba en reembolsos. */ .extra { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; border: 1.5px dashed var(--linea-2); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .extra:hover { border-color: var(--crema-2); } .extra input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rojo); cursor: pointer; } .extra b { display: block; font-size: 1rem; } .extra span { font-size: .88rem; color: var(--crema-2); } .extra b span { font-size: inherit; color: inherit; } /* el precio del extra, en el mismo blanco que el resto del titular */ .extra:has(input:checked) { border-style: solid; border-color: var(--rojo); background: rgba(225, 6, 0, .10); } .precio__legal { font-size: .78rem; line-height: 1.5; color: var(--gris); text-align: center; margin: 12px 0 0; } .precio__legal a { color: var(--crema-2); } .precio__aviso { font-size: .9rem; text-align: center; margin: 12px 0 0; min-height: 1.4em; color: #ff8a78; } .precio__seguro { text-align: center; font-size: .8rem; color: var(--gris); margin: 10px 0 0; } .precio__seguro svg { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; } /* Venta cerrada (sin PDF subido): el botón lo dice y no hace nada. */ .cerrado-nota { display: none; text-align: center; font-size: .92rem; color: var(--crema-2); margin: 12px 0 0; } [data-venta="cerrada"] .cerrado-nota { display: block; } [data-venta="cerrada"] .extra { display: none; } /* Logos de pago — bloque `pay-methods` de la landing de WMC, tal cual (las reglas estaban en un