/* danieldomingo.cc — v2 "bento" Fondo casi negro, tarjetas grafito redondeadas, títulos Archivo Black expandida en mayúsculas, etiquetas en naranja de marca (#FF7E00) y azulado (#00A09A), stickers dibujados en código. */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../fonts/archivo-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; } body.dd { --bg: #0b0b0b; --card: #232323; --card-2: #1a1a1a; --card-3: #2e2e2e; --ink: #f5f4f0; --muted: #a6a5a0; --accent: #ff7e00; --accent-2: #ffa24a; --teal: #00a09a; --teal-2: #2fd1c9; --on-accent: #111111; --f: "Archivo", "Helvetica Neue", Arial, sans-serif; --r: 22px; --r-s: 12px; --g: 14px; --wrap: 1320px; --m: clamp(14px, 2.4vw, 32px); --ease: cubic-bezier(.2, .7, .2, 1); --t-xs: 0.8125rem; --t-s: 0.9375rem; --t-b: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --t-l: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --t-h3: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); --t-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); --t-h1: clamp(2.6rem, 1.2rem + 5.4vw, 6.2rem); margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: var(--t-b); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ---------- Neutralizar Elementor ---------- */ body.dd .elementor .e-con { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --min-height: 0; } body.dd .elementor .e-con.e-con-full { --content-width: 100%; } body.dd :where(.elementor-widget) { margin: 0; } body.dd .elementor .elementor-widget:not(:last-child) { margin-block-end: 0; } body.dd .elementor-heading-title, body.dd .elementor-widget-text-editor, body.dd .elementor-button { font-family: var(--f); color: inherit; } body.dd .elementor-heading-title { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; } body.dd .elementor-widget-text-editor p { margin: 0 0 .8em; } body.dd .elementor-widget-text-editor p:last-child { margin-bottom: 0; } body.dd a { color: inherit; } body.dd img { display: block; max-width: 100%; height: auto; } body.dd h1, body.dd h2, body.dd h3, body.dd h4 { margin: 0; } body.dd :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } body.dd ::selection { background: var(--accent); color: var(--on-accent); } /* ---------- Tipografía ---------- */ .dd-display, body.dd .dd-display .elementor-heading-title { font-family: var(--f); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; line-height: .92; } body.dd .dd-h1 { font-size: var(--t-h1); } body.dd .dd-h2 { font-size: var(--t-h2); } body.dd .dd-h3 { font-size: var(--t-h3); } body.dd .dd-kicker { font-weight: 900; font-stretch: 125%; text-transform: uppercase; color: var(--accent); font-size: var(--t-l); letter-spacing: .01em; line-height: 1.1; } .dd-muted { color: var(--muted); } body.dd .dd-lead { font-size: var(--t-l); line-height: 1.4; } .dd-small { font-size: var(--t-s); } /* ---------- Estructura ---------- */ body.dd .e-con.dd-wrap { --display: block; display: block; max-width: var(--wrap); margin: 0 auto !important; padding: var(--g) var(--m) 0 !important; box-sizing: border-box; } body.dd .e-con.dd-bento { --display: grid; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g) !important; grid-auto-flow: dense; } body.dd .e-con.dd-bento + .dd-bento { margin-top: var(--g) !important; } body.dd .e-con.dd-card { --display: flex; display: flex; flex-direction: column; gap: 14px !important; position: relative; background: var(--card); border-radius: var(--r); padding: clamp(20px, 2.2vw, 30px) !important; min-width: 0; transition: transform .35s var(--ease), background-color .35s var(--ease); } body.dd .e-con.dd-card--flat { background: var(--card-2); } body.dd .e-con.dd-card--pic { padding: 0 !important; overflow: hidden; min-height: 360px; } body.dd .e-con.dd-card--accent { background: var(--accent); color: var(--on-accent); } body.dd .e-con.dd-card--teal { background: var(--teal); color: #071514; } body.dd .e-con.dd-card--glow { background: radial-gradient(120% 120% at 0% 100%, #ff7e00 0%, #c4430a 32%, #3a1408 62%, #1c1c1c 100%); } body.dd .e-con.dd-card--link { cursor: pointer; } body.dd .e-con.dd-card--link:hover { transform: translateY(-3px); background-color: var(--card-3); } body.dd .dd-card--accent .dd-kicker, body.dd .dd-card--teal .dd-kicker { color: inherit; } body.dd .dd-card--accent .dd-muted, body.dd .dd-card--teal .dd-muted { color: rgba(17,17,17,.72); } body.dd .dd-push { margin-top: auto !important; } body.dd .dd-card > .elementor-widget, body.dd .dd-card > .elementor-widget > .elementor-widget-container { position: static; } body.dd .dd-card--pic > .elementor-widget.dd-fill { position: absolute; } /* Colocación por columnas (escritorio) */ .dd-c12 { grid-column: span 12; } .dd-c8 { grid-column: span 8; } .dd-c7 { grid-column: span 7; } .dd-c6 { grid-column: span 6; } .dd-c5 { grid-column: span 5; } .dd-c4 { grid-column: span 4; } .dd-c3 { grid-column: span 3; } .dd-c9 { grid-column: span 9; } .dd-c2 { grid-column: span 2; } .dd-r2 { grid-row: span 2; } .dd-r3 { grid-row: span 3; } body.dd .e-con.dd-c2, body.dd .e-con.dd-c12, body.dd .e-con.dd-c9, body.dd .e-con.dd-c8, body.dd .e-con.dd-c7, body.dd .e-con.dd-c6, body.dd .e-con.dd-c5, body.dd .e-con.dd-c4, body.dd .e-con.dd-c3 { width: auto !important; max-width: none !important; } /* ---------- Cabecera ---------- */ .dd-bar { max-width: var(--wrap); margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px var(--m) 2px; } .dd-bar__name { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.05rem; letter-spacing: -0.005em; } .dd-bar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,126,0,.18); animation: dd-pulse 2.4s ease-in-out infinite; } @keyframes dd-pulse { 50% { box-shadow: 0 0 0 7px rgba(255,126,0,0); } } .dd-bar__nav { display: flex; align-items: center; gap: 6px; background: var(--card-2); border-radius: 999px; padding: 6px; } .dd-bar__nav a { text-decoration: none; padding: 9px 16px; border-radius: 999px; font-size: var(--t-s); font-weight: 600; transition: background-color .2s, color .2s; } .dd-bar__nav a:hover { background: var(--card-3); } .dd-bar__nav a.is-on { background: var(--ink); color: #111; } .dd-bar__nav a.dd-bar__cta { background: var(--accent); color: var(--on-accent); } .dd-bar__nav a.dd-bar__cta:hover { background: var(--accent-2); } .dd-bar__menu { display: none; } /* ---------- Pie ---------- */ .dd-foot { max-width: var(--wrap); margin: 0 auto; box-sizing: border-box; padding: var(--g) var(--m) 28px; } .dd-foot__card { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; background: var(--card-2); border-radius: var(--r); padding: 22px 26px; font-size: var(--t-s); color: var(--muted); } .dd-foot__card p { margin: 0; } .dd-foot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; } .dd-foot__links a, .dd-foot__legal a { color: var(--ink); text-decoration: none; } .dd-foot__links a:hover, .dd-foot__legal a:hover { color: var(--accent); } .dd-foot__legal { text-align: right; } /* ---------- Botones y etiquetas ---------- */ body.dd a.dd-btn, body.dd .dd-btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); font: 800 var(--t-s)/1 var(--f); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; transition: transform .18s var(--ease), background-color .18s; } body.dd a.dd-btn:hover, body.dd .dd-btn .elementor-button:hover { background: var(--accent-2); } body.dd a.dd-btn:active, body.dd .dd-btn .elementor-button:active { transform: scale(.97); } body.dd a.dd-btn--ink, body.dd .dd-btn--ink .elementor-button { background: #111; color: #fff; } body.dd a.dd-btn--ink:hover, body.dd .dd-btn--ink .elementor-button:hover { background: #000; } body.dd a.dd-btn--line, body.dd .dd-btn--line .elementor-button { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--card-3); } body.dd a.dd-btn--line:hover, body.dd .dd-btn--line .elementor-button:hover { background: var(--card-3); } .dd-arrow { display: inline-block; transition: transform .2s var(--ease); } a:hover .dd-arrow, .dd-card--link:hover .dd-arrow { transform: translate(3px, -3px); } .dd-pills { display: flex; flex-wrap: wrap; gap: 8px; } .dd-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: var(--t-s); line-height: 1.1; letter-spacing: .01em; text-decoration: none; transition: transform .2s var(--ease); } a.dd-pill:hover { transform: rotate(-1.5deg) scale(1.03); } .dd-pill--teal { background: var(--teal); color: #061413; } .dd-pill--dark { background: var(--card-3); color: var(--ink); } .dd-pill--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--card-3); } .dd-pill--big { font-size: var(--t-l); padding: 10px 18px; border-radius: 12px; } /* Contacto en chips */ .dd-chip { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; } .dd-chip__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--card-3); color: var(--accent); } .dd-chip__ico svg { width: 22px; height: 22px; } .dd-chip__txt { min-width: 0; } .dd-chip__txt b { display: block; font-weight: 600; font-size: var(--t-b); overflow-wrap: anywhere; } .dd-chip__txt span { display: block; color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } /* Listas tipo CV */ .dd-cv { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .dd-cv li { display: grid; gap: 4px; } .dd-cv__role { font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: var(--t-b); line-height: 1.15; letter-spacing: .01em; } .dd-cv__role em { font-style: normal; color: var(--accent); } .dd-cv p { margin: 0; color: var(--muted); } .dd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .dd-list li { display: flex; gap: 10px; align-items: baseline; } .dd-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: translateY(-2px); } /* Cifras */ .dd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); } .dd-stat b { display: block; font-weight: 900; font-stretch: 125%; font-size: var(--t-h2); line-height: .9; letter-spacing: -0.02em; } .dd-stat span { display: block; margin-top: 8px; font-size: var(--t-s); color: var(--muted); } .dd-card--accent .dd-stat span { color: rgba(17,17,17,.72); } /* Software */ .dd-soft { display: grid; grid-template-columns: repeat(2, 48px); gap: 10px; } .dd-soft span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 11px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; transition: transform .25s var(--ease); } .dd-soft span:hover { transform: rotate(-6deg) scale(1.08); } .dd-soft .pr { background: #00005b; color: #9999ff; } .dd-soft .ae { background: #00005b; color: #d291ff; } .dd-soft .ps { background: #001e36; color: #31a8ff; } .dd-soft .lr { background: #001e36; color: #31a8ff; } .dd-soft .dv { background: #1f1f1f; color: #ff7e00; box-shadow: inset 0 0 0 2px #3a3a3a; } .dd-soft .rm { background: #0b0b0b; color: #fff; box-shadow: inset 0 0 0 2px #3a3a3a; font-size: 15px; } .dd-vert { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: var(--t-h3); letter-spacing: .02em; line-height: 1; } .dd-softcard { display: flex !important; flex-direction: row !important; align-items: center; gap: 18px !important; } /* ---------- Fotos y vídeo en tarjetas ---------- */ body.dd .dd-fill, body.dd .dd-fill .elementor-widget-container, body.dd .dd-fill img, body.dd .dd-fill video { width: 100%; height: 100%; } body.dd .dd-fill { flex: 1; min-height: 0; } body.dd .dd-card--pic > .dd-fill { position: absolute; inset: 0; } body.dd .dd-fill img, body.dd .dd-fill video { object-fit: cover; display: block; } body.dd .dd-bw img { filter: grayscale(1) contrast(1.08); transition: filter .6s var(--ease), transform .8s var(--ease); } body.dd .dd-card:hover .dd-bw img { filter: grayscale(0); transform: scale(1.03); } .dd-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 8px; } .dd-mosaic a { display: block; overflow: hidden; border-radius: var(--r-s); aspect-ratio: 4 / 5; background: var(--card-3); } .dd-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .dd-mosaic a:hover img { transform: scale(1.06); } .dd-reelcard { position: relative; height: 100%; min-height: 420px; border-radius: var(--r); overflow: hidden; } .dd-reelcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dd-reelcard__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } /* ---------- Stickers ---------- */ .dd-st { position: absolute; z-index: 5; pointer-events: none; transition: transform .4s var(--ease); } .dd-has-burst .dd-pills { padding-right: 120px; } .dd-card:hover .dd-st { transform: rotate(var(--rot, 0deg)) scale(1.06) !important; } .dd-st--barcode { right: 18px; bottom: -14px; --rot: 4deg; transform: rotate(4deg); background: #fff; color: #111; border-radius: 6px; padding: 7px 9px 5px; box-shadow: 0 6px 18px rgba(0,0,0,.45); } .dd-st--barcode svg { display: block; width: 104px; height: 30px; } .dd-st--barcode small { display: block; margin-top: 3px; font: 800 9px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; text-align: center; } .dd-st--pass { right: 24px; bottom: -16px; --rot: 8deg; transform: rotate(8deg); width: 92px; background: #f5f4f0; color: #111; border-radius: 10px; padding: 10px 10px 8px; box-shadow: 0 8px 20px rgba(0,0,0,.5); text-align: center; } .dd-st--pass::before { content: ""; display: block; width: 22px; height: 5px; margin: -4px auto 7px; border-radius: 3px; background: #b9b8b3; } .dd-st--pass b { display: block; font: 900 15px/1 var(--f); font-stretch: 125%; text-transform: uppercase; } .dd-st--pass span { display: block; margin-top: 4px; font: 700 9px/1.2 var(--f); text-transform: uppercase; letter-spacing: .08em; } .dd-st--pass i { display: block; margin-top: 6px; height: 6px; border-radius: 2px; background: var(--accent); } .dd-st--burst { right: 14px; top: 10px; --rot: -10deg; transform: rotate(-10deg); width: 112px; height: 112px; display: grid; place-items: center; } .dd-st--burst svg { position: absolute; inset: 0; width: 100%; height: 100%; } .dd-st--burst b { position: relative; font: 900 15px/1 var(--f); font-stretch: 125%; text-transform: uppercase; text-align: center; color: #111; } .dd-st--check { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%) rotate(-3deg); --rot: -3deg; z-index: 5; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #111; border-radius: 999px; padding: 7px 14px 7px 16px; font: 900 15px/1 var(--f); font-stretch: 118%; box-shadow: 0 8px 18px rgba(0,0,0,.45); white-space: nowrap; } .dd-st--check svg { width: 18px; height: 18px; } .dd-card:hover .dd-st--check { transform: translateX(-50%) rotate(-3deg) scale(1.06) !important; } .dd-st--rec { left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; background: rgba(11,11,11,.72); color: #fff; border-radius: 8px; padding: 6px 10px; font: 800 12px/1 var(--f); letter-spacing: .1em; } .dd-st--rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: dd-blink 1.2s steps(2) infinite; } @keyframes dd-blink { 50% { opacity: .2; } } .dd-st--wave { position: relative; display: inline-flex; align-items: center; gap: 10px; background: var(--teal); color: #061413; border-radius: 12px; padding: 9px 14px; } .dd-st--wave i { display: inline-block; width: 3px; border-radius: 2px; background: currentColor; animation: dd-wave 1s ease-in-out infinite; } @keyframes dd-wave { 50% { transform: scaleY(.35); } } .dd-st--tape { left: 50%; top: -12px; --rot: -4deg; transform: translateX(-50%) rotate(-4deg); width: 110px; height: 26px; background: rgba(245,244,240,.82); } body.dd .dd-card--accent .dd-peg { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(24px, 3vw, 40px); width: 38%; } body.dd .dd-peg img { width: min(100%, 420px); height: auto; transform: rotate(-4deg); filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)); transition: transform .4s var(--ease); } body.dd .dd-card:hover .dd-peg img { transform: rotate(-1deg) scale(1.03); } /* ---------- Galerías (portfolio) ---------- */ body.dd .dd-gal .gallery { display: block !important; columns: 3 280px; column-gap: 10px; margin: 0 !important; } body.dd .dd-gal .gallery-item { display: block !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 0 10px !important; break-inside: avoid; } body.dd .dd-gal .gallery-item img { width: 100% !important; height: auto !important; border: 0 !important; border-radius: var(--r-s); } body.dd .dd-gal .gallery-icon a { display: block; overflow: hidden; border-radius: var(--r-s); } body.dd .dd-gal .gallery-icon img { transition: transform .6s var(--ease); } body.dd .dd-gal .gallery-icon a:hover img { transform: scale(1.03); } body.dd .dd-gal .gallery-caption { display: none; } /* ---------- Pasos ---------- */ .dd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); counter-reset: s; } .dd-steps li { background: var(--card-2); border-radius: var(--r-s); padding: 18px; counter-increment: s; } .dd-steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #111; font-weight: 900; margin-bottom: 14px; } .dd-steps b { display: block; font-weight: 900; font-stretch: 118%; text-transform: uppercase; margin-bottom: 6px; } .dd-steps p { margin: 0; color: var(--muted); font-size: var(--t-s); } /* ---------- Productos ---------- */ .dd-prodpic { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-s); overflow: hidden; background: var(--card-3); } .dd-prodpic img { width: 100%; height: 100%; object-fit: cover; } .dd-prodpic--split img { clip-path: inset(0 0 0 50%); position: absolute; inset: 0; } .dd-prodpic--split img:first-child { clip-path: none; filter: saturate(.25) brightness(.92) contrast(.9); } .dd-prodpic--split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; } .dd-prodpic small { position: absolute; z-index: 2; bottom: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(11,11,11,.75); color: #fff; font: 800 11px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; } .dd-prodpic small { left: 10px; right: auto; } .dd-prodpic video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Texto legal y WooCommerce */ body.dd .dd-legal h2 { font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: var(--t-l); margin: 28px 0 10px; } body.dd .dd-legal h2:first-child { margin-top: 0; } body.dd .dd-legal p { max-width: 70ch; color: #dcdbd6; } .dd-main { max-width: var(--wrap); margin: 0 auto; padding: var(--g) var(--m); box-sizing: border-box; } .dd-main .site-main, .dd-main .page-content { background: var(--card); border-radius: var(--r); padding: clamp(20px, 3vw, 40px); } body.dd .woocommerce a.button, body.dd .woocommerce button.button { background: var(--accent); color: #111; border-radius: 999px; } body.dd .e-con.dd-products:not(:has(li.product)) { display: none; } body.dd .dd-products ul.products li.product { background: var(--card); border-radius: var(--r); padding: 16px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { body.dd .e-con.dd-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .dd-c12, .dd-c9, .dd-c8, .dd-c7 { grid-column: span 6; } .dd-c6, .dd-c5, .dd-c4, .dd-c3 { grid-column: span 3; } .dd-t6 { grid-column: span 6; } .dd-c2 { grid-column: span 3; } .dd-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { body.dd { --r: 18px; --g: 10px; } body.dd .e-con.dd-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-c12, .dd-c9, .dd-c8, .dd-c7, .dd-c6, .dd-c5, .dd-c4, .dd-t6 { grid-column: span 2; } .dd-c3, .dd-c2 { grid-column: span 2; } .dd-m1 { grid-column: span 1 !important; } .dd-m2 { grid-column: span 2 !important; } .dd-r2, .dd-r3 { grid-row: auto; } .dd-bar { padding-top: 12px; } .dd-bar__nav { position: absolute; right: var(--m); top: 58px; z-index: 60; flex-direction: column; align-items: stretch; padding: 8px; border-radius: 18px; min-width: 200px; box-shadow: 0 18px 40px rgba(0,0,0,.6); display: none; } .dd-bar.is-open .dd-bar__nav { display: flex; } .dd-bar { position: relative; } .dd-bar__menu { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--card-2); color: var(--ink); border-radius: 999px; padding: 10px 16px; font: 700 var(--t-s)/1 var(--f); } .dd-foot__card { grid-template-columns: 1fr; text-align: left; } .dd-foot__links { justify-content: flex-start; } .dd-foot__legal { text-align: left; } .dd-mosaic { grid-template-columns: repeat(2, 1fr); } .dd-stats { grid-template-columns: 1fr; gap: 16px; } .dd-steps { grid-template-columns: 1fr; } .dd-reelcard { min-height: 520px; } .dd-st--pass { right: 14px; } body.dd .e-con.dd-card:has(.dd-st--pass) { padding-bottom: 54px !important; } .dd-st--barcode { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: 4px 4px -8px 0; } .dd-st--burst { width: 84px; height: 84px; right: 10px; top: 8px; } .dd-st--burst b { font-size: 12px; } .dd-has-burst .dd-pills { padding-right: 0; } body.dd .e-con.dd-has-burst > .elementor-widget:first-child { padding-right: 90px; } .dd-mfirst { order: -1; } body.dd .e-con.dd-card--pic { min-height: 440px; } body.dd .dd-hide-m { display: none !important; } } /* ============================================================ MOVIMIENTO ============================================================ */ .dd-js [data-in] { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); } .dd-js [data-in].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .dd-js [data-in] { opacity: 1; transform: none; transition: none; } .dd-bar__dot, .dd-st--rec::before, .dd-st--wave i { animation: none; } .dd-card:hover .dd-st, body.dd .e-con.dd-card--link:hover { transform: none !important; } } /* ============================================================ v2.1 — interacción: tarjetas sociales, servicios, clientes holográficos, vídeos ============================================================ */ /* Inclinación 3D: .dd-tilt (JS pone --rx/--ry al mover el ratón) */ body.dd .dd-tilt { transform-style: preserve-3d; will-change: transform; } body.dd .e-con.dd-card.dd-tilt:hover, body.dd .dd-tilt.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--rz, -1.2deg)) scale(1.03); } /* Tarjetas de redes */ body.dd .e-con.dd-social { overflow: hidden; isolation: isolate; min-height: 150px; justify-content: space-between; } body.dd .dd-social::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s var(--ease); } body.dd .dd-social--ig::before { background: linear-gradient(135deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%); } body.dd .dd-social--tt::before { background: linear-gradient(135deg, #25f4ee 0%, #0b0b0b 48%, #0b0b0b 52%, #fe2c55 100%); } body.dd .dd-social:hover::before { opacity: 1; } .dd-soc { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; height: 100%; text-decoration: none; color: var(--ink); } .dd-soc__top { display: flex; justify-content: space-between; align-items: center; } .dd-soc__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--card-3); color: var(--accent); transition: background-color .3s, color .3s, transform .4s var(--ease); } .dd-soc__ico svg { width: 26px; height: 26px; } .dd-social:hover .dd-soc__ico { background: rgba(255,255,255,.22); color: #fff; transform: rotate(-8deg) scale(1.08); } .dd-soc__arrow { font-size: 1.5rem; transition: transform .3s var(--ease); } .dd-social:hover .dd-soc__arrow { transform: translate(4px, -4px); } .dd-soc b { display: block; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: var(--t-h3); line-height: 1; } .dd-soc span.dd-soc__h { display: block; margin-top: 6px; color: var(--muted); font-weight: 600; transition: color .3s; } .dd-social:hover .dd-soc span.dd-soc__h { color: #fff; } /* Servicios: cada etiqueta reacciona */ .dd-pills--fx .dd-pill { cursor: default; transition: transform .25s var(--ease), background-color .2s, color .2s, box-shadow .2s; } .dd-pills--fx .dd-pill:nth-child(odd):hover { transform: rotate(-4deg) scale(1.08); } .dd-pills--fx .dd-pill:nth-child(even):hover { transform: rotate(3deg) scale(1.08); } .dd-pills--fx .dd-pill:hover { background: #fff; color: #111; box-shadow: 0 10px 22px rgba(0,0,0,.35); } /* Clientes: pegatinas holográficas */ .dd-holo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; } .dd-holo a { --hx: 50%; --hy: 50%; position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 16px 18px; border-radius: 18px; background: linear-gradient(125deg, #ffc8e4 0%, #c6e8ff 17%, #d8ffcd 33%, #fff3b5 50%, #e2ccff 67%, #c6fff4 83%, #ffc8e4 100%); background-size: 260% 260%; background-position: var(--hx) var(--hy); box-shadow: 0 0 0 5px #f4f3ef, 0 10px 24px rgba(0,0,0,.45); transform: rotate(var(--r, 0deg)); transition: transform .35s var(--ease), background-position .2s linear; overflow: hidden; isolation: isolate; } .dd-holo a::after { content: ""; position: absolute; inset: -40%; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 48%, rgba(255,255,255,0) 58%); transform: translateX(calc((var(--hx) - 50%) * 1.6)); mix-blend-mode: soft-light; opacity: .7; } .dd-holo a:nth-child(3n+1) { --r: -2.5deg; } .dd-holo a:nth-child(3n+2) { --r: 1.8deg; } .dd-holo a:nth-child(3n) { --r: -.8deg; } .dd-holo a:hover, .dd-holo a.is-tilting { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(0deg) scale(1.07); z-index: 3; } .dd-holo img { position: relative; z-index: 1; max-width: 86%; max-height: 74%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; filter: contrast(1.15) brightness(.9); } .dd-holo small { position: absolute; z-index: 3; left: 10px; bottom: 7px; font: 800 9px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: rgba(17,17,17,.55); } /* Vídeos */ .dd-vids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .dd-vids > :first-child { grid-column: 1 / -1; } .dd-vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--r-s); overflow: hidden; cursor: pointer; background: var(--card-3) center / cover no-repeat; color: #fff; text-align: left; text-decoration: none; font-family: var(--f); } .dd-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .dd-vid:hover img { transform: scale(1.05); } .dd-vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%); } .dd-vid__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transition: transform .25s var(--ease); } .dd-vid__play::before { content: ""; margin-left: 4px; border-left: 16px solid #111; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .dd-vid:hover .dd-vid__play { transform: scale(1.12); } .dd-vid__t { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 10px; font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: var(--t-s); line-height: 1.1; } .dd-vid__t small { display: block; margin-bottom: 3px; font-size: 11px; color: var(--accent); letter-spacing: .06em; } .dd-vids > :not(:first-child) .dd-vid__play { width: 34px; height: 34px; margin: -17px 0 0 -17px; } .dd-vids > :not(:first-child) .dd-vid__play::before { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; margin-left: 3px; } .dd-vids > :not(:first-child) .dd-vid__t { font-size: 10px; left: 8px; right: 8px; bottom: 6px; } .dd-vids > :not(:first-child) .dd-vid__t small { display: none; } .dd-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .dd-vids--grid { grid-template-columns: repeat(3, 1fr); } .dd-vids--grid > :first-child { grid-column: auto; } .dd-vids--grid .dd-vid__t, .dd-vids--grid > :not(:first-child) .dd-vid__t { font-size: var(--t-s); left: 12px; right: 12px; bottom: 10px; } .dd-vids--grid > :not(:first-child) .dd-vid__t small { display: block; } .dd-vids--grid > :not(:first-child) .dd-vid__play { width: 54px; height: 54px; margin: -27px 0 0 -27px; } .dd-mosaic--5 { grid-template-columns: repeat(5, 1fr); } .dd-mosaic a { position: relative; } .dd-mosaic a span { position: absolute; left: 8px; bottom: 8px; z-index: 2; background: rgba(11,11,11,.75); color: #fff; border-radius: 6px; padding: 4px 7px; font: 800 10px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; } @media (max-width: 680px) { .dd-vids, .dd-vids--grid { grid-template-columns: 1fr 1fr; } .dd-mosaic--5 { grid-template-columns: repeat(2, 1fr); } .dd-mosaic--5 a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .dd-holo { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (prefers-reduced-motion: reduce) { body.dd .e-con.dd-card.dd-tilt:hover, .dd-holo a:hover, .dd-pills--fx .dd-pill:hover { transform: none !important; } } /* Altura real del contenido dentro de las tarjetas (Elementor fuerza height:100%) */ body.dd .dd-card > .elementor-widget:not(.dd-fill) > .elementor-widget-container { height: auto; } body.dd .dd-card > .elementor-widget:not(.dd-fill) { flex-shrink: 0; } /* Mosaico del portfolio en portada: dos grandes y tres pequeñas */ .dd-mosaic--5 { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; } .dd-mosaic--5 a:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 4 / 3; } .dd-mosaic--5 a:nth-child(n+3) { grid-column: span 2; aspect-ratio: 1; } @media (max-width: 680px) { .dd-mosaic--5 { grid-template-columns: repeat(6, 1fr); } .dd-mosaic--5 a:first-child { grid-column: span 3; aspect-ratio: 4 / 3; } } /* Pegatinas de clientes sin texto encima del logo */ .dd-holo small { display: none; } /* Proporción 16:9 de los vídeos por padding (aspect-ratio en