/* ══════════════════════════════════════════════════════════════ style-upgrade.css — Método Corso Design system upgrade · Mayo 2026 INSTRUCCIONES: Añadir al FINAL de style.css (o cargar como hoja separada después de style.css en el ) QUÉ HACE: 1. Consolida los 3 bloques :root duplicados en uno limpio 2. Corrige conflictos de .btn, .hero h1 introducidos por Codex 3. Mejora easing global a cubic-bezier(0.23,1,0.32,1) 4. Scroll reveals: translateY(36px) + stagger más pronunciado 5. Hover states: scale + lift suave 6. Botón IG: breath más elegante 7. Magnetic button (CSS prep, JS opcional) 8. Page load: fade-in general 9. Cursor custom (solo desktop, sin romper táctil) 10. Ticker: velocidad calibrada ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 1. ROOT CONSOLIDADO — sobrescribe los tres bloques anteriores ══════════════════════════════════════════════════════════════ */ :root { /* Colores */ --gold: #a98a62; --gold-light: #d8c4a6; --bg: #000000; --bg-2: #0b0b0b; --bg-3: #151515; --surface: #050505; --text: #f4f1ec; --text-muted: #b9ad9b; --text-dim: #777064; --border: rgba(244, 241, 236, 0.1); --border-gold: rgba(216, 196, 166, 0.22); /* Easing premium — reemplaza 0.22,1,0.36,1 en todo */ --ease: cubic-bezier(0.23, 1, 0.32, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Espaciado */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; } /* ══════════════════════════════════════════════════════════════ 2. PAGE LOAD — fade suave al entrar ══════════════════════════════════════════════════════════════ */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } body { animation: pageFadeIn 0.55s var(--ease) both; } /* ══════════════════════════════════════════════════════════════ 3. SCROLL REVEALS — más profundidad, stagger más limpio ══════════════════════════════════════════════════════════════ */ .animar { opacity: 0; transform: translateY(36px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); will-change: opacity, transform; } .animar.visible { opacity: 1; transform: translateY(0); } /* Stagger — delays más pronunciados para lectura secuencial */ .animar-delay-1 { transition-delay: 0.08s; } .animar-delay-2 { transition-delay: 0.17s; } .animar-delay-3 { transition-delay: 0.26s; } .animar-delay-4 { transition-delay: 0.36s; } .animar-delay-5 { transition-delay: 0.46s; } /* ================================================================= 4. BOTONES — base layout sin colores (colores en bloque final) ================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.85rem 2.5rem; font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; border-radius: 0 !important; z-index: 0; } .btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-101%); transition: transform 0.35s var(--ease); z-index: -1; } /* Foco de teclado coherente con la estética (a11y) */ .btn:focus-visible, .header-cta:focus-visible, .shop-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ══════════════════════════════════════════════════════════════ 5. HERO H1 — estado único limpio Entrada gestionada por GSAP (gsap-reveals.js) para que el transform quede libre para el parallax de ratón. ══════════════════════════════════════════════════════════════ */ .hero h1 { font-family: "Cormorant Garamond", serif; font-size: clamp(2.7rem, 6vw, 5.2rem); font-weight: 300 !important; line-height: 1.02; letter-spacing: 0; text-transform: uppercase; color: var(--text); opacity: 0; /* GSAP anima desde aquí */ transform: none; /* sin CSS transform inicial */ animation: none; /* anula heroTexto de style.css */ overflow-wrap: normal; /* nunca partir palabras */ word-break: keep-all; /* mantener cada palabra entera */ hyphens: none; /* sin guiones de división */ } .hero h1 em { font-style: italic; color: var(--gold-light); } @media (max-width: 760px) { .hero h1 { font-size: clamp(2.2rem, 7.6vw, 3.3rem); } } @media (max-width: 600px) { .hero h1 { font-size: clamp(1.95rem, 8.8vw, 2.6rem); } } /* ══════════════════════════════════════════════════════════════ 6. CARDS — hover con lift ══════════════════════════════════════════════════════════════ */ @media (hover: hover) { .card:hover { background: #0d0d0d !important; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .obra-card:hover { border-color: var(--border-gold) !important; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .sistema-item:hover h3 { color: var(--gold-light); transition: color 0.25s var(--ease); } } .card { transition: background 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .obra-card { transition: border-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } /* ══════════════════════════════════════════════════════════════ 7. AUTOR FOTO — zoom más suave ══════════════════════════════════════════════════════════════ */ .autor-foto img { transition: transform 1s var(--ease); } @media (hover: hover) { .autor-foto:hover img { transform: scale(1.025); } } /* ══════════════════════════════════════════════════════════════ 8. TICKER — velocidad calibrada ══════════════════════════════════════════════════════════════ */ .ticker-track { animation: tickerMove 70s linear infinite !important; } /* Pausa en hover */ @media (hover: hover) { .ticker-wrap:hover .ticker-track { animation-play-state: paused; } } /* ══════════════════════════════════════════════════════════════ 9. BOTÓN IG — breath más elegante ══════════════════════════════════════════════════════════════ */ @keyframes igDmBreathV2 { 0% { box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 0 rgba(169,138,98,0.55); } 60% { box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 14px rgba(169,138,98,0); } 100% { box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 0 rgba(169,138,98,0); } } .ig-dm-float { background: #111 !important; border: 0.5px solid var(--border-gold) !important; animation: igDmBreathV2 3s ease infinite !important; transition: transform 0.3s var(--ease) !important; } .ig-dm-float:hover { transform: scale(1.1) !important; animation-play-state: paused !important; } /* ══════════════════════════════════════════════════════════════ 10. NAV — transiciones más suaves ══════════════════════════════════════════════════════════════ */ .nav-icon { transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease); } @media (hover: hover) { .nav-icon:hover { color: var(--text); background: rgba(244, 241, 236, 0.05); transform: translateY(-1px); } } .nav-icon.active { color: var(--text) !important; background: rgba(216, 196, 166, 0.08) !important; box-shadow: inset 0 -1px 0 var(--gold-light) !important; } /* ══════════════════════════════════════════════════════════════ 11. LINKS — transición de color más suave ══════════════════════════════════════════════════════════════ */ .footer-nav a, .mobile-menu a { transition: color 0.25s var(--ease); } /* ══════════════════════════════════════════════════════════════ 12. LOGO ENTRADA + HALO PULSE + FLOAT ══════════════════════════════════════════════════════════════ */ .hero-logo { /* 1. entrada: crece, cae, aparece el halo */ /* 2. halo respira infinito (solo filter) */ /* 3. float suave infinito (solo transform) */ animation: logoEntrada 2.0s var(--ease) 0.2s both, logoPulseHalo 4.5s ease-in-out 2.3s infinite, logoFloat 3.5s ease-in-out 2.3s infinite !important; } @keyframes logoEntrada { from { opacity: 0; transform: scale(0.84) translateY(-10px); filter: drop-shadow(0 0 0px rgba(184, 147, 106, 0)); } to { opacity: 0.92; transform: scale(1) translateY(0); filter: drop-shadow(0 0 22px rgba(184, 147, 106, 0.28)); } } /* Solo el halo respira — logo quieto */ @keyframes logoPulseHalo { 0%, 100% { filter: drop-shadow(0 0 18px rgba(184, 147, 106, 0.28)); } 50% { filter: drop-shadow(0 0 38px rgba(212, 173, 135, 0.52)); } } /* Float suave — ritmo distinto al halo, nunca se sincronizan */ @keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ══════════════════════════════════════════════════════════════ 13. CURSOR CUSTOM — solo desktop, no rompe táctil ══════════════════════════════════════════════════════════════ */ @media (hover: hover) and (pointer: fine) { html { cursor: none; } /* Punto principal */ .corso-cursor { position: fixed; width: 6px; height: 6px; background: var(--gold-light); border-radius: 50%; pointer-events: none; z-index: var(--z-cursor); transform: translate(-50%, -50%); transition: opacity 0.2s; will-change: transform; } /* Anillo seguidor */ .corso-cursor-ring { position: fixed; width: 28px; height: 28px; border: 0.5px solid rgba(216, 196, 166, 0.45); border-radius: 50%; pointer-events: none; z-index: var(--z-cursor-ring); transform: translate(-50%, -50%); transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s var(--ease), border-color 0.3s var(--ease); will-change: transform; } /* Estado sobre elementos clicables */ .corso-cursor-ring.is-hovering { width: 44px; height: 44px; border-color: rgba(216, 196, 166, 0.7); } /* Asegurar que botones y links tengan cursor:none */ a, button, [role="button"], .btn, .nav-icon, .diag-opcion, .exp-trigger { cursor: none; } } /* ══════════════════════════════════════════════════════════════ 14. MAGNETIC BUTTON PREP — CSS base (JS en script-upgrade.js) ══════════════════════════════════════════════════════════════ */ .btn-magnetic { transition: transform 0.4s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease) !important; will-change: transform; } /* ══════════════════════════════════════════════════════════════ 15. ACORDEÓN — transición más suave ══════════════════════════════════════════════════════════════ */ .exp-body { transition: max-height 0.55s var(--ease); } .exp-icon { transition: transform 0.4s var(--ease), color 0.25s var(--ease); } /* ══════════════════════════════════════════════════════════════ 16. DIAGNÓSTICO — preguntas con transición mejorada ══════════════════════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .diag-pregunta.activa { animation: fadeUp 0.45s var(--ease) both; } .diag-opcion { transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease); } @media (hover: hover) { .diag-opcion:hover { border-color: var(--border-gold) !important; color: var(--text); transform: translateX(3px); } } /* ══════════════════════════════════════════════════════════════ 17. DIAG PROGRESS BAR — transición más premium ══════════════════════════════════════════════════════════════ */ .diag-progress-fill { transition: width 0.7s var(--ease); background: linear-gradient(90deg, var(--gold), var(--gold-light)); } /* ══════════════════════════════════════════════════════════════ 18. QUOTE SECTIONS — entrada más dramática ══════════════════════════════════════════════════════════════ */ .quote-section blockquote, .manifiesto-quote { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } /* ══════════════════════════════════════════════════════════════ 19. SCROLLBAR — más refinada ══════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 0; } /* ══════════════════════════════════════════════════════════════ 20. MOBILE — touch feedback limpio ══════════════════════════════════════════════════════════════ */ @media (hover: none), (pointer: coarse) { /* Cancelar todos los hover transforms en táctil */ .btn:hover, .btn-gold:hover, .card:hover, .obra-card:hover, .nav-icon:hover { transform: none !important; box-shadow: none !important; } .btn:hover::after, .btn-gold:hover::after { transform: translateX(-101%) !important; } /* Mobile hover text colors: unified in final CTA block */ .btn:hover { color: var(--gold) !important; } .btn-gold:hover { color: var(--gold) !important; } /* Active states táctil — feedback claro */ .btn:active { transform: scale(0.96) !important; } .nav-icon:active { transform: scale(0.93) !important; opacity: 0.75; } .diag-opcion:active { transform: none !important; background: rgba(216, 196, 166, 0.08) !important; } } /* ══════════════════════════════════════════════════════════════ 21. SCROLL PROGRESS BAR — línea dorada superior ══════════════════════════════════════════════════════════════ */ #scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient( to right, var(--gold) 0%, var(--gold-light) 60%, rgba(216, 196, 166, 0.4) 100% ); transform-origin: left center; transform: scaleX(0); z-index: var(--z-progress); pointer-events: none; will-change: transform; } /* ══════════════════════════════════════════════════════════════ 22. BODY BACKGROUND — negro uniforme, sin gradientes laterales ══════════════════════════════════════════════════════════════ */ body { background: var(--bg); } /* ══════════════════════════════════════════════════════════════ 23. SECTION SPACING — espacio entre secciones unificado ══════════════════════════════════════════════════════════════ */ :root { --space-section: 5.5rem; } .section-full { padding-top: var(--space-section) !important; padding-bottom: var(--space-section) !important; } @media (max-width: 760px) { :root { --space-section: 3.5rem; } } /* ══════════════════════════════════════════════════════════════ 24. PARALLAX BASE — preparación GPU ══════════════════════════════════════════════════════════════ */ [data-parallax] { will-change: transform; } /* ══════════════════════════════════════════════════════════════ 25. CONFRONTACIÓN ICONS — SVG inline en sistema-item ══════════════════════════════════════════════════════════════ */ .sistema-icon { width: 48px; height: 48px; color: var(--gold-light); opacity: 0.5; transition: opacity 0.5s var(--ease), color 0.5s var(--ease); display: block; } .sistema-item:hover .sistema-icon { opacity: 1; color: var(--gold); } /* ══════════════════════════════════════════════════════════════ 26. SISTEMA TIPOGRÁFICO — tres roles, un solo criterio ══════════════════════════════════════════════════════════════ */ :root { --font-display: 'Cormorant Garamond', Georgia, serif; /* Display / h1 / pull quotes */ --font-reading: 'Crimson Pro', Georgia, serif; /* Cuerpo / párrafos / lectura */ --font-ui: 'Inter', system-ui, sans-serif; /* Nav / labels / botones / UI */ } /* ── Cuerpo de lectura — tamaño y ritmo editorial ── */ body { font-family: var(--font-reading) !important; font-size: 18px !important; font-weight: 300 !important; line-height: 1.85 !important; letter-spacing: 0.01em !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1 !important; } /* ── Display — Cormorant para títulos y momentos de impacto ── */ h1, h2, h3, .hero h1, .metodo-hero h1, blockquote, .manifiesto-quote, .section-inner h2, .section-full h2, .obra-card h3, .sistema-item h3 { font-family: var(--font-display) !important; } /* Crimson Pro en h3/h4 secundarios — más lectura que display */ h4, h5, h6, .sistema-item p, .obra-card p { font-family: var(--font-reading) !important; } /* ── UI — Inter estricto para todo lo que no es lectura ── */ nav, .nav a, .site-header, .section-label, .sistema-item-label, .hero-kicker, .res-tag, .fase-num, .diag-num, .footer-nav a, .footer-copy, .footer-label, .btn, label, input, select, textarea, .nav-label, .nav-icon, .lang-btn, .mobile-menu a, .obra-btns a, .libro-ctas a, .hero-ctas a, .scroll-top-btn, .review-marquee-card .reviewer, .review-marquee-card .role { font-family: var(--font-ui) !important; } /* ── Párrafos de lectura — Crimson Pro optimizado ── */ p, .hero-sub, .hero-copy p, .manifiesto-sub, .section-inner p, .section-full p, .problema-texto p, .sc-col p, .obra-card p, .review-marquee-card p, .test-quote, .footer-brand p { font-family: var(--font-reading) !important; font-size: clamp(1rem, 1.5vw, 1.1rem) !important; line-height: 1.85 !important; font-weight: 300 !important; } /* ── Subtítulo hero — Crimson Pro, más grande, más aire ── */ .hero-sub, .hero-sub-rotator { font-family: var(--font-reading) !important; font-size: clamp(1.1rem, 2vw, 1.35rem) !important; font-weight: 300 !important; font-style: italic !important; letter-spacing: 0.01em !important; line-height: 1.7 !important; color: var(--text-muted) !important; text-transform: none !important; } /* ── Blockquotes & pull quotes — Cormorant, voz editorial ── */ blockquote, .manifiesto-quote, .b-quote { font-family: var(--font-display) !important; font-size: clamp(1.55rem, 3vw, 2.2rem) !important; font-weight: 300 !important; font-style: italic !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; } /* ── Section labels — Inter, tracking pronunciado ── */ .section-label, .sistema-item-label, .hero-kicker, .res-tag, .fase-num, .diag-num { font-family: var(--font-ui) !important; font-size: 0.6rem !important; font-weight: 400 !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; } /* ── Mobile: body ligeramente más pequeño ── */ @media (max-width: 760px) { body { font-size: 16px !important; line-height: 1.8 !important; } .hero-sub, .hero-sub-rotator { font-size: 1.05rem !important; } blockquote, .manifiesto-quote { font-size: 1.35rem !important; } } /* ── prefers-reduced-motion — no afecta tipografía ── */ /* ══════════════════════════════════════════════════════════════ 27. MULTI-LAYER BODY TEXTURE — grain volcánico ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ TEXTURA.JPEG — eliminada de fondos de sección textura.jpeg (1920×1080) causa parches y asimetría lateral cuando se usa en backgrounds de página completa. Se elimina de todos los elementos page-level. Se conserva solo en micro-elementos (cards, modales). ══════════════════════════════════════════════════════════════ */ /* Page-level: eliminados */ .section-full::before, .hero::after, .metodo-hero::after, .manifiesto-section::before, .quote-section::before, .ticker-wrap::before, .site-header::before { content: none !important; display: none !important; } /* Micro-level: conservados pero tamaño uniforme */ .card::after, .lead-modal-box::before { background-size: 400px auto !important; } /* ── Watermark CORSO en heroes ── */ .hero::after, .metodo-hero::after { content: "CORSO" !important; position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: clamp(6rem, 22vw, 16rem) !important; font-weight: 300 !important; letter-spacing: 0.4em !important; color: rgba(169, 138, 98, 0.04) !important; pointer-events: none !important; z-index: 0 !important; white-space: nowrap !important; text-transform: uppercase !important; user-select: none !important; background: none !important; opacity: 1 !important; width: auto !important; height: auto !important; animation: none !important; transform: none !important; } /* Contenido del hero por encima del watermark */ .hero > *, .metodo-hero > * { position: relative; z-index: 1; } /* ── Body grain — uniforme, simétrico, sin blend mode ── */ /* Con body negro puro (#000), overlay y soft-light = efecto 0. Solución: opacity directa sin blend mode. SVG 160px fractalNoise isotrópico = tila perfectamente en cualquier ancho. */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: 0.032; pointer-events: none; z-index: var(--z-grain); /* Sin mix-blend-mode — directo sobre negro */ } /* ══════════════════════════════════════════════════════════════ 27. SECTION LABEL — línea accent animada (desde scaleX 0 → 1) ══════════════════════════════════════════════════════════════ */ .section-label { position: relative; display: inline-block; padding-bottom: 0.55rem; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); } .section-label::after { content: ''; position: absolute; bottom: 0; left: 0; height: 1px; width: 2rem; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.1s; } /* Cuando el label tiene .visible (añadido por el observer de .animar) */ .section-label.visible::after { transform: scaleX(1); } /* Si no lleva .animar → siempre visible */ .section-label:not(.animar)::after { transform: scaleX(1); } /* Labels centrados — línea centrada bajo el texto */ .manifiesto-section .section-label::after, .section-label[style*="text-align: center"]::after, .section-label[style*="text-align:center"]::after { left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; } .manifiesto-section .section-label.visible::after, .section-label[style*="text-align: center"].visible::after, .section-label[style*="text-align:center"].visible::after { transform: translateX(-50%) scaleX(1); } .manifiesto-section .section-label:not(.animar)::after, .section-label[style*="text-align: center"]:not(.animar)::after, .section-label[style*="text-align:center"]:not(.animar)::after { transform: translateX(-50%) scaleX(1); } /* ══════════════════════════════════════════════════════════════ 28. CARDS — lift + línea accent superior en hover ══════════════════════════════════════════════════════════════ */ .card { position: relative; overflow: visible; transition: background 0.35s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.4s var(--ease) !important; } .card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); } @media (hover: hover) and (pointer: fine) { .card:hover { background: #0d0d0d !important; transform: translateY(-6px) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(216, 196, 166, 0.18) !important; } .card:hover::after { transform: scaleX(1); } } /* obra-card — mismo tratamiento */ .obra-card { position: relative; transition: border-color 0.35s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease) !important; } .obra-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); } @media (hover: hover) and (pointer: fine) { .obra-card:hover { border-color: var(--border-gold) !important; transform: translateY(-6px) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42) !important; } .obra-card:hover::after { transform: scaleX(1); } } /* ══════════════════════════════════════════════════════════════ 29. REVIEW MARQUEE CARDS — luxury treatment ══════════════════════════════════════════════════════════════ */ .review-marquee-card { position: relative; background: rgba(255, 255, 255, 0.012) !important; border: 0.5px solid rgba(244, 241, 236, 0.07) !important; border-radius: 0 !important; transition: border-color 0.4s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .review-marquee-card::before { content: '\201C'; display: block; font-family: "Cormorant Garamond", serif; font-size: 3.2rem; font-weight: 300; line-height: 0.75; color: var(--gold); opacity: 0.25; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .review-marquee-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--gold-light), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); } @media (hover: hover) and (pointer: fine) { .review-marquee-card:hover { border-color: rgba(216, 196, 166, 0.2) !important; transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } .review-marquee-card:hover::after { transform: scaleX(1); } } /* ══════════════════════════════════════════════════════════════ 30. FOOTER — textura SVG + separador luxury ══════════════════════════════════════════════════════════════ */ .footer { position: relative; overflow: hidden; padding: clamp(4rem, 8vh, 6rem) 2.5rem clamp(2.5rem, 5vh, 4rem) !important; border-top: none !important; } /* Capa 1: topografía — dos picos con curvas de nivel doradas */ .footer::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 380'%3E%3Cg fill='none' stroke='%23c4ad8c' stroke-width='0.65'%3E%3Cellipse cx='380' cy='195' rx='42' ry='24' transform='rotate(-10 380 195)'/%3E%3Cellipse cx='380' cy='195' rx='98' ry='51' transform='rotate(-8 380 195)'/%3E%3Cellipse cx='380' cy='195' rx='172' ry='82' transform='rotate(-6 380 195)'/%3E%3Cellipse cx='380' cy='195' rx='260' ry='114' transform='rotate(-5 380 195)'/%3E%3Cellipse cx='380' cy='195' rx='360' ry='146' transform='rotate(-4 380 195)'/%3E%3Cellipse cx='380' cy='195' rx='472' ry='176' transform='rotate(-3 380 195)'/%3E%3Cellipse cx='380' cy='195' rx='596' ry='204' transform='rotate(-2 380 195)'/%3E%3Cellipse cx='380' cy='195' rx='740' ry='230' transform='rotate(-1 380 195)'/%3E%3Cellipse cx='1080' cy='215' rx='50' ry='28' transform='rotate(12 1080 215)'/%3E%3Cellipse cx='1080' cy='215' rx='118' ry='60' transform='rotate(9 1080 215)'/%3E%3Cellipse cx='1080' cy='215' rx='205' ry='96' transform='rotate(7 1080 215)'/%3E%3Cellipse cx='1080' cy='215' rx='306' ry='130' transform='rotate(5 1080 215)'/%3E%3Cellipse cx='1080' cy='215' rx='420' ry='162' transform='rotate(3 1080 215)'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; opacity: 0.18; pointer-events: none; z-index: 0; /* Vignette: se desvanece en los bordes para que no corte */ mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 25%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 25%, transparent 80%); } /* Capa 2: glow dorado ambiental */ .footer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 60% 70% at 28% 50%, rgba(169, 138, 98, 0.055) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 75% 50%, rgba(169, 138, 98, 0.03) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Todo el contenido por encima de las capas */ .footer-top, .footer-bottom, .footer-brand, .footer-nav, .footer-ig, .footer-copy { position: relative; z-index: 1; } /* Separador superior — gradient que se desvanece en los extremos */ .footer-top { position: relative; } .footer-top::before { content: ''; position: absolute; top: calc(-1 * clamp(4rem, 8vh, 6rem)); left: 0; right: 0; height: 0.5px; background: linear-gradient( 90deg, transparent 0%, rgba(169, 138, 98, 0.16) 15%, rgba(169, 138, 98, 0.38) 50%, rgba(169, 138, 98, 0.16) 85%, transparent 100% ); } /* ══════════════════════════════════════════════════════════════ 31. SCROLL TOP BTN — luxury refinado ══════════════════════════════════════════════════════════════ */ .scroll-top-btn { transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s !important; } @media (hover: hover) and (pointer: fine) { .scroll-top-btn:hover { transform: translateY(-2px) !important; border-color: var(--border-gold) !important; box-shadow: 0 0 16px rgba(169, 138, 98, 0.12) !important; } } /* prefers-reduced-motion: body::before/after ya eliminados */ /* ══════════════════════════════════════════════════════════════ 32. PORTADAS — integración cinematográfica ══════════════════════════════════════════════════════════════ */ /* mockup-libro: wrapper con vignette + glow ambiental */ .libro-mockup { position: relative; display: inline-block; margin: 2.5rem 0 3rem !important; } .libro-mockup img { display: block; filter: saturate(0.78) drop-shadow(0 8px 32px rgba(0, 0, 0, 0.75)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); transition: filter 0.7s var(--ease), transform 0.6s var(--ease); /* Vignette: desvanece bordes hacia el negro */ mask-image: radial-gradient( ellipse 88% 88% at 50% 48%, black 52%, rgba(0, 0, 0, 0.85) 70%, transparent 100% ); -webkit-mask-image: radial-gradient( ellipse 88% 88% at 50% 48%, black 52%, rgba(0, 0, 0, 0.85) 70%, transparent 100% ); } /* Glow dorado ambiental detrás */ .libro-mockup::before { content: ''; position: absolute; inset: 10% 15%; background: radial-gradient( ellipse at 50% 60%, rgba(169, 138, 98, 0.12) 0%, transparent 70% ); filter: blur(24px); pointer-events: none; z-index: -1; transition: opacity 0.7s var(--ease); } @media (hover: hover) and (pointer: fine) { .libro-mockup:hover img { filter: saturate(1) drop-shadow(0 12px 48px rgba(0, 0, 0, 0.8)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); transform: translateY(-4px); } .libro-mockup:hover::before { opacity: 1.4; } } /* obra-portada: desaturada, vignette sutil, sombra cinematográfica */ .obra-portada { filter: saturate(0.72) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7)); mask-image: radial-gradient( ellipse 90% 92% at 50% 50%, black 50%, rgba(0, 0, 0, 0.9) 72%, transparent 100% ); -webkit-mask-image: radial-gradient( ellipse 90% 92% at 50% 50%, black 50%, rgba(0, 0, 0, 0.9) 72%, transparent 100% ); transition: filter 0.65s var(--ease), transform 0.5s var(--ease); } @media (hover: hover) and (pointer: fine) { .obra-card:hover .obra-portada { filter: saturate(1) drop-shadow(0 10px 32px rgba(0, 0, 0, 0.75)); transform: translateY(-3px) scale(1.02); } } /* ══════════════════════════════════════════════════════════════ 31. ESPACIO NEGATIVO — Quiet Luxury breathing ══════════════════════════════════════════════════════════════ */ /* Hero — más altura y aire vertical */ .hero { min-height: 100svh !important; padding-top: clamp(13rem, 26vh, 20rem) !important; padding-bottom: clamp(10rem, 20vh, 15rem) !important; } /* Metodo hero — mismo tratamiento */ .metodo-hero { padding-top: clamp(13rem, 26vh, 20rem) !important; padding-bottom: clamp(10rem, 20vh, 15rem) !important; } /* ── HERO INTERNAL SPACING — aire entre cada elemento de texto ── */ /* Logo → kicker */ .hero .hero-logo, .metodo-hero .hero-logo { margin-bottom: clamp(2rem, 4vh, 3.5rem) !important; } /* Kicker → h1 */ .hero .hero-kicker, .metodo-hero .hero-kicker { margin-bottom: clamp(1.6rem, 3vh, 2.5rem) !important; display: block; } /* h1 → subtítulo (el gap más crítico — antes 0.7rem) */ .hero h1, .metodo-hero h1 { margin-bottom: clamp(1.8rem, 3.5vh, 3rem) !important; } /* metodo-hero h1 empieza invisible — GSAP hace la entrada igual que .hero h1 */ .metodo-hero h1 { opacity: 0; } /* Subtítulo → hero-copy / CTAs */ .hero .hero-sub, .metodo-hero .hero-sub, .hero-sub-rotator { margin-bottom: clamp(1.8rem, 3.5vh, 3rem) !important; } /* hero-copy (párrafo descriptivo debajo del subtítulo) */ .hero-copy { margin-top: clamp(1.6rem, 3vh, 2.5rem) !important; } /* CTAs */ .hero-ctas { margin-top: clamp(2rem, 4vh, 3.5rem) !important; gap: 1.2rem !important; } /* Inline div con CTAs en estoicismo (max-width: 480px) */ .hero > div[style*="max-width"] { margin-top: clamp(1.8rem, 3.5vh, 3rem) !important; } /* Secciones — más aire entre bloques */ .section-full { padding-top: clamp(8rem, 16vh, 13rem) !important; padding-bottom: clamp(8rem, 16vh, 13rem) !important; } /* Variable global */ :root { --space-section: clamp(8rem, 16vh, 13rem); } /* Separación entre section-label y el título siguiente */ .section-label { margin-bottom: clamp(1.8rem, 4vh, 3rem); display: block; } /* H2 de secciones — más respiro debajo */ .section-inner h2, .section-full h2 { margin-bottom: clamp(2.5rem, 5vh, 4rem); } /* ── MOBILE — proporcionado pero generoso ── */ @media (max-width: 760px) { .hero { padding-top: clamp(6rem, 16vh, 9rem) !important; padding-bottom: clamp(4rem, 8vh, 6rem) !important; } .metodo-hero { padding-top: clamp(6rem, 16vh, 9rem) !important; padding-bottom: clamp(3.5rem, 7vh, 5rem) !important; } .hero h1, .metodo-hero h1 { margin-bottom: 1.4rem !important; } .hero .hero-sub, .hero-sub-rotator { margin-bottom: 1.4rem !important; } .hero .hero-logo { margin-bottom: 1.6rem !important; } .hero .hero-kicker { margin-bottom: 1.2rem !important; } .hero-ctas { margin-top: 1.8rem !important; gap: 0.9rem !important; } .section-full { padding-top: 5rem !important; padding-bottom: 5rem !important; } :root { --space-section: 5rem; } } /* ── Mini-citas en línea: énfasis con acento dorado (quiet luxury) ── */ .section-inner p[style*="font-style:italic"] { border-left: 2px solid var(--border-gold); padding-left: 1.5rem; } /* ── Navegación de artículos (volver al archivo + siguiente) ── */ .article-nav { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; max-width: 720px; margin: 0 auto; padding: 3.5rem 2rem 2.5rem; border-top: 0.5px solid var(--border); } .article-nav a { color: var(--gold); text-decoration: none; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; transition: opacity 0.25s var(--ease, ease); } .article-nav a:hover { opacity: 1; } .article-nav-next { text-align: right; margin-left: auto; } @media (max-width: 600px) { .article-nav { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding-left: 1.2rem; padding-right: 1.2rem; } .article-nav-next { text-align: left; margin-left: 0; } } /* ── Badge "Nuevo" en productos ── */ .shop-card { position: relative; } .shop-badge { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 3; font-family: "Inter", sans-serif; font-size: 0.52rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); background: rgba(0, 0, 0, 0.5); border: 0.5px solid var(--border-gold); padding: 0.32rem 0.6rem; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; } /* ── Cierre premium del shop ── */ .shop-closing { text-align: center; max-width: 640px; margin: 5.5rem auto 0; padding-top: 4rem; border-top: 0.5px solid var(--border); } .shop-closing .shop-closing-line { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--gold-light); margin-bottom: 1.4rem; line-height: 1.35; } .shop-closing .shop-closing-trust { color: var(--text-muted); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.9rem; } /* ── Cross-sell "completa el set" ── */ .shop-set { display: block; color: var(--text-dim); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; margin-top: 0.2rem; } /* ================================================================= SISTEMA DE BOTONES CTA UNIFICADO Autoridad máxima — nunca sobreescribir debajo de este bloque. Resuelve: dispersión de colores, text invisible post-tap, long-press en mobile, tamaños inconsistentes. ================================================================= */ /* ── 1. Reset anti-longpress en TODOS los elementos interactivos ─ */ .btn, .btn-gold, .header-cta, .shop-btn, .scroll-top-btn, .lang-btn, .diag-opcion, .diag-reiniciar, .mobile-toggle { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; touch-action: manipulation !important; } /* ── 2. TOKEN BASE: borde dorado sólido, fill deslizante ────────── */ .btn, .btn-gold { /* Layout */ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 0.85rem 2.5rem !important; /* Tipografía */ font-family: var(--font-ui, "Inter", sans-serif) !important; font-size: 0.72rem !important; font-weight: 400 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap; /* Color: borde + texto dorado, fondo transparente */ color: var(--gold) !important; background: transparent !important; border: 1px solid var(--gold) !important; border-radius: 0 !important; box-shadow: none !important; outline: none; cursor: pointer; /* Fill animation */ position: relative !important; overflow: hidden !important; z-index: 0 !important; transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important; } /* Fill de hover — se desliza de izquierda a derecha */ .btn::after, .btn-gold::after { content: "" !important; position: absolute !important; inset: 0 !important; background: var(--gold) !important; transform: translateX(-101%) !important; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important; z-index: -1 !important; } /* ── 3. Hover: solo dispositivos con puntero fino (desktop) ─────── */ @media (hover: hover) and (pointer: fine) { .btn:hover, .btn-gold:hover { color: var(--bg) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(184, 147, 106, 0.22) !important; } .btn:hover::after, .btn-gold:hover::after { transform: translateX(0) !important; } } /* ── 4. Active (tap/click): escala sutil, SIN cambio de color ────── */ .btn:active, .btn-gold:active { transform: scale(0.96) !important; box-shadow: none !important; /* NO cambia color ni background — texto siempre visible */ } /* ── 5. Mobile táctil: cancelar hover stuck, cero visual side fx ── */ @media (hover: none), (pointer: coarse) { .btn:hover, .btn-gold:hover { color: var(--gold) !important; transform: none !important; box-shadow: none !important; } .btn:hover::after, .btn-gold:hover::after { transform: translateX(-101%) !important; } } /* ── 6. Botón en header (versión compacta, mismo sistema visual) ── */ .header-cta { display: none; align-items: center; margin-left: auto; margin-right: 0.55rem; padding: 0.45rem 1rem !important; font-family: var(--font-ui, "Inter", sans-serif) !important; font-size: 0.6rem !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap; color: var(--gold) !important; background: transparent !important; border: 1px solid var(--gold) !important; border-radius: 0 !important; position: relative; overflow: hidden; z-index: 0; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; touch-action: manipulation; transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .header-cta::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; } @media (hover: hover) and (pointer: fine) { .header-cta:hover { color: var(--bg) !important; background: transparent !important; } .header-cta:hover::after { transform: translateX(0); } } @media (hover: none), (pointer: coarse) { .header-cta:hover { color: var(--gold) !important; background: transparent !important; } .header-cta:hover::after { transform: translateX(-101%); } } .header-cta:active { transform: scale(0.96); } @media (max-width: 1024px) { .header-cta { display: inline-flex; } .header-ctas { display: none; } } @media (max-width: 600px) { .header-cta { padding: 0.4rem 0.75rem !important; font-size: 0.56rem !important; margin-right: 0.4rem; } } /* ── 7. header-ctas: .btn compacto ya hereda el sistema gold ─────── */ .header-ctas .btn { padding: 0.45rem 1rem !important; font-size: 0.62rem !important; letter-spacing: 0.14em !important; min-height: 36px !important; } /* ── 8. Shop button — mismo sistema visual, ancho completo en card ─ */ .shop-btn { display: inline-flex !important; align-items: center !important; align-self: flex-start !important; min-height: 40px !important; padding: 0.5rem 1.25rem !important; font-family: var(--font-ui, "Inter", sans-serif) !important; font-size: 0.68rem !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; text-decoration: none !important; color: var(--gold) !important; background: transparent !important; border: 1px solid var(--gold) !important; border-radius: 0 !important; position: relative; overflow: hidden; z-index: 0; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; touch-action: manipulation; transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .shop-btn::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; } @media (hover: hover) and (pointer: fine) { .shop-btn:hover { color: var(--bg) !important; background: transparent !important; } .shop-btn:hover::after { transform: translateX(0); } } @media (hover: none), (pointer: coarse) { .shop-btn:hover { color: var(--gold) !important; background: transparent !important; } .shop-btn:hover::after { transform: translateX(-101%); } } .shop-btn:active { transform: scale(0.96); } /* ── 9. Ajuste mobile: .btn a ancho controlado en contenedores ────── */ @media (max-width: 600px) { .hero-ctas .btn, .hero-ctas .btn-gold { width: 100% !important; max-width: 340px !important; } .libro-ctas .btn, .obra-btns .btn { width: auto !important; min-width: 160px !important; max-width: none !important; } .libro-ctas, .obra-btns { width: 100%; justify-content: center; } }