/* ============================================================================ Fortuna Imposible — estilos de la web del Manual Identidad del canal: fondo #141414, crema #F4EFE6, la raya roja #E4412F que tacha el «IM» de IMPOSIBLE, y el gris #8c8a86 de lo tachado. Móvil primero: casi todo el tráfico viene de YouTube en el teléfono. ========================================================================== */ /* 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: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo-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: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo-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: #141414; --fondo-2: #1c1b1a; /* tarjetas */ --fondo-3: #242220; /* tarjeta destacada, campos */ --linea: rgba(244, 239, 230, .12); --linea-2: rgba(244, 239, 230, .22); --crema: #F4EFE6; --crema-2: #b9b4ab; /* texto secundario — 8,9:1 sobre el fondo */ --gris: #8c8a86; /* lo tachado, notas — 5,3:1 */ --rojo: #E4412F; --rojo-2: #c9331f; --titular: 'Archivo', '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 ────────────────────────────────────────────────────────────── Archivo 900 estrecha, como el logotipo. line-height ≥ 1.08 y un respiro arriba: por debajo se cortan las tildes de las mayúsculas (Á, Ó). */ .titular, h1, h2 { font-family: var(--titular); font-weight: 900; font-stretch: 68%; text-transform: uppercase; letter-spacing: .005em; line-height: 1.08; padding-top: .08em; margin: 0; overflow: visible; } h1 { font-size: clamp(2.7rem, 11.5vw, 5.4rem); } h2 { font-size: clamp(2.1rem, 8vw, 3.6rem); margin-bottom: .4em; } h3 { font-family: var(--titular); font-weight: 800; font-stretch: 80%; font-size: 1.35rem; line-height: 1.2; margin: 0 0 .35em; } /* La raya roja: el gesto de la marca. Tacha lo «imposible». */ .tachado { position: relative; color: var(--gris); white-space: nowrap; } .tachado::after { content: ''; position: absolute; left: -.06em; right: -.06em; top: 46%; height: .11em; background: var(--rojo); transform: rotate(-8deg); border-radius: 1px; } .rojo { color: var(--rojo); } /* Bloque normal y la raya como inline-block: con flex, cada trozo de texto (el «IM» tachado incluido) se separaba del resto con el hueco del gap. */ .antetitulo { font-family: var(--titular); font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--crema-2); margin: 0 0 1rem; } .antetitulo::before { content: ''; display: inline-block; vertical-align: middle; width: 22px; height: 3px; margin: 0 .7em .15em 0; background: var(--rojo); transform: rotate(-8deg); } /* ── Cabecera ─────────────────────────────────────────────────────────────── */ .cabecera { border-bottom: 1px solid var(--linea); } .cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logotipo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; font-family: var(--titular); font-weight: 900; font-stretch: 75%; line-height: .9; color: var(--crema); font-size: 1.35rem; } .logotipo .fortuna { font-size: .66em; letter-spacing: .14em; margin-right: -.14em; } .logotipo em { font-style: normal; position: relative; color: var(--gris); } .logotipo em::after { content: ''; position: absolute; left: -.06em; right: -.06em; top: 46%; height: .11em; background: var(--rojo); transform: rotate(-8deg); } .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: 800; font-stretch: 85%; font-size: 1.2rem; letter-spacing: .02em; box-shadow: 0 10px 30px -12px rgba(228, 65, 47, .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; } .hero__datos { display: flex; flex-wrap: wrap; gap: .4em 1.1em; font-size: .9rem; color: var(--crema-2); list-style: none; padding: 0; margin: 0; } .hero__datos li::before { content: '✓'; color: var(--rojo); font-weight: 700; margin-right: .4em; } /* El manual: mockup del creador. */ .libro-escena { perspective: 1400px; display: grid; place-items: center; } .libro-img { width: min(80vw, 340px); height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); } @media (max-width: 899px) { .libro-img { width: min(50vw, 200px); } } /* ── 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: 900; font-stretch: 66%; 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: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fondo); background: var(--crema); padding: .15em .55em; border-radius: 4px; margin-left: .4em; vertical-align: .2em; } /* La ficha: estructura real de cada una de las 50 */ .ficha { background: var(--crema); color: #1d1b19; border-radius: var(--radio); padding: clamp(22px, 5vw, 40px); max-width: 760px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); } .ficha__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4em 1em; border-bottom: 3px solid #1d1b19; padding-bottom: .8rem; margin-bottom: 1.1rem; } .ficha__cab b { font-family: var(--titular); font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: 1.55rem; line-height: 1.1; } .ficha__cab span { font-size: .82rem; color: #5b5752; align-self: flex-end; } .ficha dl { margin: 0; display: grid; gap: 14px; } @media (min-width: 640px) { .ficha dl { grid-template-columns: 1fr 1fr; } .ficha .ancho { grid-column: 1 / -1; } } .ficha dt { font-family: var(--titular); font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--rojo-2); margin-bottom: .2rem; } .ficha dd { margin: 0; font-size: .95rem; line-height: 1.5; color: #3a3733; } .ficha .destacado { background: #1d1b19; color: var(--crema); border-radius: 10px; padding: 14px 16px; } .ficha .destacado dt { color: #ff8a78; } .ficha .destacado dd { color: var(--crema); } .nota { font-size: .85rem; color: var(--gris); margin-top: 1rem; } /* Dos fichas reales. Son largas (1:3): se enseña el principio con un degradado y el botón las despliega enteras. */ .muestras__titulo { margin: clamp(40px, 7vw, 64px) 0 18px; } .muestras { display: grid; gap: 24px; align-items: start; } @media (min-width: 760px) { .muestras { grid-template-columns: 1fr 1fr; } } .muestra { margin: 0; } .muestra__marco { position: relative; max-height: 560px; overflow: hidden; border-radius: 10px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); } .muestra__marco img { width: 100%; height: auto; } .muestra__marco::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to bottom, rgba(20,20,20,0), var(--fondo) 92%); pointer-events: none; } .muestra__marco.abierta { max-height: none; } .muestra__marco.abierta::after { display: none; } .muestra figcaption { margin-top: 10px; text-align: center; } .enlace { background: none; border: 0; color: var(--crema); text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: .25em; cursor: pointer; font: inherit; font-weight: 600; padding: 8px 4px; } .enlace:hover { color: var(--crema-2); } /* Los patrones: se nombran en el manual, aquí solo se anuncian */ .patrones { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } @media (min-width: 760px) { .patrones { grid-template-columns: repeat(3, 1fr); } } .patrones li { border: 1px dashed var(--linea-2); border-radius: var(--radio); padding: 22px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; } .patrones__n { font-family: var(--titular); font-weight: 900; font-stretch: 66%; font-size: 1rem; letter-spacing: .14em; color: var(--rojo); text-transform: uppercase; } .patrones__velo { height: .9em; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--linea-2) 0 18px, transparent 18px 24px); margin: 14px 0 8px; } .patrones__velo + .patrones__velo { width: 70%; margin-top: 0; } .patrones small { color: var(--gris); font-size: .82rem; } .patrones li.con-nombre .patrones__velo { display: none; } .patrones li.con-nombre { border-style: solid; background: var(--fondo-2); min-height: 0; gap: 4px; } .patrones__nombre { font-family: var(--titular); font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; margin: 10px 0 6px; } /* 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: 700; } .quien .no li::before { content: '✕'; position: absolute; left: 0; color: var(--rojo); font-weight: 700; } .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: 700; } .precio__cifra { text-align: center; margin: 0 0 1.2rem; } .precio__cifra b { font-family: var(--titular); font-weight: 900; font-stretch: 70%; 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. */ .kit { 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; } .kit:hover { border-color: var(--crema-2); } .kit input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rojo); cursor: pointer; } .kit b { display: block; font-size: 1rem; } .kit span { font-size: .88rem; color: var(--crema-2); } .kit b span { font-size: inherit; color: inherit; } /* el precio del kit, en el mismo blanco que el resto del titular */ .kit:has(input:checked) { border-style: solid; border-color: var(--rojo); background: rgba(228, 65, 47, .07); } .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"] .kit { display: none; } /* Logos de pago — bloque `pay-methods` de la landing de WMC, tal cual (las reglas estaban en un