/* ============================================================================ ÔFELIA BLOOM — design system (Dirección A · Pasarela, elevado a editorial) Sin color de acento: la jerarquía vive en tipografía, espacio y tracking. La foto ES el color. El lujo se comunica con aire y ritmo, no con densidad. ============================================================================ */ :root{ --bone: #EAEAE8; /* hoja base, blanco-hueso frío (ciclorama) */ --carbon: #2E2E30; /* tipografía, líneas, badges, CTA */ --warm: #E4DCC9; /* bloques de textura puntuales */ --ink-70: rgba(46,46,48,0.70); --ink-55: rgba(46,46,48,0.55); --ink-45: rgba(46,46,48,0.45); --hair: rgba(46,46,48,0.13); --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Mulish', system-ui, -apple-system, Segoe UI, sans-serif; --ease: cubic-bezier(.16,.7,.3,1); --sheet-w: 468px; } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--sans); color:var(--carbon); /* Lienzo cálido (piedra suave): hace flotar la columna hueso. */ background:linear-gradient(178deg,#E7E2D8 0%,#DAD4C8 55%,#D0C9BC 100%) fixed; line-height:1.5; -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; } a{ color:inherit; } ::selection{ background:var(--carbon); color:var(--bone); } /* La "hoja": columna editorial centrada sobre el lienzo. Full-width en móvil. */ .sheet{ width:var(--sheet-w); max-width:100%; margin:0 auto; background:var(--bone); box-shadow:0 50px 110px -40px rgba(36,36,38,0.6), 0 8px 30px -18px rgba(36,36,38,0.35); overflow:hidden; } @media (min-width:540px){ body{ padding:44px 0; } } /* ---- Movimiento: reveals al entrar en viewport (mejora progresiva) -------- IMPORTANTE: el contenido SOLO se oculta si tiene .reveal-on, que un script añade al cargar y NUNCA con reduced-motion ni sin JS. Así, si algo falla, todo es visible — los precios jamás se esconden detrás de JavaScript. */ html.reveal-on .reveal{ opacity:0; transform:translateY(22px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); will-change:opacity, transform; } html.reveal-on .reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } html.reveal-on .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ---- Ornamento divisor --------------------------------------------------- */ .ornament{ display:flex; align-items:center; justify-content:center; gap:14px; padding:30px 30px; color:var(--ink-45); } .ornament::before, .ornament::after{ content:""; height:1px; width:48px; background:var(--hair); } .ornament span{ font-size:11px; line-height:1; } /* ---- Header / lockup ----------------------------------------------------- */ .site-header{ padding:22px 22px 16px; text-align:center; border-bottom:1px solid rgba(46,46,48,0.12); } .site-header .lockup{ display:block; text-decoration:none; color:var(--carbon); } .site-header .brand{ display:block; font-family:var(--serif); font-weight:500; font-size:21px; letter-spacing:0.36em; text-transform:uppercase; line-height:1; margin-left:0.36em; /* compensa el tracking para centrar óptico */ } .site-header .byline{ display:block; font-size:8.5px; letter-spacing:0.44em; text-transform:uppercase; color:var(--ink-45); margin-top:8px; margin-left:0.44em; } /* ---- Navegación ---------------------------------------------------------- */ .nav{ display:flex; justify-content:center; gap:26px; padding:13px 8px; border-bottom:1px solid rgba(46,46,48,0.08); font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase; } .nav a{ position:relative; color:var(--ink-55); text-decoration:none; padding-bottom:3px; transition:color .3s var(--ease); } .nav a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--carbon); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .nav a:hover{ color:var(--carbon); } .nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); } .nav a[aria-current="page"]{ color:var(--carbon); } /* ---- Hero / portada ------------------------------------------------------ */ .hero{ position:relative; overflow:hidden; min-height:86vh; background:linear-gradient(168deg,#ECEAE6,#D8D4CB); } .hero .img{ position:absolute; inset:0; background:url('../img/portada.jpg') center top/cover no-repeat; animation:kenburns 20s var(--ease) forwards; transform-origin:58% 38%; } .hero .hero-video{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center top; } @keyframes kenburns{ from{ transform:scale(1.09); } to{ transform:scale(1); } } .hero::after{ /* grano de film sutil */ content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero .scrim{ position:absolute; left:0; right:0; bottom:0; padding:118px 28px 104px; background:linear-gradient(to top, rgba(234,234,232,0.97) 46%, rgba(234,234,232,0.72) 72%, rgba(234,234,232,0)); } .hero .kicker{ font-size:10px; letter-spacing:0.34em; text-transform:uppercase; color:var(--carbon); } .hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(36px, 10.5vw, 50px); line-height:1.08; margin:14px 0 0; letter-spacing:0.005em; } .hero h1 em{ font-style:italic; } .hero .cue{ position:absolute; left:0; right:0; bottom:18px; text-align:center; font-size:8.5px; letter-spacing:0.32em; text-transform:uppercase; color:var(--ink-55); } .hero .cue .line{ width:1px; height:38px; margin:9px auto 0; background:rgba(46,46,48,0.45); transform-origin:top; animation:cue 2.4s ease-in-out infinite; } @keyframes cue{ 0%,100%{ transform:scaleY(.35); opacity:.35; } 50%{ transform:scaleY(1); opacity:1; } } @media (prefers-reduced-motion:reduce){ .hero .img{ animation:none; transform:none; } .hero .cue .line{ animation:none; } } /* ---- Manifiesto editorial ------------------------------------------------ */ .manifesto{ padding:58px 30px 50px; text-align:center; } .manifesto .eyebrow{ font-size:9.5px; letter-spacing:0.3em; text-transform:uppercase; color:var(--ink-45); } .manifesto .statement{ font-family:var(--serif); font-weight:400; font-size:clamp(22px, 6.4vw, 27px); line-height:1.5; color:rgba(46,46,48,0.86); margin:20px auto 0; max-width:340px; } .manifesto .dropcap{ float:left; font-size:62px; line-height:0.78; padding:6px 10px 0 0; font-weight:500; color:var(--carbon); } .manifesto .sig{ display:block; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-55); margin-top:24px; } /* ---- Marquee de marca ---------------------------------------------------- */ .marquee{ overflow:hidden; background:var(--warm); border-top:1px solid rgba(46,46,48,0.10); border-bottom:1px solid rgba(46,46,48,0.10); padding:14px 0; } .marquee__track{ display:flex; width:max-content; gap:34px; align-items:center; animation:marquee 32s linear infinite; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(46,46,48,0.62); white-space:nowrap; } .marquee__track .star{ font-size:8px; color:var(--ink-45); } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } } /* ---- Ficha de vestido ---------------------------------------------------- */ .dress{ border-bottom:1px solid rgba(46,46,48,0.1); } /* Carrusel de swipe (CSS scroll-snap). Una foto = imagen sola; varias = puntos. */ .carousel{ position:relative; overflow:hidden; } .carousel .track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .carousel .track::-webkit-scrollbar{ display:none; } .carousel .slide{ position:relative; overflow:hidden; flex:0 0 100%; width:100%; height:clamp(440px, 116vw, 600px); scroll-snap-align:start; background:linear-gradient(168deg,#EDEDEB,#DCD9D1); display:flex; align-items:flex-end; justify-content:center; } /* Placeholder elegante mientras no llega la foto (en vez de gris vacío). */ .carousel .slide .ph, .portrait .ph, .tphoto .ph, .about-teaser .avatar .ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; background:linear-gradient(168deg,#EAE6DD,#DBD5C8); } .about-teaser .avatar .ph{ gap:0; } .about-teaser .avatar .ph-name{ font-size:15px; letter-spacing:0.14em; } .ph-name{ font-family:var(--serif); font-size:30px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(46,46,48,0.42); } .ph-soon{ font-size:9px; letter-spacing:0.34em; text-transform:uppercase; color:rgba(46,46,48,0.4); } .carousel .slide .img{ position:absolute; inset:0; background-size:cover; background-position:center top; background-repeat:no-repeat; transition:transform 1.4s var(--ease); } @media (hover:hover){ .dress:hover .carousel .slide .img{ transform:scale(1.045); } } /* Pastilla de progreso (el punto activo se alarga) */ .carousel .dots{ position:absolute; left:0; right:0; bottom:16px; z-index:2; display:flex; justify-content:center; gap:8px; } .carousel .dot{ width:7px; height:7px; padding:0; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,0.62); box-shadow:0 0 0 1px rgba(46,46,48,0.22); transition:width .35s var(--ease), border-radius .35s var(--ease), background .25s; } .carousel .dot.is-on{ width:22px; border-radius:4px; background:var(--carbon); } /* Contador editorial "01 / 0N" (rima con el Nº de pieza) */ .carousel .count{ position:absolute; top:14px; right:15px; z-index:2; font-family:var(--serif); font-size:13px; letter-spacing:0.08em; color:var(--carbon); background:rgba(234,234,232,0.8); padding:3px 10px; backdrop-filter:blur(3px); } /* Flechas (solo desktop, aparecen al pasar el cursor) */ .carousel .cnav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; padding:0 0 4px; border:none; border-radius:50%; cursor:pointer; background:rgba(234,234,232,0.78); color:var(--carbon); font-family:var(--serif); font-size:27px; line-height:1; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s var(--ease), background .2s; backdrop-filter:blur(3px); } .carousel .cnav.prev{ left:14px; } .carousel .cnav.next{ right:14px; } .carousel:hover .cnav{ opacity:1; } .carousel .cnav:hover{ background:var(--bone); } @media (hover:none){ .carousel .cnav{ display:none; } } .dress .body{ padding:34px 28px 44px; text-align:center; } .dress .num{ display:block; font-size:9.5px; letter-spacing:0.32em; color:var(--ink-45); margin-bottom:16px; } .badge{ display:inline-block; border:1px solid rgba(46,46,48,0.4); font-size:9px; letter-spacing:0.22em; text-transform:uppercase; padding:6px 12px; } .dress h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px, 9.4vw, 40px); letter-spacing:0.18em; text-transform:uppercase; margin:18px 0 0; } .dress .phys{ font-size:13px; line-height:1.7; color:var(--ink-70); margin:14px auto 0; max-width:322px; } .dress .emo{ font-family:var(--serif); font-style:italic; font-size:17px; color:rgba(46,46,48,0.62); margin-top:9px; } .dress .event{ font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-45); margin-top:16px; } .rule{ height:1px; background:var(--hair); margin:24px auto; width:48px; } .dress .size{ font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(46,46,48,0.78); } .dress .ref{ font-size:11.5px; line-height:1.6; color:var(--ink-55); margin-top:6px; } .dress .size-link{ display:inline-block; margin-top:13px; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-55); text-decoration:none; border-bottom:1px solid rgba(46,46,48,0.25); padding-bottom:2px; transition:color .25s, border-color .25s; } .dress .size-link:hover{ color:var(--carbon); border-color:var(--carbon); } .dress .price{ font-family:var(--serif); font-size:clamp(17px, 4.6vw, 22px); letter-spacing:0.01em; margin-top:18px; white-space:nowrap; } .dress .trust{ margin-top:13px; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(46,46,48,0.42); line-height:1.7; } /* ---- CTA WhatsApp (carbón sólido, con flecha) --------------------------- */ .cta{ display:inline-flex; align-items:center; justify-content:center; gap:11px; width:100%; max-width:308px; margin:22px auto 0; background:var(--carbon); color:var(--bone); font-size:10.5px; letter-spacing:0.26em; text-transform:uppercase; padding:17px 18px; text-decoration:none; transition:letter-spacing .35s var(--ease), background .25s; } .cta .arrow{ transition:transform .35s var(--ease); } .cta:hover{ background:#1d1d1f; letter-spacing:0.3em; } .cta:hover .arrow{ transform:translateX(5px); } /* ---- Botón outline ------------------------------------------------------- */ .btn-outline{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--carbon); color:var(--carbon); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase; padding:14px 30px; text-decoration:none; transition:background .3s var(--ease), color .3s var(--ease), gap .3s var(--ease); } .btn-outline:hover{ background:var(--carbon); color:var(--bone); gap:16px; } /* ---- Teaser guía de tallas ---------------------------------------------- */ .guide-teaser{ background:var(--warm); padding:58px 30px; text-align:center; } .guide-teaser .kicker{ font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--ink-55); } .guide-teaser h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,8vw,34px); margin:14px 0 0; } .guide-teaser p{ font-size:12.5px; line-height:1.8; color:var(--ink-70); margin:14px auto 24px; max-width:308px; } /* ---- Teaser nosotras ----------------------------------------------------- */ .about-teaser{ padding:58px 30px; text-align:center; } .about-teaser .avatar{ position:relative; overflow:hidden; width:132px; height:132px; margin:0 auto; border-radius:50%; background:linear-gradient(160deg,#ECEAE6,#D8D4CB); display:flex; align-items:center; justify-content:center; text-align:center; font-family:ui-monospace, Menlo, monospace; font-size:8px; letter-spacing:0.12em; color:#A6A296; text-transform:uppercase; box-shadow:0 18px 40px -22px rgba(36,36,38,0.5); } .about-teaser .avatar .img{ position:absolute; inset:0; background:url('../img/ofelia.jpg') center top/cover no-repeat; } .about-teaser .quote{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,5.6vw,21px); color:rgba(46,46,48,0.72); line-height:1.5; margin:24px auto 0; max-width:312px; } .about-teaser .who{ font-size:9.5px; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-45); margin-top:16px; } /* ---- Footer -------------------------------------------------------------- */ .site-footer{ background:var(--carbon); color:var(--bone); padding:54px 30px 40px; text-align:center; } .site-footer .closing{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.5; color:rgba(234,234,232,0.82); max-width:300px; margin:0 auto 30px; } .site-footer .brand{ font-family:var(--serif); font-size:18px; letter-spacing:0.34em; text-transform:uppercase; margin-left:0.34em; } .site-footer .sub{ font-size:9.5px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(234,234,232,0.55); margin-top:9px; } .site-footer .links{ margin-top:24px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; } .site-footer .links a{ position:relative; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(234,234,232,0.85); text-decoration:none; transition:color .25s; } .site-footer .links a:hover{ color:var(--bone); } .site-footer .ig{ display:inline-block; margin-top:24px; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(234,234,232,0.9); text-decoration:none; } .site-footer .ig:hover{ color:var(--bone); } .site-footer .copyright{ font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(234,234,232,0.4); margin-top:26px; } /* ---- Botón flotante de WhatsApp ----------------------------------------- */ .wa-float{ position:fixed; right:20px; bottom:20px; z-index:50; width:52px; height:52px; border-radius:50%; background:var(--carbon); color:var(--bone); display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 14px 34px -10px rgba(36,36,38,0.6); opacity:0; transform:translateY(14px) scale(0.9); pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease), background .25s; } .wa-float.is-on{ opacity:1; transform:none; pointer-events:auto; } .wa-float:hover{ background:#1d1d1f; } .wa-float svg{ width:25px; height:25px; } @media (min-width:540px){ .wa-float{ right:calc(50vw - var(--sheet-w)/2 + 20px); } } /* ---- Prueba social ------------------------------------------------------- */ .social{ padding-bottom:10px; } .tcard{ padding:14px 30px 44px; text-align:center; } .tphoto{ position:relative; overflow:hidden; width:100%; max-width:296px; margin:0 auto; aspect-ratio:4/5; background:linear-gradient(168deg,#EAE6DD,#DBD5C8); box-shadow:0 22px 50px -28px rgba(36,36,38,0.5); } .tphoto .ph .ph-name{ font-size:22px; } .tphoto .img{ position:absolute; inset:0; background-size:cover; background-position:center top; background-repeat:no-repeat; } .tquote{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,5.4vw,22px); line-height:1.5; color:rgba(46,46,48,0.8); margin:26px auto 0; max-width:336px; } .tname{ font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-55); margin-top:18px; } .tctx{ display:block; margin-top:7px; color:var(--ink-45); } /* ---- Cómo funciona ------------------------------------------------------- */ .howto{ padding:54px 30px 58px; border-top:1px solid rgba(46,46,48,0.08); } .howto .eyebrow{ font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--ink-45); text-align:center; display:block; } .howto h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,8vw,34px); text-align:center; margin:12px 0 28px; } .howto .steps{ max-width:368px; margin:0 auto; } .howto .steps a{ color:var(--carbon); text-decoration:underline; } .howto-note{ font-size:12px; line-height:1.75; color:var(--ink-55); text-align:center; max-width:320px; margin:24px auto 0; } /* ============================================================================ Páginas interiores (guía de tallas, nosotras, política) — mismo sistema ============================================================================ */ .page{ padding:46px 28px 52px; } .page .eyebrow{ font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--ink-45); text-align:center; } .page h1{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,9vw,38px); line-height:1.12; text-align:center; margin:14px 0 0; } .page .lede{ font-size:13.5px; line-height:1.75; color:var(--ink-70); text-align:center; margin:16px auto 0; max-width:336px; } .page h2{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,6.4vw,26px); margin:42px 0 14px; letter-spacing:0.03em; } .page p{ font-size:13px; line-height:1.75; color:rgba(46,46,48,0.78); } .page .muted{ color:rgba(46,46,48,0.6); } .size-table{ width:100%; border-collapse:collapse; margin-top:10px; font-size:12px; } .size-table th, .size-table td{ text-align:left; padding:12px 8px; border-bottom:1px solid var(--hair); } .size-table th{ font-weight:600; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-55); } .size-table td:first-child{ font-family:var(--serif); font-size:17px; letter-spacing:0.06em; } .size-table tr[id]{ scroll-margin-top:90px; transition:background .4s var(--ease); } .size-table tr:target{ background:var(--warm); } .steps{ list-style:none; padding:0; margin:16px 0 0; counter-reset:step; } .steps li{ position:relative; padding:0 0 20px 42px; counter-increment:step; font-size:13px; line-height:1.65; color:rgba(46,46,48,0.78); } .steps li::before{ content:counter(step); position:absolute; left:0; top:-2px; width:28px; height:28px; border:1px solid var(--carbon); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:14px; } .steps li strong{ font-weight:600; color:var(--carbon); } .reassure{ background:var(--warm); padding:32px 26px; margin-top:38px; text-align:center; } .reassure h2{ margin:0 0 10px; } .reassure p{ color:var(--ink-70); margin:0 auto; max-width:322px; } .portrait{ position:relative; overflow:hidden; width:100%; height:clamp(360px,100vw,460px); margin:0; background:linear-gradient(160deg,#ECEAE6,#D8D4CB); display:flex; align-items:flex-end; justify-content:center; } .portrait .label{ font-family:ui-monospace, Menlo, monospace; font-size:9px; letter-spacing:0.16em; color:#A6A296; text-transform:uppercase; padding-bottom:16px; } .portrait .img{ position:absolute; inset:0; background:url('../img/ofelia.jpg') center top/cover no-repeat; } .back{ display:inline-block; margin-top:34px; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-55); text-decoration:none; transition:color .25s; } .back:hover{ color:var(--carbon); } /* ── Refuerzo anti-robo de fotos ───────────────────────────────────────────── Las fotos son background-image (el navegador ya no ofrece "Guardar imagen" ni en clic derecho ni en long-press de iOS). Esto lo refuerza: bloquea el menú de mantener-presionado en iOS, la selección y el arrastre. No es a prueba de capturas de pantalla (nada lo es) — la defensa real es la marca de agua horneada en cada foto. */ .hero .img, .carousel .img, .avatar .img, .tphoto .img{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; }