{"id":380,"date":"2026-06-08T18:29:53","date_gmt":"2026-06-08T18:29:53","guid":{"rendered":"https:\/\/erguezhacha.estaciondiseno.es\/?page_id=380"},"modified":"2026-06-13T16:18:54","modified_gmt":"2026-06-13T16:18:54","slug":"elementor-380","status":"publish","type":"page","link":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/elementor-380\/","title":{"rendered":"Conhache.design Portfolio"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\r\n\r\n\r\n \r\n \r\n conhache.design \u2014 Dise\u00f1o Visual con Car\u00e1cter<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n :root {\r\n --black: #0a0a0a;\r\n --off-white: #f5f0eb;\r\n --white: #ffffff;\r\n --red: #e8000d;\r\n --red-dim: #e8000d22;\r\n --red-dark: #9b0009;\r\n --gray: #1c1c1c;\r\n --mid: #2e2e2e;\r\n --muted: #666666;\r\n --muted-light:#999999;\r\n --font-title: 'Oswald', sans-serif;\r\n --font-body: 'Poppins', sans-serif;\r\n --pad: 1.4rem;\r\n --ease: all 0.3s ease;\r\n }\r\n .ch-portfolio-wrapper *,\r\n .ch-portfolio-wrapper *::before,\r\n .ch-portfolio-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n .ch-portfolio-wrapper {\r\n background: var(--black) !important;\r\n color: #ffffff !important;\r\n font-family: var(--font-body) !important;\r\n font-size: 15px !important;\r\n line-height: 1.6 !important;\r\n overflow-x: hidden !important;\r\n width: 100%;\r\n position: relative;\r\n }\r\n .ch-portfolio-wrapper img { display: block; width: 100%; height: auto; }\r\n .ch-portfolio-wrapper a,\r\n .ch-portfolio-wrapper a:link,\r\n .ch-portfolio-wrapper a:visited,\r\n .ch-portfolio-wrapper a:hover,\r\n .ch-portfolio-wrapper a:active,\r\n .ch-portfolio-wrapper a:focus {\r\n text-decoration: none !important;\r\n color: inherit !important;\r\n outline: none !important;\r\n }\r\n ::-webkit-scrollbar { width: 3px; }\r\n ::-webkit-scrollbar-track { background: var(--black); }\r\n ::-webkit-scrollbar-thumb { background: var(--red); }\r\n\r\n \/* NAV *\/\r\n .site-nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 200;\r\n background: rgba(10,10,10,0.92);\r\n backdrop-filter: blur(10px);\r\n border-bottom: 1px solid var(--gray);\r\n }\r\n .nav-top {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0.9rem var(--pad);\r\n }\r\n .nav-brand {\r\n font-family: var(--font-title); font-size: 1rem; font-weight: 700;\r\n letter-spacing: 0.04em; color: #ffffff !important; flex-shrink: 0;\r\n }\r\n .nav-brand span { color: #e8000d !important; }\r\n .nav-toggle {\r\n display: flex; flex-direction: column; gap: 5px;\r\n cursor: pointer; padding: 4px; background: none; border: none;\r\n }\r\n .nav-toggle span {\r\n display: block; width: 22px; height: 2px;\r\n background: #ffffff !important; transition: var(--ease); transform-origin: center;\r\n }\r\n .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }\r\n .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n .nav-menu {\r\n max-height: 0; overflow: hidden;\r\n transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);\r\n border-top: 1px solid transparent;\r\n }\r\n .nav-menu.open { max-height: 400px; border-top-color: var(--gray); }\r\n .nav-links { display: flex; flex-direction: column; padding: 0.6rem 0 1rem; }\r\n .nav-link {\r\n position: relative; display: flex; align-items: center; gap: 0.8rem;\r\n padding: 0.85rem var(--pad);\r\n font-family: var(--font-title); font-size: 1.05rem; font-weight: 700;\r\n letter-spacing: 0.08em; text-transform: uppercase;\r\n color: #ffffff !important; overflow: hidden; transition: color 0.25s;\r\n }\r\n .nav-link::before {\r\n content: ''; position: absolute; inset: 0; background: var(--red);\r\n transform: translateX(-100%);\r\n transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); z-index: 0;\r\n }\r\n .nav-link.active::before, .nav-link:hover::before { transform: translateX(0); }\r\n .nav-link.active, .nav-link:hover { color: #ffffff !important; }\r\n .nav-link-num {\r\n font-size: 0.6rem; color: #e8000d !important;\r\n font-family: var(--font-body); font-weight: 600; letter-spacing: 0.14em;\r\n position: relative; z-index: 1; transition: color 0.25s;\r\n }\r\n .nav-link:hover .nav-link-num,\r\n .nav-link.active .nav-link-num { color: rgba(255,255,255,0.6) !important; }\r\n .nav-link-text { position: relative; z-index: 1; color: inherit !important; }\r\n .nav-link-arrow {\r\n margin-left: auto; position: relative; z-index: 1;\r\n font-size: 0.75rem; color: inherit !important;\r\n opacity: 0; transform: translateX(-6px);\r\n transition: opacity 0.25s, transform 0.25s;\r\n }\r\n .nav-link:hover .nav-link-arrow,\r\n .nav-link.active .nav-link-arrow { opacity: 1; transform: translateX(0); }\r\n @media (min-width: 768px) {\r\n .nav-toggle { display: none; }\r\n .nav-menu { max-height: none !important; overflow: visible; border-top: none !important; }\r\n .nav-top { padding-bottom: 0; }\r\n .nav-links { flex-direction: row; padding: 0; border-top: none; gap: 0; }\r\n .nav-link { padding: 0.9rem 1.2rem; font-size: 0.75rem; border-left: 1px solid var(--gray); }\r\n .nav-link:first-child { border-left: none; }\r\n .site-nav { display: flex; align-items: stretch; }\r\n .nav-top { flex: 0 0 auto; }\r\n .nav-menu { flex: 1; display: flex; align-items: stretch; }\r\n .nav-links { width: 100%; justify-content: flex-end; }\r\n }\r\n\r\n \/* PAGE TRANSITION *\/\r\n .page-transition {\r\n position: fixed; inset: 0; background: var(--red); z-index: 1000;\r\n transform: scaleY(0); transform-origin: bottom; pointer-events: none;\r\n }\r\n .page-transition.run { animation: wipe 0.7s cubic-bezier(0.76,0,0.24,1) forwards; }\r\n @keyframes wipe {\r\n 0% { transform: scaleY(0); transform-origin: bottom; }\r\n 45% { transform: scaleY(1); transform-origin: bottom; }\r\n 55% { transform: scaleY(1); transform-origin: top; }\r\n 100% { transform: scaleY(0); transform-origin: top; }\r\n }\r\n\r\n \/* HERO *\/\r\n .hero {\r\n min-height: 100svh; display: flex; flex-direction: column;\r\n justify-content: flex-end; padding: 8rem var(--pad) 3.5rem;\r\n position: relative; overflow: hidden;\r\n }\r\n .hero::before {\r\n content: ''; position: absolute; inset: 0;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n background-size: 180px; pointer-events: none; z-index: 0;\r\n }\r\n .hero::after {\r\n content: ''; position: absolute; top: -140px; right: -110px;\r\n width: 420px; height: 420px; border-radius: 50%;\r\n border: 1.5px solid var(--red); opacity: 0.12; pointer-events: none; z-index: 0;\r\n }\r\n .hero-inner { position: relative; z-index: 1; }\r\n .hero-eyebrow {\r\n display: inline-flex; align-items: center; gap: 0.5rem;\r\n font-size: 0.68rem; letter-spacing: 0.2em; color: #e8000d !important;\r\n text-transform: uppercase; font-weight: 600; margin-bottom: 1.2rem;\r\n }\r\n .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--red); }\r\n .hero-title {\r\n font-family: var(--font-title); font-size: clamp(2.8rem, 12vw, 5rem);\r\n font-weight: 700; line-height: 0.93; text-transform: uppercase;\r\n letter-spacing: -0.01em; margin-bottom: 1.6rem; color: #ffffff !important;\r\n }\r\n .hero-title .line-accent { color: #e8000d !important; display: block; }\r\n .hero-title .circled { position: relative; display: inline-block; }\r\n .hero-title .circled::after {\r\n content: ''; position: absolute; inset: -6px -10px;\r\n border: 2px solid var(--red);\r\n border-radius: 55% 45% 50% 60% \/ 40% 55% 45% 60%;\r\n opacity: 0.7; transform: rotate(-1.5deg);\r\n }\r\n .hero-sub {\r\n font-size: 0.88rem; color: #aaaaaa !important;\r\n max-width: 320px; margin-bottom: 2.2rem; font-weight: 300;\r\n }\r\n .hero-cta {\r\n display: inline-block; padding: 0.85rem 2rem;\r\n background: var(--red); color: #ffffff !important;\r\n font-family: var(--font-title); font-weight: 700; font-size: 0.85rem;\r\n letter-spacing: 0.12em; text-transform: uppercase;\r\n border: 2px solid var(--red); transition: var(--ease);\r\n position: relative; overflow: hidden;\r\n }\r\n .hero-cta::after {\r\n content: ''; position: absolute; inset: 0; background: var(--off-white);\r\n transform: translateX(-101%); transition: transform 0.3s ease;\r\n }\r\n .hero-cta:hover { color: #0a0a0a !important; border-color: var(--off-white); }\r\n .hero-cta:hover::after { transform: translateX(0); }\r\n .hero-cta span { position: relative; z-index: 1; color: inherit !important; }\r\n .scroll-hint { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; margin-top: 3rem; }\r\n .scroll-hint span { font-size: 0.62rem; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; }\r\n .scroll-line {\r\n width: 1px; height: 40px;\r\n background: linear-gradient(to bottom, var(--red), transparent);\r\n margin-left: 2px; animation: scroll-anim 2s ease-in-out infinite;\r\n }\r\n @keyframes scroll-anim {\r\n 0%, 100% { opacity:1; transform:scaleY(1); transform-origin:top; }\r\n 50% { opacity:0.3; transform:scaleY(0.5); transform-origin:top; }\r\n }\r\n\r\n \/* SECTION COMMONS *\/\r\n .ch-portfolio-wrapper section { padding: 4rem var(--pad); }\r\n .section-label {\r\n display: inline-flex; align-items: center; gap: 0.5rem;\r\n font-size: 0.62rem; letter-spacing: 0.24em;\r\n color: var(--red); text-transform: uppercase; font-weight: 600; margin-bottom: 1.4rem;\r\n }\r\n .section-label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--red); }\r\n\r\n \/* WORK *\/\r\n #work { padding-top: 2rem; }\r\n .work-heading {\r\n font-family: var(--font-title); font-size: clamp(2rem, 9vw, 3.2rem);\r\n font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;\r\n margin-bottom: 2.8rem; line-height: 1; color: #ffffff !important;\r\n }\r\n .work-heading .num {\r\n display: block; font-size: 0.68rem; color: #666666 !important;\r\n letter-spacing: 0.2em; font-family: var(--font-body);\r\n font-weight: 400; margin-bottom: 0.4rem;\r\n }\r\n \/* Grid responsive *\/\r\n .project-list { display: grid; grid-template-columns: 1fr; gap: 2rem; }\r\n @media (min-width: 600px) { .project-list { grid-template-columns: 1fr 1fr; } }\r\n @media (min-width: 900px) { .project-list { grid-template-columns: 1fr 1fr 1fr; } }\r\n\r\n .project-card {\r\n position: relative; overflow: hidden; cursor: pointer;\r\n border: 1px solid var(--gray);\r\n display: flex; flex-direction: column;\r\n color: #ffffff !important; transition: border-color 0.3s ease;\r\n }\r\n .project-card:hover { border-color: var(--red); }\r\n \/* Imagen uniforme *\/\r\n .project-img {\r\n width: 100%; aspect-ratio: 4\/3; overflow: hidden;\r\n position: relative; background: var(--gray); flex-shrink: 0; cursor: zoom-in;\r\n }\r\n .project-img img {\r\n width: 100%; height: 100%; object-fit: cover; object-position: center top;\r\n transition: transform 0.55s ease; display: block;\r\n }\r\n .project-card:hover .project-img img { transform: scale(1.04); }\r\n .project-img::after {\r\n content: ''; position: absolute; inset: 0; background: var(--red);\r\n opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: multiply;\r\n pointer-events: none; z-index: 5;\r\n }\r\n .project-card:hover .project-img::after { opacity: 0.08; }\r\n \/* Bot\u00f3n \"Ver proyecto\" siempre visible *\/\r\n .project-view-btn {\r\n display: block; width: 100%; padding: 0.7rem var(--pad);\r\n background: var(--red); color: var(--white) !important;\r\n font-family: var(--font-title); font-size: 0.75rem; font-weight: 700;\r\n letter-spacing: 0.12em; text-transform: uppercase; text-align: center;\r\n cursor: pointer; border: none; transition: background 0.25s ease;\r\n }\r\n .project-view-btn:hover { background: var(--red-dark); }\r\n .project-info {\r\n padding: 1rem var(--pad) 0.8rem;\r\n display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;\r\n }\r\n .project-tag {\r\n font-size: 0.6rem; letter-spacing: 0.2em; color: #e8000d !important;\r\n text-transform: uppercase; font-weight: 600; margin-bottom: 0.3rem;\r\n }\r\n .project-name {\r\n font-family: var(--font-title); font-size: 1.05rem; font-weight: 700;\r\n text-transform: uppercase; letter-spacing: 0.02em; color: #ffffff !important;\r\n }\r\n .project-year {\r\n font-size: 0.68rem; color: #666666 !important;\r\n align-self: flex-end; padding-bottom: 0.15rem; white-space: nowrap;\r\n }\r\n\r\n \/* LIGHTBOX *\/\r\n .ch-lightbox-overlay {\r\n display: none; position: fixed; inset: 0;\r\n background: rgba(0,0,0,0.93); z-index: 9999;\r\n align-items: center; justify-content: center; padding: 1rem;\r\n }\r\n .ch-lightbox-overlay.active { display: flex; }\r\n .ch-lightbox-inner {\r\n position: relative; max-width: 90vw; max-height: 90vh;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .ch-lightbox-img { max-width: 80vw; max-height: 80vh; object-fit: contain; border: 1px solid var(--gray); display: block; }\r\n .ch-lightbox-close {\r\n position: fixed; top: 1.2rem; right: 1.4rem;\r\n background: var(--red); color: #fff; border: none;\r\n width: 38px; height: 38px; border-radius: 50%;\r\n font-size: 1.1rem; cursor: pointer;\r\n display: flex; align-items: center; justify-content: center;\r\n z-index: 10000; transition: var(--ease);\r\n }\r\n .ch-lightbox-close:hover { background: var(--red-dark); transform: scale(1.1); }\r\n .ch-lightbox-prev, .ch-lightbox-next {\r\n position: fixed; top: 50%; transform: translateY(-50%);\r\n background: rgba(232,0,13,0.85); color: #fff; border: none;\r\n width: 44px; height: 44px; border-radius: 50%;\r\n font-size: 1.3rem; cursor: pointer;\r\n display: flex; align-items: center; justify-content: center;\r\n z-index: 10000; transition: var(--ease);\r\n }\r\n .ch-lightbox-prev { left: 1rem; }\r\n .ch-lightbox-next { right: 1rem; }\r\n .ch-lightbox-prev:hover,\r\n .ch-lightbox-next:hover { background: var(--red-dark); transform: translateY(-50%) scale(1.1); }\r\n .ch-lightbox-counter {\r\n position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);\r\n font-size: 0.7rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.5);\r\n font-family: var(--font-body); z-index: 10000;\r\n }\r\n .ch-lightbox-overlay[data-total=\"1\"] .ch-lightbox-prev,\r\n .ch-lightbox-overlay[data-total=\"1\"] .ch-lightbox-next { display: none; }\r\n\r\n \/* TICKER *\/\r\n .process-strip { background: var(--red); padding: 0.9rem 0; overflow: hidden; }\r\n .ticker-track {\r\n display: flex; gap: 2.5rem; width: max-content;\r\n animation: ticker 20s linear infinite;\r\n }\r\n .ticker-track span {\r\n font-family: var(--font-title); font-size: 0.72rem; font-weight: 700;\r\n letter-spacing: 0.15em; text-transform: uppercase;\r\n color: #ffffff !important; white-space: nowrap;\r\n }\r\n .ticker-track span.dot::before { content: '\u2726'; margin-right: 2.5rem; }\r\n @keyframes ticker {\r\n from { transform: translateX(0); }\r\n to { transform: translateX(-50%); }\r\n }\r\n\r\n \/* ABOUT *\/\r\n #about { background: var(--off-white) !important; color: var(--black) !important; }\r\n #about .section-label { color: var(--red) !important; }\r\n #about .section-label::before { background: var(--red); }\r\n .about-top {\r\n display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem;\r\n }\r\n .about-big {\r\n font-family: var(--font-title); font-size: clamp(3.5rem, 18vw, 6rem);\r\n font-weight: 700; text-transform: uppercase; line-height: 0.85; color: var(--black) !important;\r\n }\r\n .about-arrow { flex-shrink: 0; width: 52px; margin-bottom: 0.5rem; }\r\n .about-arrow svg { width: 100%; height: auto; }\r\n \/* Layout contenido about *\/\r\n .about-content { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }\r\n @media (min-width: 600px) {\r\n .about-content { flex-direction: row; align-items: center; gap: 3rem; }\r\n }\r\n .about-text { flex: 1; }\r\n .about-body {\r\n font-size: 0.92rem; line-height: 1.78; color: #1a1a1a !important;\r\n font-weight: 300; margin-bottom: 2rem;\r\n }\r\n .about-body strong { font-weight: 600; color: #000000 !important; }\r\n .about-body em {\r\n font-style: normal; display: inline-block;\r\n border-bottom: 1.5px solid var(--red); color: #e8000d !important;\r\n }\r\n \/* Foto circular *\/\r\n .about-photo {\r\n flex-shrink: 0; width: 180px; height: 180px;\r\n border-radius: 50%; overflow: hidden;\r\n border: 3px solid var(--red); background: #ddd; align-self: center;\r\n }\r\n @media (min-width: 600px) { .about-photo { width: 220px; height: 220px; } }\r\n .about-photo img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n object-position: center; border-radius: 50%;\r\n }\r\n .about-photo-placeholder {\r\n width: 100%; height: 100%;\r\n display: flex; align-items: center; justify-content: center;\r\n background: #e0d8d0; color: #999; font-size: 0.65rem;\r\n letter-spacing: 0.1em; text-transform: uppercase;\r\n text-align: center; padding: 1rem; line-height: 1.4;\r\n }\r\n .about-stats {\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 1px; background: #ddd; border: 1px solid #ddd; margin-top: 2.5rem;\r\n }\r\n .stat-cell { background: var(--off-white); padding: 1.1rem 1rem; }\r\n .stat-num {\r\n font-family: var(--font-title); font-size: 2rem; font-weight: 700;\r\n color: var(--black) !important; line-height: 1; margin-bottom: 0.2rem;\r\n }\r\n .stat-num sup { font-size: 0.9rem; }\r\n .stat-label { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #777; }\r\n\r\n \/* SERVICES *\/\r\n #services { background: var(--black); }\r\n .services-heading {\r\n font-family: var(--font-title); font-size: clamp(1.9rem, 8vw, 3rem);\r\n font-weight: 700; text-transform: uppercase; margin-bottom: 0.6rem; line-height: 1; color: #ffffff !important;\r\n }\r\n .services-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 2.5rem; }\r\n .accordion-list { display: flex; flex-direction: column; }\r\n details { border-top: 1px solid var(--gray); }\r\n details:last-child { border-bottom: 1px solid var(--gray); }\r\n summary {\r\n list-style: none; display: flex; align-items: center;\r\n justify-content: space-between; padding: 1.3rem 0; cursor: pointer;\r\n user-select: none; gap: 1rem; transition: var(--ease);\r\n }\r\n summary::-webkit-details-marker { display: none; }\r\n .summary-inner { display: flex; align-items: center; gap: 1rem; }\r\n .sum-index { font-size: 0.6rem; color: var(--red); font-weight: 600; letter-spacing: 0.1em; min-width: 22px; }\r\n .sum-title {\r\n font-family: var(--font-title); font-size: 1.15rem; font-weight: 700;\r\n text-transform: uppercase; letter-spacing: 0.03em; color: var(--white) !important; transition: color 0.25s;\r\n }\r\n .sum-icon {\r\n width: 28px; height: 28px; border: 1.5px solid var(--gray); border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0; font-size: 0.9rem; color: var(--red); transition: var(--ease);\r\n }\r\n details[open] .sum-icon { transform: rotate(45deg); background: var(--red); color: var(--white); border-color: var(--red); }\r\n details[open] .sum-title { color: var(--red) !important; }\r\n .accordion-body { padding: 0 0 1.8rem 2.4rem; }\r\n .accordion-body p { font-size: 0.85rem; color: #999 !important; font-weight: 300; line-height: 1.7; margin-bottom: 1rem; }\r\n .service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }\r\n .s-tag {\r\n font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;\r\n padding: 0.3rem 0.7rem; border: 1px solid var(--gray); color: var(--muted);\r\n border-radius: 2px; transition: var(--ease);\r\n }\r\n details[open] .s-tag:hover { border-color: var(--red); color: var(--red); }\r\n\r\n \/* SKILLS *\/\r\n #skills { background: var(--gray); }\r\n .skills-heading {\r\n font-family: var(--font-title); font-size: clamp(1.9rem, 8vw, 3rem);\r\n font-weight: 700; text-transform: uppercase; margin-bottom: 0.6rem; line-height: 1; color: #ffffff !important;\r\n }\r\n .skills-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 2.5rem; }\r\n .skills-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 0.8rem;\r\n }\r\n @media (min-width: 480px) { .skills-grid { grid-template-columns: repeat(3, 1fr); } }\r\n @media (min-width: 768px) { .skills-grid { grid-template-columns: repeat(4, 1fr); } }\r\n .skill-item {\r\n display: flex; flex-direction: column; align-items: flex-start;\r\n gap: 0.55rem; padding: 1.1rem 1rem;\r\n border: 1px solid #2e2e2e; background: var(--black);\r\n transition: var(--ease); position: relative; overflow: hidden;\r\n }\r\n .skill-item::before {\r\n content: ''; position: absolute; bottom: 0; left: 0;\r\n width: 0; height: 2px; background: var(--red);\r\n transition: width 0.35s ease;\r\n }\r\n .skill-item:hover { border-color: var(--red); }\r\n .skill-item:hover::before { width: 100%; }\r\n .skill-cat {\r\n font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase;\r\n color: var(--red); font-weight: 600;\r\n }\r\n .skill-name {\r\n font-family: var(--font-title); font-size: 0.95rem; font-weight: 700;\r\n text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff !important;\r\n line-height: 1.1;\r\n }\r\n\r\n \/* CONTACT \/ FOOTER *\/\r\n #contact { background: var(--black); padding: 4rem var(--pad) 2.5rem; border-top: 1px solid var(--gray); }\r\n .contact-eyebrow { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 1rem; }\r\n .contact-heading {\r\n font-family: var(--font-title); font-size: clamp(2.5rem, 13vw, 5rem);\r\n font-weight: 700; text-transform: uppercase; line-height: 0.95;\r\n margin-bottom: 1.6rem; color: #ffffff !important;\r\n }\r\n .contact-heading .qmark { color: var(--red); }\r\n .contact-sub { font-size: 0.88rem; color: var(--muted); font-weight: 300; margin-bottom: 2.5rem; max-width: 300px; line-height: 1.65; }\r\n .contact-cta {\r\n display: inline-block; padding: 1rem 2.2rem;\r\n border: 1.5px solid var(--red); color: var(--red) !important;\r\n font-family: var(--font-title); font-weight: 700; font-size: 0.85rem;\r\n letter-spacing: 0.12em; text-transform: uppercase; transition: var(--ease);\r\n background: transparent; margin-bottom: 3rem; position: relative; overflow: hidden;\r\n }\r\n .contact-cta::after {\r\n content: ''; position: absolute; inset: 0; background: var(--red);\r\n transform: translateX(-101%); transition: transform 0.3s ease; z-index: 0;\r\n }\r\n .contact-cta:hover { color: var(--white) !important; }\r\n .contact-cta:hover::after { transform: translateX(0); }\r\n .contact-cta span { position: relative; z-index: 1; }\r\n \/* Botones sociales con logo *\/\r\n .social-row {\r\n display: flex; align-items: stretch;\r\n border-top: 1px solid var(--gray); border-bottom: 1px solid var(--gray);\r\n margin-bottom: 2.5rem;\r\n }\r\n .social-link {\r\n flex: 1; padding: 1rem 0.5rem;\r\n display: flex; align-items: center; justify-content: center; gap: 0.55rem;\r\n font-family: var(--font-title); font-size: 0.72rem; font-weight: 700;\r\n letter-spacing: 0.1em; text-transform: uppercase;\r\n color: var(--muted) !important; border-right: 1px solid var(--gray);\r\n transition: var(--ease);\r\n }\r\n .social-link:last-child { border-right: none; }\r\n .social-link:hover { color: var(--red) !important; background: rgba(232,0,13,0.04); }\r\n .social-link svg { flex-shrink: 0; fill: #666666; transition: fill 0.3s ease; }\r\n .social-link:hover svg { fill: var(--red); }\r\n .footer-bottom {\r\n display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;\r\n }\r\n .footer-brand { font-family: var(--font-title); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }\r\n .footer-brand strong { color: var(--red); }\r\n .footer-copy { font-size: 0.6rem; color: #333; }\r\n\r\n \/* FAB *\/\r\n .fab {\r\n position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 150;\r\n width: 52px; height: 52px; background: var(--red);\r\n color: var(--white) !important; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 1.1rem; box-shadow: 0 4px 24px rgba(232,0,13,0.4); transition: var(--ease);\r\n }\r\n .fab:hover { transform: scale(1.12) rotate(10deg); box-shadow: 0 6px 32px rgba(232,0,13,0.6); }\r\n\r\n \/* FADE-UP *\/\r\n .fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }\r\n .fade-up.visible { opacity: 1; transform: translateY(0); }\r\n\r\n \/* CAROUSEL IN-CARD *\/\r\n .project-img {\r\n position: relative;\r\n }\r\n .carousel-track {\r\n display: flex;\r\n width: 100%;\r\n height: 100%;\r\n transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);\r\n }\r\n .carousel-slide {\r\n flex: 0 0 100%;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n }\r\n .carousel-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center top;\r\n transition: transform 0.55s ease;\r\n display: block;\r\n }\r\n .project-card:hover .carousel-slide img { transform: scale(1.04); }\r\n .carousel-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: rgba(10,10,10,0.75);\r\n border: 1px solid rgba(232,0,13,0.5);\r\n color: #fff;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 10;\r\n font-size: 1rem;\r\n transition: background 0.25s, border-color 0.25s;\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n .project-card:hover .carousel-btn {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n .carousel-btn:hover {\r\n background: var(--red);\r\n border-color: var(--red);\r\n }\r\n .carousel-btn-prev { left: 0.5rem; }\r\n .carousel-btn-next { right: 0.5rem; }\r\n .carousel-dots {\r\n position: absolute;\r\n bottom: 0.55rem;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 5px;\r\n z-index: 10;\r\n }\r\n .carousel-dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.35);\r\n cursor: pointer;\r\n transition: background 0.25s, transform 0.25s;\r\n }\r\n .carousel-dot.active {\r\n background: var(--red);\r\n transform: scale(1.3);\r\n }\r\n \/* Ocultar flechas si solo hay 1 slide *\/\r\n .carousel-single .carousel-btn,\r\n .carousel-single .carousel-dots { display: none; }\r\n\r\n \/* BREAKPOINTS GLOBALES *\/\r\n @media (min-width: 600px) {\r\n :root { --pad: 2.2rem; }\r\n .hero-title { font-size: clamp(3rem, 8vw, 5.5rem); }\r\n .work-heading { font-size: clamp(2rem, 6vw, 3.5rem); }\r\n .about-big { font-size: clamp(4rem, 14vw, 7rem); }\r\n .contact-heading { font-size: clamp(3rem, 10vw, 6rem); }\r\n .about-stats { grid-template-columns: repeat(4, 1fr); }\r\n }\r\n @media (min-width: 900px) {\r\n :root { --pad: 4rem; }\r\n .hero { min-height: 100vh; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Lightbox global -->\r\n<div class=\"ch-lightbox-overlay\" id=\"chLightbox\" role=\"dialog\" aria-modal=\"true\">\r\n <button class=\"ch-lightbox-close\" id=\"chLightboxClose\" aria-label=\"Cerrar\">\u2715<\/button>\r\n <button class=\"ch-lightbox-prev\" id=\"chLightboxPrev\" aria-label=\"Anterior\">‹<\/button>\r\n <div class=\"ch-lightbox-inner\">\r\n <img decoding=\"async\" class=\"ch-lightbox-img\" id=\"chLightboxImg\" src=\"\" alt=\"\" \/>\r\n <\/div>\r\n <button class=\"ch-lightbox-next\" id=\"chLightboxNext\" aria-label=\"Siguiente\">›<\/button>\r\n <div class=\"ch-lightbox-counter\" id=\"chLightboxCounter\"><\/div>\r\n<\/div>\r\n\r\n<div class=\"ch-portfolio-wrapper\">\r\n\r\n <div class=\"page-transition\" id=\"pageTransition\"><\/div>\r\n\r\n <!-- NAV -->\r\n <nav class=\"site-nav\" id=\"siteNav\">\r\n <div class=\"nav-top\">\r\n <a href=\"#\" class=\"nav-brand\">conhache<span>.design<\/span><\/a>\r\n <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"Abrir men\u00fa\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"nav-menu\" id=\"navMenu\">\r\n <div class=\"nav-links\">\r\n <a href=\"#work\" class=\"nav-link\" data-target=\"work\">\r\n <span class=\"nav-link-num\">01<\/span>\r\n <span class=\"nav-link-text\">Proyectos<\/span>\r\n <span class=\"nav-link-arrow\">→<\/span>\r\n <\/a>\r\n <a href=\"#about\" class=\"nav-link\" data-target=\"about\">\r\n <span class=\"nav-link-num\">02<\/span>\r\n <span class=\"nav-link-text\">About<\/span>\r\n <span class=\"nav-link-arrow\">→<\/span>\r\n <\/a>\r\n <a href=\"#services\" class=\"nav-link\" data-target=\"services\">\r\n <span class=\"nav-link-num\">03<\/span>\r\n <span class=\"nav-link-text\">Servicios<\/span>\r\n <span class=\"nav-link-arrow\">→<\/span>\r\n <\/a>\r\n <a href=\"#skills\" class=\"nav-link\" data-target=\"skills\">\r\n <span class=\"nav-link-num\">04<\/span>\r\n <span class=\"nav-link-text\">Habilidades<\/span>\r\n <span class=\"nav-link-arrow\">→<\/span>\r\n <\/a>\r\n <a href=\"#contact\" class=\"nav-link\" data-target=\"contact\">\r\n <span class=\"nav-link-num\">05<\/span>\r\n <span class=\"nav-link-text\">Contacto<\/span>\r\n <span class=\"nav-link-arrow\">→<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <a href=\"mailto:design.conhache@gmail.com\" class=\"fab\" aria-label=\"Contactar\">✉<\/a>\r\n\r\n <!-- HERO -->\r\n <section class=\"hero\">\r\n <div class=\"hero-inner\">\r\n <p class=\"hero-eyebrow\">Diseño gráfico · Branding · Diseño Editorial · Publicidad<\/p>\r\n <h1 class=\"hero-title\">\r\n TRANSFORMO<br>IDEAS EN\r\n <span class=\"line-accent\"><span class=\"circled\">IMPACTO<\/span><br>VISUAL.<\/span>\r\n <\/h1>\r\n <p class=\"hero-sub\">Identidad visual estratégica que conecta marcas con las personas que las necesitan.<\/p>\r\n <a href=\"#work\" class=\"hero-cta\"><span>Ver trabajos<\/span><\/a>\r\n <div class=\"scroll-hint\">\r\n <span>Scroll<\/span>\r\n <div class=\"scroll-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- WORK -->\r\n <section id=\"work\">\r\n <p class=\"section-label\">Proyectos seleccionados<\/p>\r\n <div class=\"work-heading fade-up\">\r\n <span class=\"num\">2025 \/ 2026<\/span>\r\n <\/div>\r\n <div class=\"project-list\">\r\n\r\n <!-- Proyecto 1 -->\r\n <article class=\"project-card fade-up\" id=\"identidad\">\r\n <div class=\"project-img\"\r\n data-gallery='[\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/pacakaging-e1780511422216.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Menu-mockup.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Cartel-interior.png\"]'\r\n data-index=\"0\">\r\n <div class=\"carousel-track\">\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/pacakaging-e1780511422216.png\" alt=\"Mexicano Taquer\u00edas \u2014 packaging\" loading=\"lazy\" \/><\/div>\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Menu-mockup.png\" alt=\"Mexicano Taquer\u00edas \u2014 men\u00fa mockup\" loading=\"lazy\" \/><\/div>\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Cartel-interior.png\" alt=\"Mexicano Taquer\u00edas \u2014 cartel interior\" loading=\"lazy\" \/><\/div>\r\n <\/div>\r\n <button class=\"carousel-btn carousel-btn-prev\" aria-label=\"Anterior\">‹<\/button>\r\n <button class=\"carousel-btn carousel-btn-next\" aria-label=\"Siguiente\">›<\/button>\r\n <div class=\"carousel-dots\">\r\n <span class=\"carousel-dot active\"><\/span>\r\n <span class=\"carousel-dot\"><\/span>\r\n <span class=\"carousel-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-info\">\r\n <div class=\"project-info-left\">\r\n <p class=\"project-tag\">Branding · Identidad Visual<\/p>\r\n <h2 class=\"project-name\">Mexicano Taquerías<\/h2>\r\n <\/div>\r\n <span class=\"project-year\">2025<\/span>\r\n <\/div>\r\n <button class=\"project-view-btn\"\r\n data-gallery='[\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/pacakaging-e1780511422216.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Menu-mockup.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Cartel-interior.png\"]'\r\n data-index=\"0\">\r\n Ver proyecto →\r\n <\/button>\r\n <\/article>\r\n\r\n <!-- Proyecto 2 -->\r\n <article class=\"project-card fade-up\" id=\"publicidad\">\r\n <div class=\"project-img\"\r\n data-gallery='[\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/22340de1-1-scaled.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/MILNOFF-_EXPECTATIVA.pdf-scaled.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_hk3nemhk3nemhk3n.png\"]'\r\n data-index=\"0\">\r\n <div class=\"carousel-track\">\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/22340de1-1-scaled.png\" alt=\"Festival MILNOFF \u2014 cartel principal\" loading=\"lazy\" \/><\/div>\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/MILNOFF-_EXPECTATIVA.pdf-scaled.png\" alt=\"Festival MILNOFF \u2014 expectativa\" loading=\"lazy\" \/><\/div>\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_hk3nemhk3nemhk3n.png\" alt=\"Festival MILNOFF \u2014 imagen 3\" loading=\"lazy\" \/><\/div>\r\n <\/div>\r\n <button class=\"carousel-btn carousel-btn-prev\" aria-label=\"Anterior\">‹<\/button>\r\n <button class=\"carousel-btn carousel-btn-next\" aria-label=\"Siguiente\">›<\/button>\r\n <div class=\"carousel-dots\">\r\n <span class=\"carousel-dot active\"><\/span>\r\n <span class=\"carousel-dot\"><\/span>\r\n <span class=\"carousel-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-info\">\r\n <div class=\"project-info-left\">\r\n <p class=\"project-tag\">Campaña Publicitaria<\/p>\r\n <h2 class=\"project-name\">Propuesta Festival MILNOFF<\/h2>\r\n <\/div>\r\n <span class=\"project-year\">2026<\/span>\r\n <\/div>\r\n <button class=\"project-view-btn\"\r\n data-gallery='[\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/22340de1-1-scaled.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/MILNOFF-_EXPECTATIVA.pdf-scaled.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_hk3nemhk3nemhk3n.png\"]'\r\n data-index=\"0\">\r\n Ver proyecto →\r\n <\/button>\r\n <\/article>\r\n\r\n <!-- Proyecto 3 -->\r\n <article class=\"project-card fade-up\" id=\"editorial\">\r\n <div class=\"project-img\"\r\n data-gallery='[\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/TINAJAS-copiaPUBLIS-PUE.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Manuel-pastor-copiaPUBLIS-PUE.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/calle-copiaPUBLIS-PUE.png\"]'\r\n data-index=\"0\">\r\n <div class=\"carousel-track\">\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/TINAJAS-copiaPUBLIS-PUE.png\" alt=\"Carteler\u00eda Pueblo \u2014 Tinajas\" loading=\"lazy\" \/><\/div>\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Manuel-pastor-copiaPUBLIS-PUE.png\" alt=\"Carteler\u00eda Pueblo \u2014 Manuel Pastor\" loading=\"lazy\" \/><\/div>\r\n <div class=\"carousel-slide\"><img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/calle-copiaPUBLIS-PUE.png\" alt=\"Carteler\u00eda Pueblo \u2014 Calle\" loading=\"lazy\" \/><\/div>\r\n <\/div>\r\n <button class=\"carousel-btn carousel-btn-prev\" aria-label=\"Anterior\">‹<\/button>\r\n <button class=\"carousel-btn carousel-btn-next\" aria-label=\"Siguiente\">›<\/button>\r\n <div class=\"carousel-dots\">\r\n <span class=\"carousel-dot active\"><\/span>\r\n <span class=\"carousel-dot\"><\/span>\r\n <span class=\"carousel-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-info\">\r\n <div class=\"project-info-left\">\r\n <p class=\"project-tag\">Diseño Editorial<\/p>\r\n <h2 class=\"project-name\">Serie Cartelería “Pueblo”<\/h2>\r\n <\/div>\r\n <span class=\"project-year\">2026<\/span>\r\n <\/div>\r\n <button class=\"project-view-btn\"\r\n data-gallery='[\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/TINAJAS-copiaPUBLIS-PUE.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/Manuel-pastor-copiaPUBLIS-PUE.png\",\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/calle-copiaPUBLIS-PUE.png\"]'\r\n data-index=\"0\">\r\n Ver proyecto →\r\n <\/button>\r\n <\/article>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- TICKER -->\r\n <div class=\"process-strip\" aria-hidden=\"true\">\r\n <div class=\"ticker-track\">\r\n <span>Diseño con carácter<\/span>\r\n <span class=\"dot\">Identidad visual<\/span>\r\n <span class=\"dot\">Branding estratégico<\/span>\r\n <span class=\"dot\">Diseño de impacto<\/span>\r\n <span class=\"dot\">conhache.design<\/span>\r\n <span>Diseño con carácter<\/span>\r\n <span class=\"dot\">Identidad visual<\/span>\r\n <span class=\"dot\">Branding estratégico<\/span>\r\n <span class=\"dot\">Diseño de impacto<\/span>\r\n <span class=\"dot\">conhache.design<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ABOUT -->\r\n <section id=\"about\">\r\n <p class=\"section-label\">Sobre mí<\/p>\r\n <div class=\"about-top\">\r\n <p class=\"about-big\">About<\/p>\r\n <div class=\"about-arrow\">\r\n <svg viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M8 48 C12 30 32 14 50 10\" stroke=\"#e8000d\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"\/>\r\n <path d=\"M42 6 L50 10 L45 18\" stroke=\"#e8000d\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-content\">\r\n <div class=\"about-text\">\r\n <p class=\"about-body fade-up\">\r\n Soy diseñadora gráfica especializada en <strong>identidad visual y publicidad<\/strong>. Creo sistemas visuales con <em>personalidad propia<\/em> que hacen que las marcas se vean, se sientan y se recuerden de verdad. Cada proyecto es una oportunidad de construir algo que dure.\r\n <\/p>\r\n <\/div>\r\n <!-- IMAGEN CIRCULAR: cambia src por la URL de tu foto -->\r\n <div class=\"about-photo\">\r\n <img decoding=\"async\" src=\"https:\/\/erguezhacha.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/e-3.png\" alt=\"Elena Rodr\u00edguez\" \/>\r\n <div class=\"about-photo-placeholder\">Tu foto<br>aquí<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SERVICES -->\r\n <section id=\"services\">\r\n <p class=\"section-label\">Qué hago<\/p>\r\n <h2 class=\"services-heading fade-up\">SERVICIOS<\/h2>\r\n <p class=\"services-sub fade-up\">Selecciona para explorar cada área.<\/p>\r\n <div class=\"accordion-list\">\r\n <details open>\r\n <summary>\r\n <div class=\"summary-inner\">\r\n <span class=\"sum-index\">01<\/span>\r\n <span class=\"sum-title\">Identidad Visual<\/span>\r\n <\/div>\r\n <div class=\"sum-icon\">+<\/div>\r\n <\/summary>\r\n <div class=\"accordion-body\">\r\n <p>Creación de identidades visuales completas: logotipo, tipografía, colores, sistema de aplicaciones. Diseño que define quién eres antes de que digas una sola palabra.<\/p>\r\n <div class=\"service-tags\">\r\n <span class=\"s-tag\">Diseño de logotipo<\/span>\r\n <span class=\"s-tag\">Identidad visual<\/span>\r\n <span class=\"s-tag\">Naming<\/span>\r\n <span class=\"s-tag\">Branding<\/span>\r\n <span class=\"s-tag\">Adaptaciones a RRSS<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/details>\r\n <details>\r\n <summary>\r\n <div class=\"summary-inner\">\r\n <span class=\"sum-index\">02<\/span>\r\n <span class=\"sum-title\">Publicidad<\/span>\r\n <\/div>\r\n <div class=\"sum-icon\">+<\/div>\r\n <\/summary>\r\n <div class=\"accordion-body\">\r\n <p>Desarrollo de campañas publicitarias creativas e impactantes tanto digitales como impresas, optimizadas para captar la atención de tu público objetivo.<\/p>\r\n <div class=\"service-tags\">\r\n <span class=\"s-tag\">Campañas creativas<\/span>\r\n <span class=\"s-tag\">Cartelería<\/span>\r\n <span class=\"s-tag\">Copywriting<\/span>\r\n <span class=\"s-tag\">Dirección de arte<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/details>\r\n <details>\r\n <summary>\r\n <div class=\"summary-inner\">\r\n <span class=\"sum-index\">03<\/span>\r\n <span class=\"sum-title\">Editorial<\/span>\r\n <\/div>\r\n <div class=\"sum-icon\">+<\/div>\r\n <\/summary>\r\n <div class=\"accordion-body\">\r\n <p>Maquetación y diseño de publicaciones tanto impresas como digitales. Cuidado riguroso de la tipografía, la composición y el ritmo visual para crear lecturas impecables.<\/p>\r\n <div class=\"service-tags\">\r\n <span class=\"s-tag\">Diseño de catálogos<\/span>\r\n <span class=\"s-tag\">Revistas<\/span>\r\n <span class=\"s-tag\">Libros<\/span>\r\n <span class=\"s-tag\">Memorias corporativas<\/span>\r\n <span class=\"s-tag\">Artes finales<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SKILLS -->\r\n <section id=\"skills\">\r\n <p class=\"section-label\">Lo que uso<\/p>\r\n <h2 class=\"skills-heading fade-up\">HABILIDADES<\/h2>\r\n <p class=\"skills-sub fade-up\">Herramientas con las que trabajo día a día.<\/p>\r\n <div class=\"skills-grid\">\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Adobe · Imagen<\/span>\r\n <span class=\"skill-name\">Photoshop<\/span>\r\n <\/div>\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Adobe · Vectorial<\/span>\r\n <span class=\"skill-name\">Illustrator<\/span>\r\n <\/div>\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Adobe · Editorial<\/span>\r\n <span class=\"skill-name\">InDesign<\/span>\r\n <\/div>\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Adobe · Fotografía<\/span>\r\n <span class=\"skill-name\">Lightroom<\/span>\r\n <\/div>\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Diseño · Online<\/span>\r\n <span class=\"skill-name\">Canva<\/span>\r\n <\/div>\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Diseño · UI\/UX<\/span>\r\n <span class=\"skill-name\">Figma<\/span>\r\n <\/div>\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Adobe · Vídeo<\/span>\r\n <span class=\"skill-name\">Premiere<\/span>\r\n <\/div>\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Vídeo · Móvil<\/span>\r\n <span class=\"skill-name\">CapCut<\/span>\r\n <\/div>\r\n\r\n <div class=\"skill-item fade-up\">\r\n <span class=\"skill-cat\">Vídeo · Edición<\/span>\r\n <span class=\"skill-name\">DaVinci Resolve<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CONTACT \/ FOOTER -->\r\n <section id=\"contact\">\r\n <p class=\"contact-eyebrow\">¿Tienes un proyecto en mente?<\/p>\r\n <h2 class=\"contact-heading\">\u00bfHabla<span class=\"qmark\">mos?<\/span><\/h2>\r\n <p class=\"contact-sub\">Si buscas diseño estratégico y con carácter, hablemos y hagamos que suceda.<\/p>\r\n <a href=\"mailto:design.conhache@gmail.com\" class=\"contact-cta\"><span>Escríbeme<\/span><\/a>\r\n\r\n <div class=\"social-row\">\r\n <a href=\"https:\/\/www.instagram.com\/conhache.design?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==\"\r\n class=\"social-link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/>\r\n <\/svg>\r\n Instagram\r\n <\/a>\r\n <a href=\"https:\/\/www.linkedin.com\/in\/elena-rodr%C3%ADguez-hacha-32ba913b9\"\r\n class=\"social-link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"LinkedIn\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/>\r\n <\/svg>\r\n LinkedIn\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom\">\r\n <div class=\"footer-brand\">conhache<strong>.design<\/strong><\/div>\r\n <div class=\"footer-copy\">© 2026 — Todos los derechos reservados<\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div><!-- fin .ch-portfolio-wrapper -->\r\n\r\n<script>\r\n \/* MEN\u00da HAMBURGUESA *\/\r\n const toggle = document.getElementById('navToggle');\r\n const menu = document.getElementById('navMenu');\r\n if (toggle && menu) {\r\n toggle.addEventListener('click', () => {\r\n toggle.classList.toggle('open');\r\n menu.classList.toggle('open');\r\n });\r\n }\r\n\r\n \/* FADE-UP *\/\r\n const fadeEls = document.querySelectorAll('.fade-up');\r\n const fadeObs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });\r\n }, { threshold: 0.1 });\r\n fadeEls.forEach(el => fadeObs.observe(el));\r\n\r\n \/* LIGHTBOX *\/\r\n const overlay = document.getElementById('chLightbox');\r\n const lbImg = document.getElementById('chLightboxImg');\r\n const lbClose = document.getElementById('chLightboxClose');\r\n const lbPrev = document.getElementById('chLightboxPrev');\r\n const lbNext = document.getElementById('chLightboxNext');\r\n const lbCounter = document.getElementById('chLightboxCounter');\r\n\r\n let currentGallery = [];\r\n let currentIndex = 0;\r\n\r\n function openLightbox(gallery, index) {\r\n currentGallery = gallery;\r\n currentIndex = index;\r\n overlay.setAttribute('data-total', gallery.length);\r\n showLightboxImage();\r\n overlay.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeLightbox() {\r\n overlay.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n function showLightboxImage() {\r\n lbImg.src = currentGallery[currentIndex];\r\n lbImg.alt = 'Imagen ' + (currentIndex + 1);\r\n lbCounter.textContent = (currentIndex + 1) + ' \/ ' + currentGallery.length;\r\n }\r\n\r\n function prevLightboxImage() {\r\n currentIndex = (currentIndex - 1 + currentGallery.length) % currentGallery.length;\r\n showLightboxImage();\r\n }\r\n\r\n function nextLightboxImage() {\r\n currentIndex = (currentIndex + 1) % currentGallery.length;\r\n showLightboxImage();\r\n }\r\n\r\n lbClose.addEventListener('click', closeLightbox);\r\n lbPrev.addEventListener('click', prevLightboxImage);\r\n lbNext.addEventListener('click', nextLightboxImage);\r\n\r\n overlay.addEventListener('click', (e) => {\r\n if (e.target === overlay) closeLightbox();\r\n });\r\n\r\n document.addEventListener('keydown', (e) => {\r\n if (!overlay.classList.contains('active')) return;\r\n if (e.key === 'Escape') closeLightbox();\r\n if (e.key === 'ArrowLeft') prevLightboxImage();\r\n if (e.key === 'ArrowRight') nextLightboxImage();\r\n });\r\n\r\n \/* Lightbox en bot\u00f3n \"Ver proyecto\" *\/\r\n document.querySelectorAll('.project-view-btn[data-gallery]').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const card = btn.closest('.project-card');\r\n const projectImg = card.querySelector('.project-img');\r\n const gallery = JSON.parse(btn.getAttribute('data-gallery'));\r\n \/* Abrir en la imagen que est\u00e1 visible en el carrusel *\/\r\n const startIndex = projectImg ? (parseInt(projectImg.dataset.currentIndex) || 0) : 0;\r\n openLightbox(gallery, startIndex);\r\n });\r\n });\r\n\r\n \/* CARRUSELES IN-CARD *\/\r\n document.querySelectorAll('.project-img').forEach(container => {\r\n const track = container.querySelector('.carousel-track');\r\n const slides = container.querySelectorAll('.carousel-slide');\r\n const btnPrev = container.querySelector('.carousel-btn-prev');\r\n const btnNext = container.querySelector('.carousel-btn-next');\r\n const dots = container.querySelectorAll('.carousel-dot');\r\n const total = slides.length;\r\n\r\n if (total <= 1) {\r\n container.classList.add('carousel-single');\r\n return;\r\n }\r\n\r\n let idx = 0;\r\n container.dataset.currentIndex = '0';\r\n\r\n function goTo(n) {\r\n idx = (n + total) % total;\r\n track.style.transform = `translateX(-${idx * 100}%)`;\r\n dots.forEach((d, i) => d.classList.toggle('active', i === idx));\r\n container.dataset.currentIndex = String(idx);\r\n }\r\n\r\n btnPrev && btnPrev.addEventListener('click', (e) => { e.stopPropagation(); goTo(idx - 1); });\r\n btnNext && btnNext.addEventListener('click', (e) => { e.stopPropagation(); goTo(idx + 1); });\r\n dots.forEach((dot, i) => dot.addEventListener('click', (e) => { e.stopPropagation(); goTo(i); }));\r\n\r\n \/* Swipe t\u00e1ctil *\/\r\n let startX = 0;\r\n container.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; }, { passive: true });\r\n container.addEventListener('touchend', (e) => {\r\n const dx = e.changedTouches[0].clientX - startX;\r\n if (Math.abs(dx) > 40) goTo(dx < 0 ? idx + 1 : idx - 1);\r\n }, { passive: true });\r\n\r\n \/* Click en la imagen abre el lightbox en el slide actual *\/\r\n container.addEventListener('click', (e) => {\r\n if (e.target.closest('.carousel-btn') || e.target.closest('.carousel-dot')) return;\r\n try {\r\n const gallery = JSON.parse(container.getAttribute('data-gallery'));\r\n openLightbox(gallery, idx);\r\n } catch(err) {}\r\n });\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-380","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/pages\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":13,"href":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/pages\/380\/revisions"}],"predecessor-version":[{"id":398,"href":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/pages\/380\/revisions\/398"}],"wp:attachment":[{"href":"https:\/\/erguezhacha.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/media?parent=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}