{"id":367,"date":"2026-05-11T19:43:09","date_gmt":"2026-05-11T17:43:09","guid":{"rendered":"https:\/\/25012.ooteca.artedra.net\/?page_id=367"},"modified":"2026-05-19T12:19:28","modified_gmt":"2026-05-19T10:19:28","slug":"elementor-367","status":"publish","type":"page","link":"https:\/\/25012.ooteca.artedra.net\/","title":{"rendered":"CAFETO"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nOrigen \u2014 La Revista del Caf\u00e9<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300&family=Barlow+Condensed:wght@200;300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n --espresso: #260D0A;\n --mahogany: #593723;\n --terracotta: #8C493A;\n --blush: #BF7D65;\n --ash: #D9D9D9;\n --cream: #F5F0EB;\n --white: #FAFAF8;\n --f-body: 'Barlow', sans-serif;\n --f-display: 'Barlow Condensed', sans-serif;\n --ease-silk: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);\n --ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; font-size: 16px; }\nbody { font-family: var(--f-body); background: var(--white); color: var(--espresso); overflow-x: hidden; cursor: none; }\nimg { display: block; max-width: 100%; }\na { text-decoration: none; color: inherit; }\n\n\/* \u2500\u2500\u2500 CURSOR \u2500\u2500\u2500 *\/\n.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: multiply; }\n.cursor__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); position: absolute; transform: translate(-50%,-50%); transition: transform 0.1s var(--ease-snap); }\n.cursor__ring { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--terracotta); position: absolute; transform: translate(-50%,-50%); transition: width 0.3s var(--ease-snap), height 0.3s var(--ease-snap), transform 0.15s var(--ease-silk); opacity: 0.6; }\n\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\nnav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 5vw; height: 68px;\n background: rgba(250,250,248,0.85);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid rgba(89,55,35,0.08);\n transition: background 0.4s, transform 0.4s var(--ease-out);\n}\nnav.hidden { transform: translateY(-100%); }\n.nav__logo { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mahogany); }\n.nav__logo span { color: var(--blush); }\n.nav__links { display: flex; gap: 2rem; list-style: none; }\n.nav__links a { font-size: 0.76rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mahogany); opacity: 0.7; transition: opacity 0.2s; }\n.nav__links a:hover { opacity: 1; }\n.nav__cta { font-family: var(--f-display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); background: var(--mahogany); padding: 0.6rem 1.5rem; border-radius: 2px; transition: background 0.25s; }\n.nav__cta:hover { background: var(--terracotta); }\n.nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }\n.nav__hamburger span { width: 24px; height: 1px; background: var(--mahogany); transition: 0.3s; }\n\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.hero { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 68px; overflow: hidden; }\n.hero__left { display: flex; flex-direction: column; justify-content: center; padding: 8vw 5vw 8vw 8vw; position: relative; }\n\n.hero__eyebrow {\n font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;\n color: var(--blush); margin-bottom: 1.8rem; display: flex; align-items: center; gap: 0.8rem;\n opacity: 0; animation: fadeUp 0.8s 0.2s var(--ease-snap) forwards;\n}\n.hero__eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--blush); }\n\n.hero__title {\n font-family: var(--f-display); font-size: clamp(3.5rem,7vw,7rem); font-weight: 700;\n line-height: 0.9; letter-spacing: -0.01em; color: var(--espresso); text-transform: uppercase;\n opacity: 0; animation: fadeUp 0.9s 0.35s var(--ease-snap) forwards;\n}\n.hero__title em { font-style: italic; font-weight: 200; color: var(--terracotta); }\n\n.hero__body {\n margin-top: 2.4rem; font-size: 1.05rem; font-weight: 300; line-height: 1.75;\n color: var(--mahogany); max-width: 420px;\n opacity: 0; animation: fadeUp 0.9s 0.5s var(--ease-snap) forwards;\n}\n.hero__actions {\n margin-top: 3rem; display: flex; align-items: center; gap: 2rem;\n opacity: 0; animation: fadeUp 0.9s 0.65s var(--ease-snap) forwards;\n}\n\n.btn-primary {\n font-family: var(--f-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.15em;\n text-transform: uppercase; color: var(--white); background: var(--espresso); padding: 1rem 2.5rem;\n border-radius: 2px; position: relative; overflow: hidden; transition: transform 0.2s var(--ease-snap);\n}\n.btn-primary::after { content: ''; position: absolute; inset: 0; background: var(--terracotta); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-snap); }\n.btn-primary:hover { transform: translateY(-1px); }\n.btn-primary:hover::after { transform: scaleX(1); }\n.btn-primary span { position: relative; z-index: 1; }\n\n.btn-ghost { font-size: 0.82rem; font-weight: 400; letter-spacing: 0.08em; color: var(--mahogany); display: flex; align-items: center; gap: 0.5rem; transition: gap 0.2s; }\n.btn-ghost:hover { gap: 0.9rem; }\n.btn-ghost svg { width: 16px; opacity: 0.6; }\n\n.hero__right { position: relative; display: flex; align-items: center; justify-content: center; }\n.hero__bg-dots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }\n.dot { position: absolute; border-radius: 50%; background: rgba(191,125,101,0.12); animation: float linear infinite; }\n.hero__right-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }\n\n.hero-image img {\n max-width: 820px; width: 100%; height: auto; object-fit: contain;\n filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));\n animation: floatHero 6s ease-in-out infinite;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n MARQUEE \/ INFINITE SLIDER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.marquee-strip {\n width: 100%;\n overflow: hidden;\n position: relative;\n\n padding: 1rem 0;\n\n background: var(--mahogany);\n}\n\n\/* TRACK *\/\n\n.marquee-track {\n display: flex;\n align-items: center;\n gap: 3rem;\n\n width: max-content;\n\n animation: marquee 22s linear infinite;\n}\n\n\/* ITEMS *\/\n\n.marquee-item {\n position: relative;\n\n display: flex;\n align-items: center;\n gap: 1.5rem;\n\n flex-shrink: 0;\n\n font-family: var(--f-display);\n font-size: 0.75rem;\n font-weight: 500;\n\n letter-spacing: 0.25em;\n text-transform: uppercase;\n\n color: var(--blush);\n}\n\n\/* ICON *\/\n\n.marquee-item::after {\n content: \"\u2726\";\n\n font-size: 0.5rem;\n opacity: 0.5;\n}\n\n\/* ANIMATION *\/\n\n@keyframes marquee {\n\n 0% {\n transform: translateX(0);\n }\n\n 100% {\n transform: translateX(-50%);\n }\n\n}\n\n\/* RESPONSIVE *\/\n\n@media (max-width: 768px) {\n\n .marquee-track {\n gap: 2rem;\n animation-duration: 16s;\n }\n\n .marquee-item {\n font-size: 0.65rem;\n letter-spacing: 0.18em;\n }\n\n}\n\n\/* \u2500\u2500\u2500 SECTION COMMONS \u2500\u2500\u2500 *\/\nsection { padding: clamp(5rem,10vw,9rem) 8vw; }\n.section-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blush); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; }\n.section-label::before { content: ''; display: block; width: 24px; height: 1px; background: var(--blush); }\n.section-title { font-family: var(--f-display); font-size: clamp(2.4rem,4.5vw,4.2rem); font-weight: 700; line-height: 1.0; text-transform: uppercase; color: var(--espresso); }\n.section-title em { font-style: italic; font-weight: 200; color: var(--terracotta); }\n\n\/* \u2500\u2500\u2500 IDEA \u2500\u2500\u2500 *\/\n.idea { background: var(--cream); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }\n.idea__text p { font-size: 1.1rem; font-weight: 300; line-height: 1.85; color: var(--mahogany); max-width: 480px; margin-top: 2rem; }\n.idea__visual { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }\n.idea__image { width: 100%; height: auto; object-fit: contain; }\n\n\/* \u2500\u2500\u2500 ABOUT \u2500\u2500\u2500 *\/\n.about { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; background: var(--white); }\n.about__text p { font-size: 1.05rem; font-weight: 300; line-height: 1.85; color: var(--mahogany); margin-top: 2rem; max-width: 480px; }\n.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 3.5rem; }\n.stat { background: var(--cream); padding: 2rem 1.8rem; border-top: 2px solid var(--blush); }\n.stat__num { font-family: var(--f-display); font-size: 3rem; font-weight: 700; color: var(--mahogany); line-height: 1; }\n.stat__label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta); margin-top: 0.4rem; }\n.about__visual { position: relative; aspect-ratio: 4\/5; }\n.about__bg-card { position: absolute; width: 80%; aspect-ratio: 4\/5; bottom: 0; right: 0; background-image: url('https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Cafeto-Revista13-.jpg'); background-size: cover; background-position: center; border-radius: 6px; opacity: 0.9; z-index: 1; }\n.about__img-card { position: absolute; width: 85%; aspect-ratio: 4\/5; top: 0; left: 0; border-radius: 6px; overflow: hidden; z-index: 2; box-shadow: 0 30px 60px rgba(0,0,0,0.18); }\n.about__image { width: 100%; height: 100%; object-fit: cover; display: block; }\n\n\/* \u2500\u2500\u2500 REFERENTES \u2500\u2500\u2500 *\/\n.referentes { background: var(--espresso); }\n.referentes .section-title { color: var(--cream); }\n.ref-grid { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }\n.ref-card { background: rgba(255,255,255,0.04); padding: 2.5rem; border-top: 1px solid rgba(191,125,101,0.2); position: relative; overflow: hidden; transition: background 0.3s var(--ease-silk); }\n.ref-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--blush); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-snap); }\n.ref-card:hover { background: rgba(255,255,255,0.08); }\n.ref-card:hover::before { transform: scaleX(1); }\n.ref-card__mark { width: 40px; height: 40px; border-radius: 50%; background: rgba(191,125,101,0.15); border: 1px solid rgba(191,125,101,0.3); display: flex; align-items: center; justify-content: center; margin-bottom: 1.8rem; }\n.ref-card__mark svg { width: 18px; fill: var(--blush); }\n.ref-card__cat { font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--blush); opacity: 0.7; margin-bottom: 0.7rem; }\n.ref-card__name { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: var(--cream); margin-bottom: 0.8rem; }\n.ref-card__desc { font-size: 0.85rem; font-weight: 300; line-height: 1.65; color: rgba(217,217,217,0.6); }\n.ref-card__link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blush); font-weight: 500; transition: gap 0.2s; }\n.ref-card__link:hover { gap: 0.9rem; }\n.ref-card__link svg { width: 12px; }\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n\n.features {\n background: var(--cream);\n}\n\n.features__header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-bottom: 5rem;\n flex-wrap: wrap;\n gap: 2rem;\n}\n\n.features__lead {\n font-size: 1rem;\n font-weight: 300;\n line-height: 1.75;\n color: var(--mahogany);\n max-width: 380px;\n}\n\n.features__grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2px;\n}\n\n\/* CARD *\/\n\n.feature-card {\n background: var(--white);\n padding: 3rem 2.5rem;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n\n transition:\n background 0.4s var(--ease-silk),\n transform 0.4s var(--ease-silk);\n}\n\n\/* HOVER CARD *\/\n\n.feature-card:hover .fc__num {\n color: #ffffff !important;\n opacity: 1 !important;\n}\n\/* ICON *\/\n\n.fc__icon {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: var(--mahogany);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin-bottom: 2rem;\n\n transition:\n background 0.35s var(--ease-silk),\n transform 0.35s var(--ease-silk);\n}\n\n.fc__icon svg {\n width: 20px;\n fill: var(--blush);\n\n transition:\n fill 0.35s var(--ease-silk),\n transform 0.35s var(--ease-silk);\n}\n\n\/* ICON HOVER *\/\n\n.feature-card:hover .fc__icon {\n background: var(--terracotta);\n transform: scale(1.08);\n}\n\n.feature-card:hover .fc__icon svg {\n fill: var(--white);\n}\n\n\/* NUMBER *\/\n\n.fc__num {\n position: absolute;\n top: 1.5rem;\n right: 2rem;\n\n font-family: var(--f-display);\n font-size: 4.5rem;\n font-weight: 700;\n line-height: 1;\n\n color: var(--ash);\n\n transition:\n color 0.35s var(--ease-silk),\n opacity 0.35s var(--ease-silk);\n}\n\n\/* NUMBER HOVER *\/\n\n.feature-card:hover .fc__num {\n color: var(--white);\n opacity: 0;\n}\n\n\/* TITLE *\/\n\n.fc__title {\n font-family: var(--f-display);\n font-size: 1.4rem;\n font-weight: 700;\n\n text-transform: uppercase;\n letter-spacing: 0.05em;\n\n color: var(--espresso);\n\n margin-bottom: 1rem;\n\n transition: color 0.35s var(--ease-silk);\n}\n\n.feature-card:hover .fc__title {\n color: var(--white);\n}\n\n\/* BODY *\/\n\n.fc__body {\n font-size: 0.95rem;\n font-weight: 400;\n line-height: 1.75;\n\n color: var(--terracotta);\n\n transition: color 0.35s var(--ease-silk);\n}\n\n.feature-card:hover .fc__body {\n color: var(--ash);\n}\n\n\/* CARD *\/\n\n.feature-card {\n background: var(--white);\n padding: 3rem 2.5rem;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n\n transition:\n background 0.4s var(--ease-silk),\n transform 0.4s var(--ease-silk);\n}\n\n\/* HOVER CARD *\/\n\n.feature-card:hover {\n background: var(--espresso);\n transform: translateY(-6px);\n}\n\n\/* ICON *\/\n\n.fc__icon {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: var(--mahogany);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin-bottom: 2rem;\n\n transition:\n background 0.35s var(--ease-silk),\n transform 0.35s var(--ease-silk);\n}\n\n.fc__icon svg {\n width: 20px;\n fill: var(--blush);\n\n transition:\n fill 0.35s var(--ease-silk),\n transform 0.35s var(--ease-silk);\n}\n\n\/* ICON HOVER *\/\n\n.feature-card:hover .fc__icon {\n background: var(--terracotta);\n transform: scale(1.08);\n}\n\n.feature-card:hover .fc__icon svg {\n fill: var(--white);\n}\n\n\/* NUMBER *\/\n\n.fc__num {\n position: absolute;\n top: 1.5rem;\n right: 2rem;\n\n font-family: var(--f-display);\n font-size: 4.5rem;\n font-weight: 700;\n line-height: 1;\n\n color: var(--ash);\n\n transition:\n color 0.35s var(--ease-silk),\n opacity 0.35s var(--ease-silk);\n}\n\n\/* NUMBER HOVER *\/\n\n.feature-card:hover .fc__num {\n color: var(--terracotta);\n opacity: 0.35;\n}\n\n\/* TITLE *\/\n\n.fc__title {\n font-family: var(--f-display);\n font-size: 1.4rem;\n font-weight: 700;\n\n text-transform: uppercase;\n letter-spacing: 0.05em;\n\n color: var(--espresso);\n\n margin-bottom: 1rem;\n\n transition: color 0.35s var(--ease-silk);\n}\n\n.feature-card:hover .fc__title {\n color: var(--white);\n}\n\n\/* BODY *\/\n\n.fc__body {\n font-size: 0.95rem;\n font-weight: 400;\n line-height: 1.75;\n\n color: var(--terracotta);\n\n transition: color 0.35s var(--ease-silk);\n}\n\n.feature-card:hover .fc__body {\n color: var(--ash);\n}\n\n\/* \u2500\u2500\u2500 PROCESO \u2500\u2500\u2500 *\/\n.proceso { background: var(--white); }\n.proceso__header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; }\n.proceso__intro { font-size: 1rem; font-weight: 300; line-height: 1.75; color: var(--mahogany); max-width: 380px; }\n.proceso__tabs { display: flex; margin-top: 3.5rem; border-bottom: 1px solid rgba(89,55,35,0.12); }\n.tab-btn { font-family: var(--f-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mahogany); padding: 0.9rem 2rem; background: none; border: none; cursor: pointer; opacity: 0.35; transition: opacity 0.2s; position: relative; outline: none; }\n.tab-btn.active { opacity: 1; }\n.tab-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--terracotta); }\n.proceso__panel { display: none; padding-top: 3.5rem; }\n.proceso__panel.active { display: block; }\n.proceso__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }\n.step-card { position: relative; aspect-ratio: 3\/4; overflow: hidden; transition: transform 0.4s var(--ease-snap); cursor: default; }\n.step-card:hover { transform: translateY(-6px); z-index: 2; }\n.step-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s ease; }\n.step-card:hover .step-card__bg { transform: scale(1.08); }\n.step-card__overlay { position: absolute; inset: 0; background: rgba(38,13,10,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; }\n.step-card:hover .step-card__overlay { opacity: 0.9; }\n.step-card__note { font-size: 0.75rem; font-weight: 300; line-height: 1.6; color: var(--cream); text-align: center; padding: 1rem; }\n.step-card__label { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem 1.2rem 1.2rem; background: linear-gradient(to top, rgba(38,13,10,0.9), transparent); }\n.step-card__num { font-family: var(--f-display); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blush); }\n.step-card__title { font-family: var(--f-display); font-size: 0.95rem; font-weight: 600; text-transform: uppercase; color: var(--cream); margin-top: 0.3rem; line-height: 1.2; }\n\n\/* Brand\/tipograf\u00eda panel *\/\n.marca__versions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }\n.marca-card { background: var(--cream); padding: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; position: relative; overflow: hidden; transition: background 0.3s; }\n.marca-card:hover { background: var(--espresso); }\n.marca-card:hover .marca-card__name { color: var(--cream); }\n.marca-card:hover .marca-card__desc { color: rgba(217,217,217,0.6); }\n.marca-card__visual { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }\n.marca-card__badge { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blush); background: rgba(191,125,101,0.15); padding: 0.3rem 0.8rem; border-radius: 20px; }\n.marca-card__name { font-family: var(--f-display); font-size: 1rem; font-weight: 600; text-transform: uppercase; color: var(--espresso); text-align: center; transition: 0.3s; }\n.marca-card__desc { font-size: 0.78rem; font-weight: 300; line-height: 1.6; color: var(--terracotta); text-align: center; transition: 0.3s; }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* DESIGN SHOWCASE *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.design {\n position: relative;\n\n background:\n radial-gradient(\n circle at top,\n rgba(191,125,101,0.08),\n transparent 35%\n ),\n var(--espresso);\n\n color: var(--cream);\n\n overflow: hidden;\n}\n\n.design .section-title {\n color: var(--cream);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* GRID *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.design__grid {\n margin-top: 5rem;\n\n display: grid;\n grid-template-columns: 1.15fr 0.85fr;\n\n gap: 2rem;\n\n align-items: stretch;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* BLOQUES GENERALES *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.design-block {\n position: relative;\n\n display: flex;\n flex-direction: column;\n\n height: 100%;\n\n padding: 2.2rem;\n\n border-radius: 38px;\n\n overflow: hidden;\n\n background:\n linear-gradient(\n 180deg,\n rgba(255,255,255,0.04),\n rgba(255,255,255,0.015)\n );\n\n border: 1px solid rgba(255,255,255,0.06);\n\n backdrop-filter: blur(20px);\n\n transition:\n transform 0.4s ease,\n background 0.4s ease,\n border 0.4s ease;\n}\n\n.design-block:hover {\n transform: translateY(-4px);\n\n background:\n linear-gradient(\n 180deg,\n rgba(255,255,255,0.06),\n rgba(255,255,255,0.02)\n );\n\n border-color: rgba(255,255,255,0.09);\n}\n\n\/* glow *\/\n\n.design-block::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n linear-gradient(\n 180deg,\n rgba(255,255,255,0.08),\n rgba(255,255,255,0)\n );\n\n pointer-events: none;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* TYPOGRAPHY *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.typo-stack {\n display: flex;\n flex-direction: column;\n\n gap: 1rem;\n\n margin-top: 2rem;\n}\n\n\/* cards *\/\n\n.type-card {\n position: relative;\n\n display: flex;\n flex-direction: column;\n\n gap: 1rem;\n\n padding: 1.5rem 1.7rem;\n\n border-radius: 30px;\n\n overflow: hidden;\n\n background:\n linear-gradient(\n 135deg,\n rgba(255,255,255,0.045),\n rgba(255,255,255,0.015)\n );\n\n border: 1px solid rgba(255,255,255,0.05);\n\n transition:\n transform 0.35s ease,\n background 0.35s ease,\n box-shadow 0.35s ease;\n}\n\n.type-card:hover {\n transform: translateX(10px);\n\n background:\n linear-gradient(\n 135deg,\n rgba(255,255,255,0.065),\n rgba(255,255,255,0.025)\n );\n\n box-shadow:\n 0 20px 45px rgba(0,0,0,0.35);\n}\n\n\/* logo special *\/\n\n.type-card--logo {\n padding-top: 2rem;\n padding-bottom: 2rem;\n\n background:\n radial-gradient(\n circle at left,\n rgba(191,125,101,0.16),\n transparent 55%\n ),\n linear-gradient(\n 135deg,\n rgba(255,255,255,0.05),\n rgba(255,255,255,0.02)\n );\n}\n\n\/* meta *\/\n\n.type-info {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n gap: 1rem;\n\n flex-wrap: wrap;\n}\n\n.type-label {\n font-size: 0.68rem;\n\n letter-spacing: 0.28em;\n\n text-transform: uppercase;\n\n color: var(--blush);\n}\n\n.type-role {\n font-size: 0.65rem;\n\n letter-spacing: 0.18em;\n\n text-transform: uppercase;\n\n color: rgba(217,217,217,0.45);\n}\n\n\/* logo *\/\n\n.logo-preview img {\n width: clamp(180px,24vw,280px);\n\n object-fit: contain;\n\n filter:\n drop-shadow(0 12px 30px rgba(0,0,0,0.35));\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* GRID BALANCE PERFECTO *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/* hace que ambas columnas tengan exactamente la misma altura *\/\n\n.design__grid {\n margin-top: 5rem;\n\n display: grid;\n grid-template-columns: 1.15fr 0.85fr;\n\n gap: 2rem;\n\n align-items: stretch;\n}\n\n\/* IMPORTANT\u00cdSIMO *\/\n\n.palette-showcase,\n.typo-showcase {\n height: 100%;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* PALETA FULL HEIGHT REDESIGN *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/* el bloque derecho ahora ocupa toda la altura *\/\n\n.palette-showcase {\n display: flex;\n flex-direction: column;\n}\n\n\/* stack ocupa todo el espacio disponible *\/\n\n.palette-stack {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n gap: 1rem;\n\n margin-top: 2rem;\n\n height: 100%;\n}\n\n\/* cada tarjeta crece autom\u00e1ticamente *\/\n\n.palette-card {\n flex: 1;\n\n position: relative;\n\n display: flex;\n flex-direction: column;\n\n justify-content: space-between;\n\n min-height: 110px;\n\n padding: 1.8rem;\n\n border-radius: 34px;\n\n overflow: hidden;\n\n transition:\n transform 0.35s ease,\n box-shadow 0.35s ease,\n filter 0.35s ease;\n}\n\n\/* hover elegante *\/\n\n.palette-card:hover {\n transform:\n translateX(8px)\n scale(1.015);\n\n box-shadow:\n 0 20px 45px rgba(0,0,0,0.35);\n\n filter: brightness(1.04);\n}\n\n\/* brillo premium *\/\n\n.palette-card::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n linear-gradient(\n 180deg,\n rgba(255,255,255,0.14),\n rgba(255,255,255,0.02) 30%,\n rgba(255,255,255,0)\n );\n\n pointer-events: none;\n}\n\n\/* HEX principal *\/\n\n.palette-hex {\n position: relative;\n z-index: 2;\n\n font-size: clamp(1.2rem,2vw,2.2rem);\n\n font-weight: 300;\n\n letter-spacing: 0.18em;\n\n text-transform: uppercase;\n\n line-height: 1;\n\n color: rgba(255,255,255,0.96);\n\n font-family: \"Barlow\", sans-serif;\n}\n\n\/* nombre abajo *\/\n\n.palette-name {\n position: relative;\n z-index: 2;\n\n align-self: flex-end;\n\n font-size: 0.72rem;\n\n letter-spacing: 0.32em;\n\n text-transform: uppercase;\n\n color: rgba(255,255,255,0.72);\n\n font-family: \"Barlow\", sans-serif;\n}\n\n\/* l\u00ednea decorativa *\/\n\n.palette-card::after {\n content: \"\";\n\n position: absolute;\n\n left: 1.8rem;\n right: 1.8rem;\n bottom: 3.1rem;\n\n height: 1px;\n\n background:\n linear-gradient(\n 90deg,\n rgba(255,255,255,0.28),\n rgba(255,255,255,0)\n );\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* COLORES *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.mahogany {\n background:\n linear-gradient(\n 135deg,\n #593723 0%,\n rgba(89,55,35,0.78) 100%\n );\n}\n\n.blush {\n background:\n linear-gradient(\n 135deg,\n #BF7D65 0%,\n rgba(191,125,101,0.74) 100%\n );\n}\n\n.terracotta {\n background:\n linear-gradient(\n 135deg,\n #8C493A 0%,\n rgba(140,73,58,0.76) 100%\n );\n}\n\n.espresso {\n background:\n linear-gradient(\n 135deg,\n #260D0A 0%,\n rgba(38,13,10,0.86) 100%\n );\n}\n\n.ash {\n background:\n linear-gradient(\n 135deg,\n #D9D9D9 0%,\n rgba(217,217,217,0.88) 100%\n );\n}\n\n\/* texto oscuro para ash *\/\n\n.ash .palette-hex,\n.ash .palette-name {\n color: #260D0A;\n}\n\n.ash::after {\n background:\n linear-gradient(\n 90deg,\n rgba(38,13,10,0.22),\n rgba(38,13,10,0)\n );\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* RESPONSIVE *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width:1100px) {\n\n .palette-card {\n min-height: 100px;\n }\n\n}\n\n@media (max-width:768px) {\n\n .palette-stack {\n gap: 0.8rem;\n }\n\n .palette-card {\n min-height: 90px;\n\n padding: 1.2rem;\n\n border-radius: 24px;\n }\n\n .palette-card::after {\n left: 1.2rem;\n right: 1.2rem;\n bottom: 2.5rem;\n }\n\n .palette-name {\n letter-spacing: 0.18em;\n }\n\n}\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* RESPONSIVE *\/\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 1100px) {\n\n .design__grid {\n grid-template-columns: 1fr;\n }\n\n}\n\n@media (max-width: 768px) {\n\n .design-block {\n padding: 1.3rem;\n border-radius: 28px;\n }\n\n .type-card,\n .palette-card {\n padding: 1.2rem;\n border-radius: 24px;\n }\n\n .type-info {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .palette-card {\n flex-direction: column;\n align-items: flex-start;\n gap: 0.7rem;\n }\n\n .palette-name {\n letter-spacing: 0.2em;\n }\n\n}\n\/* \u2500\u2500\u2500 REVISTA DIGITAL \u2500\u2500\u2500 *\/\n.revista { background: var(--mahogany); }\n.revista .section-title { color: var(--cream); }\n.revista .section-label { color: var(--blush); }\n.revista .section-label::before { background: var(--blush); }\n.revista-text { font-size: 0.9rem; font-weight: 300; color: rgba(217,217,217,0.6); margin-top: 1.2rem; max-width: 480px; }\n.revista-viewer { margin-top: 2rem; width: 100%; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }\n.revista-viewer iframe { width: 100%; height: 85vh; border: none; display: block; }\n.revista-actions { margin-top: 1.5rem; display: flex; justify-content: center; }\n.btn-revista { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.4rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500; color: var(--cream); border: 1px solid rgba(217,217,217,0.2); transition: all 0.3s ease; }\n.btn-revista:hover { background: rgba(217,217,217,0.08); border-color: rgba(217,217,217,0.35); }\n\n\/* \u2500\u2500\u2500 MAGAZINE FLIPSNACK \u2500\u2500\u2500 *\/\n.magazine-section { padding: 120px 8%; background: #ffffff; text-align: center; color: #111; }\n.magazine-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.6; margin-bottom: 10px; }\n.magazine-title { font-size: clamp(32px, 4vw, 56px); line-height: 1.1; margin-bottom: 20px; color: #111; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; }\n.magazine-text { max-width: 600px; margin: 0 auto 60px; opacity: 0.7; color: #333; }\n.magazine-viewer { max-width: 1100px; margin: 0 auto; }\n.magazine-frame { position: relative; width: 100%; padding-top: 62.5%; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.08); background: #fff; }\n.magazine-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }\n.magazine-actions { margin-top: 25px; }\n.magazine-actions a { display: inline-block; padding: 12px 22px; border: 1px solid #ddd; border-radius: 999px; color: #111; transition: all 0.3s ease; background: white; }\n.magazine-actions a:hover { background: #111; color: white; }\n\n\/* \u2500\u2500\u2500 CTA \u2500\u2500\u2500 *\/\n.cta-section { background: var(--espresso); text-align: center; padding: clamp(5rem,10vw,9rem) 8vw; position: relative; overflow: hidden; }\n.cta-section::before { content: 'ORIGEN'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--f-display); font-size: clamp(6rem,20vw,20rem); font-weight: 700; letter-spacing: -0.02em; color: rgba(89,55,35,0.25); white-space: nowrap; pointer-events: none; }\n.cta-section .section-label { justify-content: center; }\n.cta-section .section-label::before { display: none; }\n.cta-title { font-family: var(--f-display); font-size: clamp(2.5rem,5vw,5rem); font-weight: 700; line-height: 0.95; text-transform: uppercase; color: var(--cream); margin: 1rem 0 2rem; position: relative; }\n.cta-title em { font-style: italic; font-weight: 200; color: var(--blush); }\n.cta-body { font-size: 1rem; font-weight: 300; line-height: 1.75; color: rgba(217,217,217,0.75); max-width: 500px; margin: 0 auto 3rem; position: relative; }\n.cta-btns { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; position: relative; }\n.btn-light { font-family: var(--f-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--espresso); background: var(--cream); padding: 1rem 2.5rem; border-radius: 2px; transition: transform 0.2s var(--ease-snap), background 0.2s; }\n.btn-light:hover { transform: translateY(-2px); background: var(--white); }\n.btn-outline { font-family: var(--f-display); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream); border: 1px solid rgba(217,217,217,0.4); padding: 1rem 2.5rem; border-radius: 2px; transition: border-color 0.2s, transform 0.2s; }\n.btn-outline:hover { border-color: var(--blush); transform: translateY(-2px); }\n\n\/* \u2500\u2500\u2500 AUTOR\u00cdA \u2500\u2500\u2500 *\/\n.autoria { background: var(--cream); }\n.autoria__header { margin-bottom: 5rem; }\n.autoria__intro { font-size: 1.05rem; font-weight: 300; line-height: 1.85; color: var(--mahogany); max-width: 560px; margin-top: 2rem; }\n.autoria__container { display: flex; justify-content: center; margin-top: 60px; }\n.author-card--featured { width: min(900px, 92%); padding: 50px; border-radius: 24px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.08); }\n.author-card__top { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }\n.author-card__avatar { width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(140,73,58,0.2); overflow: hidden; flex-shrink: 0; background: var(--cream); display: flex; align-items: center; justify-content: center; }\n.author-card__name { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; color: var(--espresso); line-height: 1; }\n.author-card__roles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }\n.author-card__roles span { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: #f2f2f2; }\n.author-card__bio { font-size: 0.9rem; font-weight: 300; line-height: 1.8; color: var(--mahogany); }\n.author-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.8rem; }\n.author-tag { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blush); background: rgba(191,125,101,0.12); padding: 0.3rem 0.8rem; border-radius: 20px; }\n\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\nfooter { background: var(--espresso); padding: 4rem 8vw 2.5rem; }\n.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(217,217,217,0.1); flex-wrap: wrap; }\n.footer__brand { font-family: var(--f-display); font-size: 2rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); }\n.footer__brand span { color: var(--blush); }\n.footer__tagline { font-size: 0.8rem; font-weight: 300; color: rgba(217,217,217,0.45); margin-top: 0.5rem; letter-spacing: 0.08em; }\n.footer__col h4 { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--blush); margin-bottom: 1.2rem; }\n.footer__col ul { list-style: none; }\n.footer__col li + li { margin-top: 0.7rem; }\n.footer__col a { font-size: 0.85rem; font-weight: 300; color: rgba(217,217,217,0.55); transition: color 0.2s; }\n.footer__col a:hover { color: var(--cream); }\n.footer__bottom { padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }\n.footer__copy { font-size: 0.75rem; font-weight: 300; color: rgba(217,217,217,0.3); letter-spacing: 0.06em; }\n\n\/* \u2500\u2500\u2500 ANIMACIONES BASE \u2500\u2500\u2500 *\/\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(28px); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes marquee {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n}\n@keyframes float {\n from { transform: translateY(100vh) scale(0); opacity: 0; }\n to { transform: translateY(-10vh) scale(1); opacity: 0.6; }\n}\n@keyframes floatHero {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-12px); }\n}\n\n\/* \u2500\u2500\u2500 SCROLL REVEAL \u2014 sistema unificado \u2500\u2500\u2500 *\/\n\n\/*\n Tres variantes de entrada:\n .sr \u2192 fade up (general)\n .sr-left \u2192 slide desde la izquierda\n .sr-right \u2192 slide desde la derecha\n .sr-scale \u2192 escala desde 0.92\n .sr-line \u2192 para l\u00edneas\/divisores que crecen en ancho\n Delays opcionales: .sr-d1 .sr-d2 .sr-d3 .sr-d4\n*\/\n\n.sr,\n.sr-left,\n.sr-right,\n.sr-scale {\n opacity: 0;\n will-change: transform, opacity;\n}\n\n.sr { transform: translateY(40px); }\n.sr-left { transform: translateX(-48px); }\n.sr-right { transform: translateX(48px); }\n.sr-scale { transform: scale(0.92) translateY(20px); }\n\n\/* Estado visible *\/\n.sr.in, .sr-left.in, .sr-right.in, .sr-scale.in {\n opacity: 1;\n transform: none;\n transition:\n opacity 0.75s var(--ease-out),\n transform 0.75s var(--ease-out);\n}\n\n\/* Delays escalonados *\/\n.sr-d1.in, .sr-left.sr-d1.in, .sr-right.sr-d1.in, .sr-scale.sr-d1.in { transition-delay: 0.1s; }\n.sr-d2.in, .sr-left.sr-d2.in, .sr-right.sr-d2.in, .sr-scale.sr-d2.in { transition-delay: 0.2s; }\n.sr-d3.in, .sr-left.sr-d3.in, .sr-right.sr-d3.in, .sr-scale.sr-d3.in { transition-delay: 0.3s; }\n.sr-d4.in, .sr-left.sr-d4.in, .sr-right.sr-d4.in, .sr-scale.sr-d4.in { transition-delay: 0.4s; }\n.sr-d5.in, .sr-left.sr-d5.in, .sr-right.sr-d5.in, .sr-scale.sr-d5.in { transition-delay: 0.5s; }\n\n\/* L\u00ednea decorativa que se expande *\/\n.sr-line {\n width: 0;\n height: 1px;\n background: currentColor;\n transition: width 0.9s var(--ease-out);\n}\n.sr-line.in { width: 100%; }\n\n\/* Contador animado *\/\n.count-up { display: inline-block; }\n\n\/* Parallax leve para im\u00e1genes *\/\n.parallax-img { will-change: transform; }\n\n\/* \u2500\u2500\u2500 PROGRESS BAR DE LECTURA \u2500\u2500\u2500 *\/\n#read-progress {\n position: fixed;\n top: 0; left: 0;\n height: 2px;\n width: 0%;\n background: var(--blush);\n z-index: 200;\n transition: width 0.1s linear;\n}\n\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 1100px) {\n .proceso__steps { grid-template-columns: repeat(3, 1fr); }\n .marca__versions { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 900px) {\n .hero { grid-template-columns: 1fr; min-height: auto; }\n .hero__left { padding: 5rem 6vw 4rem; }\n .hero__right { min-height: 60vw; }\n .idea { grid-template-columns: 1fr; }\n .idea__visual { display: none; }\n .about { grid-template-columns: 1fr; }\n .about__visual { display: none; }\n .features__grid { grid-template-columns: 1fr; }\n .ref-grid { grid-template-columns: 1fr 1fr; }\n .proceso__steps { grid-template-columns: repeat(2, 1fr); }\n .design__grid { grid-template-columns: 1fr; }\n .design-block--tall { grid-row: span 1; }\n .nav__links, .nav__cta { display: none; }\n .nav__hamburger { display: flex; }\n .footer__top { flex-direction: column; }\n .marca__versions { grid-template-columns: 1fr 1fr; }\n}\n@media (max-width: 600px) {\n .hero__title { font-size: 3rem; }\n .about__stats { grid-template-columns: 1fr; }\n .features__header { flex-direction: column; }\n .ref-grid { grid-template-columns: 1fr; }\n .proceso__steps { grid-template-columns: 1fr 1fr; }\n}\n\n.nav__logo{\n display:flex;\n align-items:center;\n}\n\n.nav__logo-img{\n width:auto;\n height:auto;\n\n max-height:48px; \/* tama\u00f1o ideal para el nav *\/\n max-width:180px;\n\n object-fit:contain;\n display:block;\n}\n\n.footer__brand{\n display:flex;\n align-items:center;\n}\n\n.footer__logo-img{\n width:auto;\n height:auto;\n\n max-height:60px; \/* ajusta tama\u00f1o *\/\n max-width:220px;\n\n object-fit:contain;\n display:block;\n}\n.hero-image{\n position: relative;\n overflow: hidden;\n}\n\n.hero-image img{\n width: 100%;\n height: auto;\n display: block;\n object-fit: contain;\n\n transform: translateY(0);\n transition: transform 0.1s linear;\n will-change: transform;\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- Barra de progreso de lectura -->\n<div id=\"read-progress\"><\/div>\n\n<!-- CURSOR -->\n<div class=\"cursor\" id=\"cursor\">\n <div class=\"cursor__dot\" id=\"cursorDot\"><\/div>\n <div class=\"cursor__ring\" id=\"cursorRing\"><\/div>\n<\/div>\n\n<!-- NAV -->\n<nav id=\"mainNav\">\n\n<div class=\"nav__logo\">\n <img decoding=\"async\" \n src=\"https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/04\/Logo-sin-fondo--scaled.png\" \n alt=\"Origen Logo\"\n class=\"nav__logo-img\"\n >\n<\/div>\n\n <ul class=\"nav__links\">\n <li><a href=\"#idea\">La idea<\/a><\/li>\n <li><a href=\"#referentes\">Referentes<\/a><\/li>\n <li><a href=\"#proceso\">Proceso<\/a><\/li>\n <li><a href=\"#revista\">Revista<\/a><\/li>\n <li><a href=\"#autoria\">Autor\u00eda<\/a><\/li>\n <\/ul>\n\n <a href=\"#revista\" class=\"nav__cta\">Leer ahora<\/a>\n\n <div class=\"nav__hamburger\" id=\"hamburger\">\n <span><\/span><span><\/span><span><\/span>\n <\/div>\n\n<\/nav>\n\n<!-- HERO -->\n<section class=\"hero\">\n <div class=\"hero__left\">\n <div class=\"hero__eyebrow\">Edici\u00f3n 01 \u00b7 2026<\/div>\n <h1 class=\"hero__title\">El <em>Origen<\/em><br>del<br>Caf\u00e9<\/h1>\n <p class=\"hero__body\">Una <strong>revista digital<\/strong> que traza el viaje del <strong>grano<\/strong> desde las tierras altas de Etiop\u00eda hasta la taza que sostiene el mundo. <strong>Historia<\/strong>, cultura, sabor.<\/p>\n <div class=\"hero__actions\">\n <a href=\"#revista\" class=\"btn-primary\"><span>Explorar revista<\/span><\/a>\n <a href=\"#idea\" class=\"btn-ghost\">\n Descubrir\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"hero__right\">\n <div class=\"hero__bg-dots\" id=\"bgDots\"><\/div>\n <div class=\"hero__right-inner\">\n <div class=\"hero-image\">\n <img decoding=\"async\" src=\"https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/lkogo-marron-isn-.png\" alt=\"Logo Origen Caf\u00e9\">\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n<!-- \u2500\u2500\u2500 MARQUEE \u2500\u2500\u2500 -->\n\n<div class=\"marquee-strip\">\n\n <div class=\"marquee-track\">\n\n <!-- BLOQUE 1 -->\n <div class=\"marquee-item\">Etiop\u00eda<\/div>\n <div class=\"marquee-item\">Excelsa<\/div>\n <div class=\"marquee-item\">Lib\u00e9rica<\/div>\n <div class=\"marquee-item\">Robusta<\/div>\n <div class=\"marquee-item\">Ar\u00e1bica<\/div>\n\n <!-- BLOQUE 2 -->\n <div class=\"marquee-item\">Etiop\u00eda<\/div>\n <div class=\"marquee-item\">Excelsa<\/div>\n <div class=\"marquee-item\">Lib\u00e9rica<\/div>\n <div class=\"marquee-item\">Robusta<\/div>\n <div class=\"marquee-item\">Ar\u00e1bica<\/div>\n\n <!-- DUPLICADO PARA LOOP INFINITO -->\n <div class=\"marquee-item\">Etiop\u00eda<\/div>\n <div class=\"marquee-item\">Excelsa<\/div>\n <div class=\"marquee-item\">Lib\u00e9rica<\/div>\n <div class=\"marquee-item\">Robusta<\/div>\n <div class=\"marquee-item\">Ar\u00e1bica<\/div>\n\n <div class=\"marquee-item\">Etiop\u00eda<\/div>\n <div class=\"marquee-item\">Excelsa<\/div>\n <div class=\"marquee-item\">Lib\u00e9rica<\/div>\n <div class=\"marquee-item\">Robusta<\/div>\n <div class=\"marquee-item\">Ar\u00e1bica<\/div>\n\n <\/div>\n\n<\/div>\n<!-- IDEA -->\n<section class=\"idea\" id=\"idea\">\n <div class=\"idea__text\">\n <div class=\"section-label sr\">La idea<\/div>\n <h2 class=\"section-title sr sr-d1\">\u00bfQu\u00e9 es <em>Cafeto <\/em>?<\/h2>\n <p class=\"sr sr-d2\">Cafeto Origen es una <strong>revista digital<\/strong> sobre el caf\u00e9 como objeto <strong>cultural<\/strong>, hist\u00f3rico <strong>y<\/strong> sensorial. Una publicaci\u00f3n donde el <strong>dise\u00f1o<\/strong> editorial sirve de veh\u00edculo para explorar el grano m\u00e1s cotizado del mundo.<\/p>\n <p class=\"sr sr-d3\" style=\"margin-top:1.2rem\">El proyecto naci\u00f3 de la pregunta: \u00bfc\u00f3mo contar la historia del caf\u00e9 con la misma profundidad y belleza con la que se disfruta una buena taza? La respuesta: 16 p\u00e1ginas de narrativa visual, tipograf\u00eda cuidada y contenido riguroso.<\/p>\n <\/div>\n <div class=\"idea__visual sr-right\">\n <img decoding=\"async\" src=\"https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/cafeto.png\" alt=\"Cafeto Revista\" class=\"idea__image\">\n <\/div>\n<\/section>\n\n<!-- ABOUT -->\n<section class=\"about\" id=\"about\">\n <div class=\"about__text\">\n <div class=\"section-label sr\">La revista<\/div>\n <h2 class=\"section-title sr sr-d1\">Una historia <em>milenaria<\/em> contada hoy<\/h2>\n <p class=\"sr sr-d2\">Origen no es s\u00f3lo una publicaci\u00f3n sobre caf\u00e9, es una exploraci\u00f3n visual y narrativa. <br>Cada p\u00e1gina est\u00e1 dise\u00f1ada con la misma meticulosidad que un maestro tostador dedica a su blend.<\/p>\n \n <div class=\"about__stats\">\n <div class=\"stat sr sr-d2\">\n <div class=\"stat__num count-up\" data-target=\"16\">0<\/div>\n <div class=\"stat__label\">P\u00e1ginas<\/div>\n <\/div>\n <div class=\"stat sr sr-d3\">\n <div class=\"stat__num count-up\" data-target=\"1\">0<\/div>\n <div class=\"stat__label\">Edici\u00f3n<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"about__visual sr-right\">\n <div class=\"about__bg-card parallax-img\" data-speed=\"0.04\"><\/div>\n <div class=\"about__img-card\">\n <img decoding=\"async\" src=\"https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Cafeto-Revista-1.jpg\" alt=\"Revista Caf\u00e9\" class=\"about__image\">\n <\/div>\n <\/div>\n<\/section>\n\n<!-- REFERENTES -->\n<section class=\"referentes\" id=\"referentes\">\n <div class=\"sr\">\n <div class=\"section-label\" style=\"color:var(--blush)\">Referentes<\/div>\n <h2 class=\"section-title\" style=\"color:var(--cream)\">Fuentes de <em>inspiraci\u00f3n<\/em><\/h2>\n <\/div>\n <div class=\"ref-grid\">\n <div class=\"ref-card sr\">\n <div class=\"ref-card__mark\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg><\/div>\n <div class=\"ref-card__cat\">Dise\u00f1o editorial<\/div>\n <div class=\"ref-card__name\">Kinfolk Magazine<\/div>\n <div class=\"ref-card__desc\">Referente principal en composici\u00f3n tipogr\u00e1fica, ret\u00edcula editorial y el uso del espacio en blanco como elemento de dise\u00f1o. Inspir\u00f3 la jerarqu\u00eda visual y el ritmo de lectura.<\/div>\n <a href=\"https:\/\/www.kinfolk.com\" target=\"_blank\" class=\"ref-card__link\">Visitar <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <div class=\"ref-card sr sr-d1\">\n <div class=\"ref-card__mark\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><path d=\"M2 12h20\"\/><\/svg><\/div>\n <div class=\"ref-card__cat\">Periodismo cultural<\/div>\n <div class=\"ref-card__name\">Monocle Magazine<\/div>\n <div class=\"ref-card__desc\">Modelo de publicaci\u00f3n cultural de referencia global. Aport\u00f3 criterio sobre c\u00f3mo estructurar secciones tem\u00e1ticas, combinar fotograf\u00eda y texto, y construir una identidad de marca editorial consistente.<\/div>\n <a href=\"https:\/\/www.monocle.com\" target=\"_blank\" class=\"ref-card__link\">Visitar <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <div class=\"ref-card sr sr-d2\">\n <div class=\"ref-card__mark\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"\/><line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\"\/><\/svg><\/div>\n <div class=\"ref-card__cat\">Est\u00e9tica minimalista<\/div>\n <div class=\"ref-card__name\">Cereal Magazine<\/div>\n <div class=\"ref-card__desc\">Gu\u00eda est\u00e9tica para el tratamiento minimalista del color y la fotograf\u00eda. Influy\u00f3 en la paleta crom\u00e1tica de la revista y en el enfoque contemplativo de las im\u00e1genes de producto.<\/div>\n <a href=\"https:\/\/readcereal.com\" target=\"_blank\" class=\"ref-card__link\">Visitar <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <div class=\"ref-card sr\">\n <div class=\"ref-card__mark\"><svg viewBox=\"0 0 24 24\"><polygon points=\"3 11 22 2 13 21 11 13 3 11\"\/><\/svg><\/div>\n <div class=\"ref-card__cat\">Narrativa geogr\u00e1fica<\/div>\n <div class=\"ref-card__name\">National Geographic<\/div>\n <div class=\"ref-card__desc\">Referente ineludible para la narraci\u00f3n de historias con base geogr\u00e1fica y cient\u00edfica. Inspir\u00f3 la secci\u00f3n de mapas cafeteros y el enfoque period\u00edstico de los art\u00edculos de origen.<\/div>\n <a href=\"https:\/\/www.nationalgeographic.com\" target=\"_blank\" class=\"ref-card__link\">Visitar <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <div class=\"ref-card sr sr-d1\">\n <div class=\"ref-card__mark\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 8h1a4 4 0 0 1 0 8h-1\"\/><path d=\"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z\"\/><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"4\"\/><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\"\/><line x1=\"14\" y1=\"1\" x2=\"14\" y2=\"4\"\/><\/svg><\/div>\n <div class=\"ref-card__cat\">Tem\u00e1tica especializada<\/div>\n <div class=\"ref-card__name\">Standart Magazine<\/div>\n <div class=\"ref-card__desc\">Publicaci\u00f3n especializada en caf\u00e9 de tercera ola, esencial como referente tem\u00e1tico. Demostr\u00f3 c\u00f3mo tratar el caf\u00e9 con profundidad cultural sin perder el rigor t\u00e9cnico ni la accesibilidad.<\/div>\n <a href=\"https:\/\/standartmag.com\" target=\"_blank\" class=\"ref-card__link\">Visitar <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <div class=\"ref-card sr sr-d2\">\n <div class=\"ref-card__mark\"><svg viewBox=\"0 0 24 24\"><polyline points=\"12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3\"\/><line x1=\"12\" y1=\"12\" x2=\"20\" y2=\"7.5\"\/><line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\"\/><line x1=\"12\" y1=\"12\" x2=\"4\" y2=\"7.5\"\/><\/svg><\/div>\n <div class=\"ref-card__cat\">Identidad de marca<\/div>\n <div class=\"ref-card__name\">Stumptown Coffee<\/div>\n <div class=\"ref-card__desc\">Referente de identidad visual para una marca de caf\u00e9 de tercera ola. Influy\u00f3 en el desarrollo del sistema de marca de Origen: la relaci\u00f3n entre tipograf\u00eda, color y tono de comunicaci\u00f3n.<\/div>\n <a href=\"https:\/\/www.stumptowncoffee.com\" target=\"_blank\" class=\"ref-card__link\">Visitar <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- FEATURES -->\n<section class=\"features\" id=\"features\">\n <div class=\"features__header\">\n <div class=\"sr\">\n <div class=\"section-label\">Contenido<\/div>\n <h2 class=\"section-title\">Lo que encontrar\u00e1s<br><em>dentro<\/em><\/h2>\n <\/div>\n <p class=\"features__lead sr sr-right\">Cada secci\u00f3n de la revista est\u00e1 cuidadosamente curada para llevar al lector desde el origen hasta la taza.<\/p>\n <\/div>\n <div class=\"features__grid\">\n <div class=\"feature-card sr\">\n <div class=\"fc__num\">01<\/div>\n <div class=\"fc__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8 2 4 5 4 9c0 5 8 13 8 13s8-8 8-13c0-4-4-7-8-7zm0 9a2 2 0 110-4 2 2 0 010 4z\"\/><\/svg><\/div>\n <div class=\"fc__title\">Cintur\u00f3n del caf\u00e9<\/div>\n <div class=\"fc__body\">Mapa detallado de las principales regiones productoras del mundo y la franja de producci\u00f3n.<\/div>\n <\/div>\n <div class=\"feature-card sr sr-d1\">\n <div class=\"fc__num\">02<\/div>\n <div class=\"fc__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg><\/div>\n <div class=\"fc__title\">Especies principales<\/div>\n <div class=\"fc__body\">Las principales especies de caf\u00e9 ofrecen perfiles \u00fanicos de sabor, aroma e intensidad que definen cada taza.<\/div>\n <\/div>\n <div class=\"feature-card sr sr-d2\">\n <div class=\"fc__num\">03<\/div>\n <div class=\"fc__icon\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l3 3\"\/><\/svg><\/div>\n <div class=\"fc__title\">Proceso & factores<\/div>\n <div class=\"fc__body\">El clima, la altitud y el proceso de cultivo influyen directamente en el sabor, aroma y calidad final del caf\u00e9.<\/div>\n <\/div>\n <div class=\"feature-card sr sr-d1\">\n <div class=\"fc__num\">04<\/div>\n <div class=\"fc__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><\/svg><\/div>\n <div class=\"fc__title\">Tueste<\/div>\n <div class=\"fc__body\">El tipo de tueste define el car\u00e1cter del caf\u00e9, resaltando distintas notas, intensidades y matices en cada grano.<\/div>\n <\/div>\n <div class=\"feature-card sr sr-d2\">\n <div class=\"fc__num\">05<\/div>\n <div class=\"fc__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z\"\/><\/svg><\/div>\n <div class=\"fc__title\">Entrevista<\/div>\n <div class=\"fc__body\">Una entrevista con el barista Dalle Harris revela su visi\u00f3n del caf\u00e9 como un oficio de precisi\u00f3n y sensibilidad.<\/div>\n <\/div>\n <div class=\"feature-card sr sr-d3\">\n <div class=\"fc__num\">06<\/div>\n <div class=\"fc__icon\"><svg viewBox=\"0 0 24 24\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg><\/div>\n <div class=\"fc__title\">Tipos de molienda<\/div>\n <div class=\"fc__body\">Los tipos de molienda determinan la extracci\u00f3n del caf\u00e9, adapt\u00e1ndose a cada m\u00e9todo de preparaci\u00f3n.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- PROCESO -->\n<section class=\"proceso\" id=\"proceso\">\n <div class=\"proceso__header\">\n <div class=\"sr\">\n <div class=\"section-label\">Proceso de trabajo<\/div>\n <h2 class=\"section-title\">Del boceto a la<br><em>p\u00e1gina<\/em><\/h2>\n <\/div>\n <p class=\"proceso__intro sr sr-right\">La evoluci\u00f3n de la revista y de la identidad de marca: desde los primeros prototipos en papel hasta las p\u00e1ginas maquetadas finales.<\/p>\n <\/div>\n\n <div class=\"proceso__tabs sr\">\n <button class=\"tab-btn active\" data-tab=\"fanzine\">Revista<\/button>\n <button class=\"tab-btn\" data-tab=\"marca\">Tipograf\u00eda<\/button>\n <\/div>\n\n <div class=\"proceso__panel active\" id=\"panel-fanzine\">\n <div class=\"proceso__steps\">\n <div class=\"step-card sr\">\n <div class=\"step-card__bg\" style=\"background-image:url('https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/1.jpg')\"><\/div>\n \n <div class=\"step-card__label\"><div class=\"step-card__title\">Prototipo en papel<\/div><\/div>\n <\/div>\n <div class=\"step-card sr sr-d1\">\n <div class=\"step-card__bg\" style=\"background-image:url('https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/6.jpg')\"><\/div>\n \n <\/div>\n <div class=\"step-card sr sr-d2\">\n <div class=\"step-card__bg\" style=\"background-image:url('https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/5-1.jpg')\"><\/div>\n \n <\/div>\n <div class=\"step-card sr sr-d3\">\n <div class=\"step-card__bg\" style=\"background-image:url('https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/3-1.jpg')\"><\/div>\n \n \n <\/div>\n <div class=\"step-card sr sr-d4\">\n <div class=\"step-card__bg\" style=\"background-image:url('https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/3.jpg')\"><\/div>\n \n \n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"proceso__panel\" id=\"panel-marca\">\n <div class=\"marca__versions\">\n <div class=\"marca-card sr\">\n <div class=\"marca-card__visual\">\n <svg viewBox=\"0 0 80 80\" width=\"80\" height=\"80\"><text x=\"40\" y=\"52\" text-anchor=\"middle\" font-family=\"'Barlow Condensed',sans-serif\" font-weight=\"700\" font-size=\"32\" fill=\"#593723\">Aa<\/text><\/svg>\n <\/div>\n <div class=\"marca-card__badge\">Display<\/div>\n <div class=\"marca-card__name\">Barlow Condensed<\/div>\n <div class=\"marca-card__desc\">Tipograf\u00eda principal para t\u00edtulos y elementos de display editorial.<\/div>\n <\/div>\n <div class=\"marca-card sr sr-d1\">\n <div class=\"marca-card__visual\">\n <svg viewBox=\"0 0 80 80\" width=\"80\" height=\"80\"><text x=\"40\" y=\"52\" text-anchor=\"middle\" font-family=\"'Barlow',sans-serif\" font-weight=\"300\" font-size=\"28\" fill=\"#8C493A\">Aa<\/text><\/svg>\n <\/div>\n <div class=\"marca-card__badge\">Body<\/div>\n <div class=\"marca-card__name\">Barlow Light<\/div>\n <div class=\"marca-card__desc\">Tipograf\u00eda de cuerpo para texto corrido y p\u00e1rrafos largos.<\/div>\n <\/div>\n <div class=\"marca-card sr sr-d2\">\n <div class=\"marca-card__visual\">\n <svg viewBox=\"0 0 80 80\" width=\"80\" height=\"80\"><text x=\"40\" y=\"52\" text-anchor=\"middle\" font-family=\"'Barlow',sans-serif\" font-weight=\"500\" font-size=\"24\" fill=\"#BF7D65\" letter-spacing=\"4\">Aa<\/text><\/svg>\n <\/div>\n <div class=\"marca-card__badge\">Caption<\/div>\n <div class=\"marca-card__name\">Barlow Medium<\/div>\n <div class=\"marca-card__desc\">Para etiquetas, pies de foto y texto de apoyo con espaciado amplio.<\/div>\n <\/div>\n <div class=\"marca-card sr sr-d3\">\n <div class=\"marca-card__visual\">\n <svg viewBox=\"0 0 80 80\" width=\"80\" height=\"80\"><text x=\"40\" y=\"52\" text-anchor=\"middle\" font-family=\"'Barlow',sans-serif\" font-style=\"italic\" font-weight=\"200\" font-size=\"30\" fill=\"#260D0A\">Aa<\/text><\/svg>\n <\/div>\n <div class=\"marca-card__badge\">Accent<\/div>\n <div class=\"marca-card__name\">Barlow Italic<\/div>\n <div class=\"marca-card__desc\">Contraste tipogr\u00e1fico para t\u00edtulos con \u00e9nfasis y pullquotes.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- DESIGN SHOWCASE -->\n<section class=\"design\" id=\"design\">\n\n <div class=\"sr\">\n <div class=\"section-label\" style=\"color:var(--blush)\">\n Sistema de dise\u00f1o\n <\/div>\n\n <h2 class=\"section-title\">\n Tipograf\u00eda,<br>\n color <em>&<\/em> forma\n <\/h2>\n <\/div>\n\n <div class=\"design__grid\">\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <!-- IZQUIERDA \u00b7 TIPOGRAF\u00cdA -->\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n\n <div class=\"design-block typo-showcase sr sr-left\">\n\n <div class=\"section-label\">\n Tipograf\u00eda de marca\n <\/div>\n\n <div class=\"typo-stack\">\n\n <!-- LOGO -->\n\n <div class=\"type-card type-card--logo\">\n\n <div class=\"type-info\">\n <span class=\"type-label\">\n Primary Logo\n <\/span>\n\n <span class=\"type-role\">\n Brand Identity\n <\/span>\n <\/div>\n\n <div class=\"type-preview logo-preview\">\n <img decoding=\"async\"\n src=\"https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/logblanco-scaled-e1778142992605.png\"\n alt=\"Cafeto\"\n >\n <\/div>\n\n <\/div>\n\n <!-- SECONDARY -->\n\n <div class=\"type-card\">\n\n <div class=\"type-info\">\n <span class=\"type-label\">\n Secondary Font\n <\/span>\n\n <span class=\"type-role\">\n Barlow Condensed \u00b7 600\n <\/span>\n <\/div>\n\n <div\n class=\"type-preview\"\n style=\"\n font-family:'Barlow Condensed',sans-serif;\n font-weight:600;\n font-size:clamp(1.8rem,3vw,3rem);\n letter-spacing:0.22em;\n text-transform:uppercase;\n color:var(--blush);\n \"\n >\n Origen\n <\/div>\n\n <\/div>\n\n <!-- BODY -->\n\n <div class=\"type-card\">\n\n <div class=\"type-info\">\n <span class=\"type-label\">\n Body System\n <\/span>\n\n <span class=\"type-role\">\n Barlow \u00b7 300\n <\/span>\n <\/div>\n\n <div\n class=\"type-preview\"\n style=\"\n font-family:'Barlow',sans-serif;\n font-weight:300;\n font-size:1rem;\n line-height:1.9;\n color:var(--ash);\n max-width:420px;\n \"\n >\n Sistema tipogr\u00e1fico que equilibra elegancia editorial\n con car\u00e1cter org\u00e1nico inspirado en el caf\u00e9 de origen.\n <\/div>\n\n <\/div>\n\n <!-- CAPTION -->\n\n <div class=\"type-card\">\n\n <div class=\"type-info\">\n <span class=\"type-label\">\n Caption Style\n <\/span>\n\n <span class=\"type-role\">\n Barlow \u00b7 500\n <\/span>\n <\/div>\n\n <div\n class=\"type-preview\"\n style=\"\n font-family:'Barlow',sans-serif;\n font-weight:500;\n font-size:0.72rem;\n letter-spacing:0.28em;\n text-transform:uppercase;\n color:var(--blush);\n \"\n >\n Cafeto \u00b7 Origen visual system \u00b7 Editorial identity\n <\/div>\n\n <\/div>\n\n <!-- DISPLAY -->\n\n <div class=\"type-card\">\n\n <div class=\"type-info\">\n <span class=\"type-label\">\n Display Heading\n <\/span>\n\n <span class=\"type-role\">\n Barlow Condensed \u00b7 600\n <\/span>\n <\/div>\n\n <div\n class=\"type-preview\"\n style=\"\n font-family:'Barlow Condensed',sans-serif;\n font-weight:600;\n font-size:clamp(1.1rem,2vw,1.8rem);\n letter-spacing:0.08em;\n text-transform:uppercase;\n color:var(--cream);\n \"\n >\n El caf\u00e9 como identidad visual\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <!-- DERECHA \u00b7 PALETA -->\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n\n <div class=\"design-block palette-showcase sr sr-right\">\n\n <div class=\"section-label\">\n Paleta crom\u00e1tica\n <\/div>\n\n <div class=\"palette-stack\">\n\n <div class=\"palette-card mahogany\">\n <span class=\"palette-hex\">#593723<\/span>\n <span class=\"palette-name\">Mahogany<\/span>\n <\/div>\n\n <div class=\"palette-card blush\">\n <span class=\"palette-hex\">#BF7D65<\/span>\n <span class=\"palette-name\">Blush<\/span>\n <\/div>\n\n <div class=\"palette-card terracotta\">\n <span class=\"palette-hex\">#8C493A<\/span>\n <span class=\"palette-name\">Terracotta<\/span>\n <\/div>\n\n <div class=\"palette-card espresso\">\n <span class=\"palette-hex\">#260D0A<\/span>\n <span class=\"palette-name\">Espresso<\/span>\n <\/div>\n\n <div class=\"palette-card ash\">\n <span class=\"palette-hex\">#D9D9D9<\/span>\n <span class=\"palette-name\">Ash<\/span>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n<\/section>\n<!-- REVISTA DIGITAL -->\n<section class=\"revista\" id=\"revista\">\n <div class=\"sr\">\n <div class=\"section-label\">Revista digital<\/div>\n <h2 class=\"section-title\" style=\"color:var(--cream)\">Lee la <em>edici\u00f3n<\/em><br>completa<\/h2>\n <\/div>\n <p class=\"sr sr-d1 revista-text\">Navega por las p\u00e1ginas de la primera edici\u00f3n de Origen y descubre la experiencia completa en formato digital interactivo.<\/p>\n <div class=\"revista-viewer sr-scale sr-d2\">\n <iframe src=\"https:\/\/indd.adobe.com\/view\/a37c249e-af42-4eba-a06e-1b2ab2abbc19\" loading=\"lazy\" frameborder=\"0\" allowfullscreen><\/iframe>\n <\/div>\n <div class=\"revista-actions sr sr-d3\">\n <a href=\"https:\/\/indd.adobe.com\/view\/a37c249e-af42-4eba-a06e-1b2ab2abbc19\" class=\"btn-revista\">Abrir en pantalla completa<\/a>\n <\/div>\n<\/section>\n\n<!-- CTA -->\n<section class=\"cta-section\" id=\"cta\">\n <div class=\"section-label sr\">Disponible ahora<\/div>\n <h2 class=\"cta-title sr sr-d1\">L\u00e9ela.<br><em>Si\u00e9ntela.<\/em><\/h2>\n <p class=\"cta-body sr sr-d2\">La primera edici\u00f3n de Origen ya est\u00e1 disponible en formato digital. 16 p\u00e1ginas de historia, dise\u00f1o y cultura del caf\u00e9.<\/p>\n <div class=\"cta-btns sr sr-d3\">\n <a href=\"#revista\" class=\"btn-light\">Leer gratis<\/a>\n <a href=\"#\" class=\"btn-outline\">Descarga PDF<\/a>\n <\/div>\n<\/section>\n\n<!-- FLIPSNACK VIEWER -->\n<section class=\"magazine-section\" id=\"magazine\">\n <div class=\"sr\">\n <div class=\"magazine-label\">Revista<\/div>\n <h2 class=\"magazine-title\">Lee la <em>edici\u00f3n<\/em><br>completa<\/h2>\n <\/div>\n <p class=\"sr sr-d1 magazine-text\">Explora la primera edici\u00f3n de Origen en formato revista. Una experiencia editorial completa directamente desde el navegador.<\/p>\n <div class=\"magazine-viewer sr-scale sr-d2\">\n <div class=\"magazine-frame\">\n <iframe src=\"https:\/\/player.flipsnack.com?hash=NkQ5REU4N0E5RjcrMWhmd21pY3Z4bg==\" loading=\"lazy\" frameborder=\"0\" scrolling=\"no\" allowfullscreen allow=\"autoplay; clipboard-read; clipboard-write\"><\/iframe>\n <\/div>\n <\/div>\n <div class=\"magazine-actions sr sr-d3\">\n <a href=\"https:\/\/player.flipsnack.com?hash=NkQ5REU4N0E5RjcrMWhmd21pY3Z4bg==\" target=\"_blank\">Abrir en pantalla completa<\/a>\n <\/div>\n<\/section>\n\n<!-- AUTOR\u00cdA -->\n<section class=\"autoria\" id=\"autoria\">\n <div class=\"autoria__header\">\n <div class=\"section-label sr\">Autor\u00eda<\/div>\n <h2 class=\"section-title sr sr-d1\">Qui\u00e9nes hay<br>detr\u00e1s de <em>Origen<\/em><\/h2>\n <\/div>\n <div class=\"autoria__container\">\n <div class=\"author-card author-card--featured sr-scale\">\n <div class=\"author-card__top\">\n <div class=\"author-card__avatar\">\n <svg viewBox=\"0 0 80 80\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"90\" height=\"90\">\n <circle cx=\"40\" cy=\"40\" r=\"40\" fill=\"#D9D9D9\"\/>\n <circle cx=\"40\" cy=\"30\" r=\"13\" fill=\"#8C493A\" opacity=\"0.6\"\/>\n <ellipse cx=\"40\" cy=\"64\" rx=\"22\" ry=\"16\" fill=\"#8C493A\" opacity=\"0.4\"\/>\n <\/svg>\n <\/div>\n <div class=\"author-card__info\">\n <div class=\"author-card__name\">Andr\u00e9s Gavilanez<\/div>\n <div class=\"author-card__roles\">\n <span>Dise\u00f1o editorial<\/span>\n <span>Direcci\u00f3n de arte<\/span>\n <span>Contenido & investigaci\u00f3n<\/span>\n <\/div>\n <\/div>\n <\/div>\n <p class=\"author-card__bio\">Estudiante de Dise\u00f1o Gr\u00e1fico con especializaci\u00f3n en dise\u00f1o editorial y comunicaci\u00f3n visual. Responsable de la direcci\u00f3n de arte, el sistema tipogr\u00e1fico, la ret\u00edcula editorial y la maquetaci\u00f3n de Origen, as\u00ed como de la investigaci\u00f3n cultural, la redacci\u00f3n de los art\u00edculos y la construcci\u00f3n del gui\u00f3n editorial.<\/p>\n <div class=\"author-card__tags\">\n <span class=\"author-tag\">Dise\u00f1o editorial<\/span>\n <span class=\"author-tag\">Tipograf\u00eda<\/span>\n <span class=\"author-tag\">Direcci\u00f3n de arte<\/span>\n <span class=\"author-tag\">Investigaci\u00f3n<\/span>\n <span class=\"author-tag\">Redacci\u00f3n<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer>\n <div class=\"footer__top\">\n <div>\n <div class=\"footer__brand\">\n <img decoding=\"async\" \n src=\"https:\/\/25012.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/logblanco-scaled-e1778142992605.png\" \n alt=\"Origen Logo\"\n class=\"footer__logo-img\"\n >\n<\/div>\n <div class=\"footer__tagline\">La revista digital del caf\u00e9<\/div>\n <\/div>\n <div class=\"footer__col\">\n <h4>Revista<\/h4>\n <ul>\n <li><a href=\"#idea\">La idea<\/a><\/li>\n <li><a href=\"#referentes\">Referentes<\/a><\/li>\n <li><a href=\"#proceso\">Proceso<\/a><\/li>\n <li><a href=\"#revista\">Leer revista<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer__col\">\n <h4>Contenido<\/h4>\n <ul>\n <li><a href=\"#features\">Historia<\/a><\/li>\n <li><a href=\"#features\">Geograf\u00eda<\/a><\/li>\n <li><a href=\"#features\">Proceso<\/a><\/li>\n <li><a href=\"#features\">Cultura<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer__col\">\n <h4>Proyecto<\/h4>\n <ul>\n <li><a href=\"#autoria\">Autor\u00eda<\/a><\/li>\n <li><a href=\"#design\">Sistema de dise\u00f1o<\/a><\/li>\n <li><a href=\"#autoria\">Licencia CC<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer__col\">\n <h4>Conectar<\/h4>\n <ul>\n <li><a href=\"#\">Instagram<\/a><\/li>\n <li><a href=\"#\">Behance<\/a><\/li>\n <li><a href=\"#\">LinkedIn<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"footer__bottom\">\n <div class=\"footer__copy\">\u00a9 2026 Cafeto Origen \u2014 Revista digital del caf\u00e9. Trabajo acad\u00e9mico bajo CC BY-NC-ND 4.0.<\/div>\n <div class=\"footer__copy\">Dise\u00f1ado con caf\u00e9 \u2726<\/div>\n <\/div>\n<\/footer>\n\n<script>\n\/* \u2500\u2500 Cursor \u2500\u2500 *\/\nconst dot = document.getElementById('cursorDot');\nconst ring = document.getElementById('cursorRing');\nlet mx = 0, my = 0, rx = 0, ry = 0;\ndocument.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });\n(function animCursor() {\n rx += (mx - rx) * 0.12; ry += (my - ry) * 0.12;\n dot.style.cssText = `left:${mx}px;top:${my}px`;\n ring.style.cssText = `left:${rx}px;top:${ry}px`;\n requestAnimationFrame(animCursor);\n})();\ndocument.querySelectorAll('a,button,.feature-card,.step-card,.ref-card,.author-card,.marca-card').forEach(el => {\n el.addEventListener('mouseenter', () => { ring.style.width = '60px'; ring.style.height = '60px'; });\n el.addEventListener('mouseleave', () => { ring.style.width = '36px'; ring.style.height = '36px'; });\n});\n\n\/* \u2500\u2500 Dots flotantes en hero \u2500\u2500 *\/\nconst bgDots = document.getElementById('bgDots');\nfor (let i = 0; i < 10; i++) {\n const d = document.createElement('div');\n d.className = 'dot';\n const s = Math.random() * 70 + 20;\n d.style.cssText = `width:${s}px;height:${s}px;left:${Math.random()*100}%;animation-duration:${Math.random()*14+10}s;animation-delay:${Math.random()*-15}s`;\n bgDots.appendChild(d);\n}\n\n\/* \u2500\u2500 Nav: hide on scroll down, show on scroll up + progress bar \u2500\u2500 *\/\nconst nav = document.getElementById('mainNav');\nconst prog = document.getElementById('read-progress');\nlet lastY = 0;\nwindow.addEventListener('scroll', () => {\n const y = window.scrollY;\n nav.style.background = y > 60 ? 'rgba(250,250,248,0.97)' : 'rgba(250,250,248,0.85)';\n if (y > 200) {\n nav.classList.toggle('hidden', y > lastY);\n } else {\n nav.classList.remove('hidden');\n }\n lastY = y;\n const pct = (y \/ (document.body.scrollHeight - window.innerHeight)) * 100;\n prog.style.width = pct + '%';\n}, { passive: true });\n\n\/* \u2500\u2500 Scroll Reveal con IntersectionObserver \u2500\u2500 *\/\nconst srObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('in');\n srObserver.unobserve(entry.target);\n }\n });\n}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.sr, .sr-left, .sr-right, .sr-scale').forEach(el => srObserver.observe(el));\n\n\/* \u2500\u2500 Count-up animado \u2500\u2500 *\/\nfunction animateCount(el) {\n const target = parseInt(el.dataset.target, 10);\n const dur = 1200;\n const start = performance.now();\n (function tick(now) {\n const t = Math.min((now - start) \/ dur, 1);\n const ease = 1 - Math.pow(1 - t, 3);\n el.textContent = Math.round(ease * target);\n if (t < 1) requestAnimationFrame(tick);\n })(start);\n}\n\nconst countObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animateCount(entry.target);\n countObserver.unobserve(entry.target);\n }\n });\n}, { threshold: 0.5 });\n\ndocument.querySelectorAll('.count-up').forEach(el => countObserver.observe(el));\n\n\/* \u2500\u2500 Parallax suave en scroll \u2500\u2500 *\/\nconst parallaxEls = document.querySelectorAll('.parallax-img[data-speed]');\nwindow.addEventListener('scroll', () => {\n const y = window.scrollY;\n parallaxEls.forEach(el => {\n const speed = parseFloat(el.dataset.speed) || 0.05;\n const rect = el.getBoundingClientRect();\n const center = rect.top + rect.height \/ 2;\n const offset = (center - window.innerHeight \/ 2) * speed;\n el.style.transform = `translateY(${offset}px)`;\n });\n}, { passive: true });\n\n\/* \u2500\u2500 Tabs proceso \u2500\u2500 *\/\ndocument.querySelectorAll('.tab-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\n document.querySelectorAll('.proceso__panel').forEach(p => p.classList.remove('active'));\n btn.classList.add('active');\n const panel = document.getElementById('panel-' + btn.dataset.tab);\n panel.classList.add('active');\n panel.querySelectorAll('.sr, .sr-left, .sr-right, .sr-scale').forEach(el => {\n el.classList.remove('in');\n setTimeout(() => srObserver.observe(el), 50);\n });\n });\n});\nconst heroImg = document.querySelector('.hero-image img');\n\nwindow.addEventListener('scroll', () => {\n const scrollY = window.scrollY;\n\n heroImg.style.transform = `translateY(${scrollY * -0.12}px)`;\n});\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Origen \u2014 La Revista del Caf\u00e9 La idea Referentes Proceso Revista Autor\u00eda Leer ahora Edici\u00f3n 01 \u00b7 2026 El OrigendelCaf\u00e9 Una revista digital que traza el viaje del grano desde las tierras altas de Etiop\u00eda hasta la taza que sostiene el mundo. Historia, cultura, sabor. Explorar revista Descubrir Etiop\u00eda Excelsa Lib\u00e9rica Robusta Ar\u00e1bica Etiop\u00eda Excelsa […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-367","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/25012.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/25012.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/25012.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/25012.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/25012.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=367"}],"version-history":[{"count":122,"href":"https:\/\/25012.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/367\/revisions"}],"predecessor-version":[{"id":498,"href":"https:\/\/25012.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/367\/revisions\/498"}],"wp:attachment":[{"href":"https:\/\/25012.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}