/* ========================================================================= MARTEJIDO · Global CSS — Vikingos Media Pegar en: FluentSnippets -> Global CSS (Site Wide / footer) Requiere cargar Fraunces + Jost en (ver README, Paso 1). Se removio .page{display:none} del mockup: WordPress agrega la clase 'page' al y ocultaria todo el contenido. ========================================================================= */ :root{ --ivory:#F4EFE6; --paper:#FAF7F1; --espresso:#1C1711; --ink:#2B241B; --muted:#6E6353; --sand:#AE8C58; --sand-deep:#8F7142; --sand-light:#D8C7A6; --line:rgba(28,23,17,.14); --line-light:rgba(244,239,230,.18); --serif:'Fraunces',Georgia,serif; --sans:'Jost','Helvetica Neue',sans-serif; --ease:cubic-bezier(.22,1,.36,1); } *{ margin:0; padding:0; box-sizing:border-box } html{ scroll-behavior:smooth } body{ font-family:var(--sans); font-weight:300; color:var(--ink); background:var(--ivory); font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip } img{ display:block; max-width:100% } a{ color:inherit; text-decoration:none } ul{list-style:none} button{ font-family:inherit; cursor:pointer } /* ====== UTILIDADES ====== */ .wrap{ max-width:1280px; margin:0 auto; padding:0 48px } .eyebrow{ font-family:var(--sans); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--sand-deep); font-weight:500; display:flex; align-items:center; gap:16px } .eyebrow::before{ content:""; width:36px; height:1px; background:var(--sand) } .eyebrow.center{ justify-content:center } .eyebrow.center::after{ content:""; width:36px; height:1px; background:var(--sand) } .eyebrow.on-dark{color:var(--sand-light)} h1,h2,h3,.serif{ font-family:var(--serif); font-weight:480; line-height:1.06; letter-spacing:-.012em; font-variation-settings:'opsz' 110 } .display-xl{font-size:clamp(44px,6.4vw,92px)} .display-lg{font-size:clamp(36px,4.6vw,64px)} .display-md{font-size:clamp(28px,3.2vw,44px)} .lede{ font-size:20px; font-weight:300; color:var(--muted); max-width:560px; line-height:1.85 } .on-dark .lede,.lede.on-dark{color:rgba(244,239,230,.72)} /* Botones */ .btn{ display:inline-flex; align-items:center; gap:14px; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; padding:19px 38px; border:1px solid var(--espresso); color:var(--espresso); background:transparent; transition:all .45s var(--ease);position:relative;overflow:hidden } .btn span{position:relative;z-index:1} .btn::after{ content:""; position:absolute; inset:0; background:var(--espresso); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease) } .btn:hover{color:var(--ivory)} .btn:hover::after{transform:scaleX(1)} .btn.solid{background:var(--espresso);color:var(--ivory)} .btn.solid::after{background:var(--sand-deep)} .btn.solid:hover{border-color:var(--sand-deep)} .btn.ghost-light{ border-color:rgba(244,239,230,.5); color:var(--ivory) } .btn.ghost-light::after{background:var(--ivory)} .btn.ghost-light:hover{color:var(--espresso)} .btn .arr{ font-family:var(--serif); font-size:16px; letter-spacing:0; position:relative; z-index:1; transition:transform .45s var(--ease) } .btn:hover .arr{transform:translateX(6px)} .textlink{ font-size:12px; letter-spacing:.26em; text-transform:uppercase; font-weight:500; color:var(--espresso); display:inline-flex; align-items:center; gap:12px; border-bottom:1px solid var(--sand); padding-bottom:8px; transition:gap .35s var(--ease) } .textlink:hover{gap:20px} /* Reveal */ .rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}.rv.d4{transition-delay:.48s} /* Parallax */ [data-plx]{transform:translateY(var(--py,0px));will-change:transform} [data-plxi]{transform:translateY(var(--py,0px)) scale(1.16) !important;transition:none !important;will-change:transform} /* Grain sutil */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.05;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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")} /* ====== ANUNCIO + HEADER ====== */ .topbar{background:var(--espresso);color:rgba(244,239,230,.78);text-align:center;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;padding:11px 16px;font-weight:400} .topbar b{color:var(--sand-light);font-weight:500} header{position:sticky;top:0;z-index:900;background:rgba(250,247,241,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .4s} header.scrolled{box-shadow:0 10px 40px rgba(28,23,17,.08)} .nav{display:flex;align-items:center;justify-content:space-between;height:84px} .brand{display:flex;flex-direction:column;line-height:1;gap:5px;cursor:pointer} .brand .word{font-family:var(--serif);font-size:26px;letter-spacing:.26em;font-weight:520;font-variation-settings:'opsz' 60;color:var(--espresso)} .brand .sub{font-size:8.5px;letter-spacing:.46em;text-transform:uppercase;color:var(--sand-deep);font-weight:500} .navlinks{display:flex;gap:42px} .navlinks a{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--ink);position:relative;padding:6px 0} .navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--sand);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .navlinks a:hover::after,.navlinks a.active::after{transform:scaleX(1)} .navlinks a.active{color:var(--sand-deep)} .nav-cta{display:flex;align-items:center;gap:26px} .nav-cta .mini-btn{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;border:1px solid var(--espresso);padding:13px 26px;transition:all .4s var(--ease)} .nav-cta .mini-btn:hover{background:var(--espresso);color:var(--ivory)} .burger{display:none;flex-direction:column;gap:6px;background:none;border:none;padding:8px} .burger span{width:26px;height:1.5px;background:var(--espresso);transition:all .35s var(--ease)} .mobile-drawer{position:fixed;inset:0;background:var(--espresso);z-index:1500;display:flex;flex-direction:column;justify-content:center;padding:48px;transform:translateX(100%);transition:transform .55s var(--ease)} .mobile-drawer.open{transform:none} .mobile-drawer a{font-family:var(--serif);font-size:34px;color:var(--ivory);padding:14px 0;border-bottom:1px solid var(--line-light)} .mobile-drawer .close-x{position:absolute;top:28px;right:32px;background:none;border:none;color:var(--ivory);font-size:30px;font-family:var(--serif)} /* ====== PÁGINAS (SPA) ====== */ /* Reveal de entrada (reemplaza la lógica SPA del mockup) */ @keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .mj-page-in{animation:pageIn .8s var(--ease)} /* ====== HERO HOME ====== */ .hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:var(--ivory);isolation:isolate;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:-2;background:#3a3128 url('https://martejido.com/wp-content/uploads/2026/04/sicilia_01-1.webp') center/cover no-repeat;transform:scale(1.06);animation:slowZoom 14s var(--ease) forwards} @keyframes slowZoom{to{transform:scale(1)}} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,16,11,.88) 0%,rgba(20,16,11,.42) 46%,rgba(20,16,11,.18) 100%)} .hero-inner{width:100%;padding-bottom:96px} .hero h1{color:var(--ivory);max-width:13ch;margin:26px 0 30px} .hero h1 em{font-style:italic;color:var(--sand-light)} .hero .lede{color:rgba(244,239,230,.78);margin-bottom:46px} .hero-ctas{display:flex;gap:20px;flex-wrap:wrap} .hero-meta{position:absolute;right:48px;bottom:96px;text-align:right;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,239,230,.55);line-height:2.4} .hero-meta b{display:block;font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:var(--sand-light);font-weight:500} /* Cinta manifiesto */ .manifest{background:var(--paper);border-bottom:1px solid var(--line)} .manifest .row{display:grid;grid-template-columns:repeat(3,1fr);} .manifest{overflow:visible} .manifest .cell{padding:54px 40px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:var(--paper)} .manifest .cell:first-child{border-left:none} .manifest .num{font-family:var(--serif);font-size:15px;color:var(--sand-deep);letter-spacing:.2em} .manifest h3{font-size:23px} .manifest p{font-size:16px;color:var(--muted);line-height:1.8} /* ====== SECCIONES GENÉRICAS ====== */ .section{padding:130px 0} .section.tight{padding:96px 0} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:72px;flex-wrap:wrap} .sec-head h2{margin-top:22px;max-width:14ch} .dark{background:var(--espresso);color:var(--ivory)} .dark h2,.dark h3{color:var(--ivory)} /* Grid editorial colecciones (home) */ .col-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px} .col-card{position:relative;overflow:hidden;background:#2c251d;cursor:pointer} .col-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .6s;opacity:.96} .col-card:hover img{transform:scale(1.05)} .col-card .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,11,.82),rgba(20,16,11,0) 55%)} .col-card .tag{position:absolute;top:24px;left:24px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory);border:1px solid rgba(244,239,230,.4);padding:8px 16px;backdrop-filter:blur(4px)} .col-card .info{position:absolute;left:32px;right:32px;bottom:30px;color:var(--ivory)} .col-card .info .cname{font-family:var(--serif);font-size:30px;letter-spacing:.06em} .col-card .info .cdesc{font-size:15px;color:rgba(244,239,230,.7);margin-top:6px;max-width:38ch;opacity:0;transform:translateY(10px);transition:all .5s var(--ease)} .col-card:hover .cdesc{opacity:1;transform:none} .col-card .info .go{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--sand-light);margin-top:14px;display:inline-block} .cc-a{grid-column:span 7;aspect-ratio:16/10} .cc-b{grid-column:span 5;aspect-ratio:4/3.55} .cc-c{grid-column:span 5;aspect-ratio:4/3.55} .cc-d{grid-column:span 7;aspect-ratio:16/10} /* Materias primas */ .materials{position:relative} .materials .intro{max-width:680px;margin-bottom:84px} .mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .mat{position:relative} .mat .ph{aspect-ratio:3/4;overflow:hidden;background:#2c251d} .mat .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform 1.3s var(--ease)} .mat:hover .ph img{transform:scale(1.06)} .mat .idx{position:absolute;top:-18px;left:-6px;font-family:var(--serif);font-style:italic;font-size:58px;color:var(--sand);opacity:.85;z-index:2} .mat h3{font-size:25px;margin:26px 0 10px;letter-spacing:.04em} .mat p{font-size:16px;color:rgba(244,239,230,.62);line-height:1.85;max-width:40ch} /* Bloque Diseñamos tu espacio (teaser) */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:center} .split .ph{position:relative} .split .ph .phclip{overflow:hidden} .split .ph .main{aspect-ratio:4/4.6;object-fit:cover;width:100%} .split .ph::after{content:"";position:absolute;top:26px;left:26px;right:-26px;bottom:-26px;border:1px solid var(--sand);z-index:-1} .steps{margin-top:46px;border-top:1px solid var(--line)} .step{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline} .step .n{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--sand-deep)} .step h4{font-family:var(--serif);font-size:21px;font-weight:500;margin-bottom:4px} .step p{font-size:16px;color:var(--muted);line-height:1.75} /* Quote atelier */ .quoteband{position:relative;text-align:center;padding:150px 0;background:var(--paper) } .quoteband blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,44px);line-height:1.4;max-width:21ch;margin:34px auto 30px;color:var(--ink)} .quoteband blockquote em{color:var(--sand-deep)} .quoteband cite{font-style:normal;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} /* Piezas selectas */ .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .prod{cursor:pointer} .prod .ph{aspect-ratio:3/3.4;overflow:hidden;background:var(--paper);position:relative} .prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .prod:hover .ph img{transform:scale(1.06)} .prod .ph .chip{position:absolute;top:16px;left:16px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;background:rgba(250,247,241,.92);padding:7px 14px;color:var(--sand-deep);font-weight:500} .prod h3{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin:22px 0 8px;line-height:1.6} .prod .price{font-family:var(--serif);font-size:19px;color:var(--sand-deep);letter-spacing:.04em} .prod .cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px} /* CTA final */ .cta-final{position:relative;color:var(--ivory);text-align:center;padding:170px 0;isolation:isolate;overflow:hidden} .cta-final .bg{position:absolute;inset:0;z-index:-2;background:#3a3128 url('https://martejido.com/wp-content/uploads/2026/04/portofino_01-1.webp') center/cover fixed} .cta-final::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,16,11,.78)} .cta-final h2{max-width:18ch;margin:26px auto 22px} .cta-final p{color:rgba(244,239,230,.7);max-width:52ch;margin:0 auto 44px} /* ====== PÁGINA COLECCIONES ====== */ .page-hero{padding:110px 0 70px;border-bottom:1px solid var(--line)} .page-hero h1{margin-top:24px;max-width:16ch} .page-hero .lede{margin-top:24px} .filters{display:flex;gap:14px;flex-wrap:wrap;padding:34px 0;border-bottom:1px solid var(--line)} .fchip{font-size:11px;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--line);background:transparent;color:var(--muted);padding:12px 24px;transition:all .35s var(--ease)} .fchip:hover,.fchip.on{border-color:var(--espresso);color:var(--espresso)} .fchip.on{background:var(--espresso);color:var(--ivory)} .collections-list{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 32px;padding:80px 0} .cl-card{cursor:pointer} .cl-card .ph{aspect-ratio:16/10.5;overflow:hidden;background:var(--paper);position:relative} .cl-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)} .cl-card:hover .ph img{transform:scale(1.05)} .cl-card .ph .badge{position:absolute;top:18px;left:18px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;background:rgba(28,23,17,.85);color:var(--sand-light);padding:8px 16px} .cl-card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:26px;gap:20px} .cl-card h3{font-size:30px;letter-spacing:.05em} .cl-card .from{font-family:var(--serif);font-size:16px;color:var(--sand-deep);white-space:nowrap} .cl-card p{font-size:16px;color:var(--muted);margin-top:10px;max-width:52ch;line-height:1.8} /* ====== FICHA DE COLECCIÓN (PDP) ====== */ .pdp{display:grid;grid-template-columns:1.08fr .92fr;gap:80px;padding:90px 0 60px;align-items:start} .pdp-gallery{position:sticky;top:120px;display:flex;flex-direction:column;gap:22px} .pdp-gallery .main{aspect-ratio:4/3.4;overflow:hidden;background:var(--paper)} .pdp-gallery .main img{width:100%;height:100%;object-fit:cover;transition:opacity .5s} .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .thumbs button{border:1px solid var(--line);background:none;padding:0;aspect-ratio:1;overflow:hidden;transition:border-color .3s} .thumbs button.on{border-color:var(--sand-deep)} .thumbs img{width:100%;height:100%;object-fit:cover} .pdp-info .crumb{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:30px} .pdp-info .crumb a{color:var(--sand-deep)} .pdp-info h1{font-size:clamp(36px,4vw,54px);letter-spacing:.04em} .pdp-info .poem{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.7;color:var(--muted);margin:26px 0 8px;max-width:46ch} .price-row{display:flex;align-items:baseline;gap:18px;margin:30px 0 8px;padding-top:28px;border-top:1px solid var(--line)} .price-row .from{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)} .price-row .val{font-family:var(--serif);font-size:34px;color:var(--espresso)} .price-row .note{font-size:14px;color:var(--muted)} .config{margin-top:34px;display:flex;flex-direction:column;gap:30px} .cfg-group .cfg-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:14px} .cfg-group .cfg-label .sel{color:var(--sand-deep);letter-spacing:.1em;text-transform:none;font-family:var(--serif);font-style:italic;font-size:15px} .swatches{display:flex;gap:14px;flex-wrap:wrap} .sw{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);padding:3px;background:none;position:relative;transition:all .3s} .sw img{width:100%;height:100%;object-fit:cover;border-radius:50%} .sw .solidc{width:100%;height:100%;border-radius:50%} .sw.on{border-color:var(--sand-deep);box-shadow:0 0 0 1px var(--sand-deep)} .sw:hover{border-color:var(--sand)} .pdp-ctas{display:flex;flex-direction:column;gap:14px;margin-top:42px} .pdp-ctas .btn{justify-content:center} .wa-line{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:16px;border:1px solid var(--line);transition:all .35s} .wa-line:hover{border-color:var(--sand-deep);color:var(--sand-deep)} .assurance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px} .assurance div{background:var(--paper);padding:20px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.9} .assurance b{display:block;font-family:var(--serif);font-size:16px;letter-spacing:.04em;text-transform:none;color:var(--ink);font-weight:500} /* Proceso de reserva */ .reserve-band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .reserve-band .inner{padding:90px 0} .rsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:64px} .rstep{border-top:1px solid var(--sand);padding-top:26px} .rstep .n{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--sand-deep)} .rstep h4{font-family:var(--serif);font-size:21px;margin:12px 0 8px;font-weight:500} .rstep p{font-size:15.5px;color:var(--muted);line-height:1.8} /* Specs */ .specs{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:100px 0} .spec-table{border-top:1px solid var(--espresso)} .spec-table .row{display:grid;grid-template-columns:1fr 1.4fr;padding:18px 4px;border-bottom:1px solid var(--line);font-size:16px} .spec-table .row .k{letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:var(--muted);font-weight:500} .dims{display:flex;flex-direction:column;gap:26px} .dim{display:grid;grid-template-columns:1fr 130px;gap:24px;align-items:center;border:1px solid var(--line);padding:26px;background:var(--paper)} .dim h4{font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:8px} .dim p{font-size:15px;color:var(--muted);line-height:1.9} .dim img{filter:contrast(.9)} /* ====== DISEÑAMOS TU ESPACIO ====== */ .space-hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;color:var(--ivory);isolation:isolate} .space-hero .bg{position:absolute;inset:0;z-index:-2;background:#3a3128 url('https://martejido.com/wp-content/uploads/2026/04/toscana_01-1.webp') center/cover} .space-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,16,11,.9),rgba(20,16,11,.25))} .space-hero .inner{padding-bottom:84px} .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .process-grid .p{background:var(--ivory);padding:48px 36px} .process-grid .n{font-family:var(--serif);font-style:italic;font-size:44px;color:var(--sand)} .process-grid h4{font-family:var(--serif);font-size:22px;font-weight:500;margin:18px 0 10px} .process-grid p{font-size:15.5px;color:var(--muted);line-height:1.85} /* Formularios */ .formband{background:var(--espresso);color:var(--ivory)} .formgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;padding:120px 0} .formgrid .left p{color:rgba(244,239,230,.68);margin-top:24px;font-size:17px;line-height:1.9;max-width:46ch} .flist{margin-top:44px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-light)} .flist li{display:flex;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line-light);font-size:16px;color:rgba(244,239,230,.75)} .flist li::before{content:"—";color:var(--sand-light)} form .frow{display:grid;grid-template-columns:1fr 1fr;gap:26px} .field{display:flex;flex-direction:column;gap:10px;margin-bottom:26px} .field label{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-light);font-weight:500} .field input,.field select,.field textarea{background:transparent;border:none;border-bottom:1px solid rgba(244,239,230,.3);color:var(--ivory);font-family:var(--sans);font-weight:300;font-size:18px;padding:12px 2px;outline:none;transition:border-color .3s;border-radius:0;-webkit-appearance:none} .field select option{color:var(--ink)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sand)} .field textarea{resize:vertical;min-height:110px} .consent{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;color:rgba(244,239,230,.6);margin:8px 0 36px;line-height:1.7} .consent a{color:var(--sand-light);border-bottom:1px solid var(--sand-deep)} .consent input{margin-top:5px;accent-color:var(--sand)} .form-light .field label{color:var(--sand-deep)} .form-light .field input,.form-light .field select,.form-light .field textarea{color:var(--ink);border-bottom-color:var(--line)} .form-light .field input:focus,.form-light .field select:focus,.form-light .field textarea:focus{border-color:var(--sand-deep)} .form-light .consent{color:var(--muted)} .form-light .consent a{color:var(--sand-deep)} /* ====== NOSOTROS ====== */ .about-hero{padding:120px 0 90px;text-align:center} .about-hero h1{max-width:17ch;margin:26px auto} .about-hero .lede{margin:0 auto} .story{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:40px 0 120px} .story .ph{aspect-ratio:3/3.7;overflow:hidden} .story .ph img{width:100%;height:100%;object-fit:cover} .story .serif-quote{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.6;color:var(--ink);margin:26px 0;border-left:1px solid var(--sand);padding-left:28px} .values{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-bottom:0} .value{border:1px solid var(--line);padding:48px 38px;background:var(--paper);transition:all .4s var(--ease)} .value:hover{border-color:var(--sand);transform:translateY(-6px)} .value .ic{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--sand-deep)} .value h3{font-size:23px;margin:18px 0 12px} .value p{font-size:16px;color:var(--muted);line-height:1.85} /* ====== CONTACTO ====== */ .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;padding:110px 0} .cinfo .block{padding:30px 0;border-bottom:1px solid var(--line)} .cinfo .block:first-of-type{border-top:1px solid var(--espresso)} .cinfo .k{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:10px} .cinfo .v{font-family:var(--serif);font-size:23px;color:var(--ink)} .cinfo .v small{display:block;font-family:var(--sans);font-size:15px;color:var(--muted);margin-top:6px;letter-spacing:.04em} .showroom-ph{margin-top:46px;aspect-ratio:16/9;overflow:hidden} .showroom-ph img{width:100%;height:100%;object-fit:cover} /* ====== FOOTER ====== */ footer{background:var(--espresso);color:rgba(244,239,230,.66);padding:100px 0 0} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:60px;padding-bottom:80px} .fgrid .fbrand .word{font-family:var(--serif);font-size:30px;letter-spacing:.26em;font-variation-settings:'opsz' 60;color:var(--ivory)} .fgrid .fbrand p{font-size:15.5px;line-height:1.9;margin-top:20px;max-width:34ch} .fgrid h5{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--sand-light);font-weight:500;margin-bottom:24px} .fgrid a{display:block;font-size:16px;padding:7px 0;color:rgba(244,239,230,.66);transition:color .3s} .fgrid a:hover{color:var(--sand-light)} .fbottom{border-top:1px solid var(--line-light);padding:30px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.4)} .fbottom a{color:rgba(244,239,230,.55)} .fbottom a:hover{color:var(--sand-light)} /* WhatsApp flotante */ .wa-float{ position:fixed; right:30px; bottom:30px; z-index:1000; width:58px; height:58px; border-radius:50%; background:var(--espresso); border:1px solid var(--sand-deep); display:flex; align-items:center; justify-content:center; color:var(--sand-light); transition:all .35s var(--ease);box-shadow:0 14px 40px rgba(20,16,11,.35) } .wa-float:hover{ transform:translateY(-4px); background:var(--sand-deep); color:var(--ivory) } .wa-float svg{width:26px;height:26px} /* Banner demo */ /* ====== RESPONSIVE ====== */ @media (max-width:1080px){ .wrap{padding:0 32px} .navlinks{display:none} .nav-cta .mini-btn{display:none} .burger{display:flex} .col-grid{grid-template-columns:1fr 1fr} .cc-a,.cc-b,.cc-c,.cc-d{grid-column:span 1;aspect-ratio:4/3.4} .prod-grid{grid-template-columns:repeat(2,1fr)} .mat-grid{grid-template-columns:1fr 1fr;gap:48px 28px} .split,.pdp,.specs,.formgrid,.contact-grid,.story{grid-template-columns:1fr;gap:60px} .pdp-gallery{position:static} .rsteps,.process-grid{grid-template-columns:1fr 1fr} .fgrid{grid-template-columns:1fr 1fr} .collections-list{grid-template-columns:1fr} .hero-meta{display:none} } @media (max-width:640px){ .wrap{padding:0 22px} .section{padding:84px 0} .manifest .row{grid-template-columns:1fr} .manifest .cell{border-left:none;border-top:1px solid var(--line)} .col-grid,.prod-grid,.mat-grid,.rsteps,.process-grid,.fgrid{grid-template-columns:1fr} form .frow{grid-template-columns:1fr} .values{grid-template-columns:1fr} .hero-inner{padding-bottom:70px} .assurance{grid-template-columns:1fr} .dim{grid-template-columns:1fr;justify-items:start} .topbar{font-size:9px;letter-spacing:.2em} } /* ========================================================================= MARTEJIDO · SECCIÓN "LA MATERIA" — 6 materiales Vikingos Media PEGAR AL FINAL del snippet "MJ · Global CSS". Ajusta la rejilla para dos filas y da aire entre ellas. ========================================================================= */ .mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 34px; row-gap: 76px; } .mat .ph { overflow: hidden; } .mat .ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); } .mat:hover .ph img { transform: scale(1.05); } @media (max-width: 1080px) { .mat-grid { grid-template-columns: repeat(2, 1fr); column-gap: 26px; row-gap: 60px; } } @media (max-width: 640px) { .mat-grid { grid-template-columns: 1fr; row-gap: 52px; } } /* ========================================================================= MARTEJIDO · SUBMENÚ DEL HEADER — Vikingos Media PEGAR AL FINAL del snippet CSS del header (o en "MJ · Global CSS"). El header es HTML propio (no un widget de menú), así que el desplegable se controla con estas clases: .mj-has-sub contenedor de "Colecciones" + su submenú .mj-sub el panel desplegable ========================================================================= */ /* ========================================================================= 1 · DESKTOP · desplegable al pasar el mouse ========================================================================= */ .mj-has-sub { position: relative; display: inline-block; } /* La flechita ▾ junto a Colecciones */ .mj-has-sub > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s cubic-bezier(.22, 1, .36, 1); opacity: .7; } .mj-has-sub:hover > a::after { transform: translateY(0) rotate(225deg); } /* El panel */ .mj-sub { position: absolute; top: 100%; left: 50%; z-index: 900; display: flex; flex-direction: column; min-width: 230px; padding: 14px 0; margin-top: 18px; background: var(--paper, #FAF7F1); border: 1px solid var(--line, rgba(28, 23, 17, .14)); box-shadow: 0 24px 60px rgba(28, 23, 17, .14); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(10px); transition: opacity .4s cubic-bezier(.22, 1, .36, 1), transform .4s cubic-bezier(.22, 1, .36, 1), visibility .4s, margin-top .4s; } /* Puente invisible: evita que el submenú se cierre al bajar el mouse */ .mj-sub::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; } .mj-has-sub:hover .mj-sub, .mj-has-sub:focus-within .mj-sub { opacity: 1; visibility: visible; pointer-events: auto; margin-top: 0; transform: translateX(-50%) translateY(0); } /* Enlaces del submenú */ .mj-sub a { display: block; padding: 12px 26px; font-family: var(--sans, 'Jost', sans-serif); font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--muted, #6E6353); transition: color .3s, background .3s, padding-left .3s; } .mj-sub a:hover { padding-left: 32px; background: rgba(174, 140, 88, .08); color: var(--espresso, #1C1711); } /* Primer enlace ("Ver todo") con un remate sutil */ .mj-sub a:first-child { margin-bottom: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line, rgba(28, 23, 17, .14)); color: var(--sand-deep, #8F7142); } /* ========================================================================= 2 · MÓVIL · el submenú se aplana dentro del drawer En el drawer no hay hover, así que los sub-enlaces van visibles, indentados bajo "Colecciones". ========================================================================= */ .mj-drawer-sub { padding-left: 24px !important; font-size: .92em !important; opacity: .82; } /* En móvil, si el header se apila, el submenú desktop no debe estorbar: los enlaces ya están en el drawer. */ @media (max-width: 1080px) { .mj-has-sub .mj-sub { display: none; } .mj-has-sub > a::after { display: none; } }