Arturo's Coffee House \u2014 Caf\u00e9 costarricense<\/title>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root{\r\n --coffee-dark: #0A0A0A;\r\n --coffee-medium: #7A4F2A;\r\n --forest: #0C2C1B;\r\n --gold: #D2A679;\r\n --cream: #F7F3E9;\r\n --accent: #497D4A;\r\n }\r\n\r\n html,body { height: 100%; }\r\n body{\r\n font-family: 'Poppins', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n background: var(--coffee-dark);\r\n color: var(--cream);\r\n -webkit-font-smoothing:antialiased;\r\n -moz-osx-font-smoothing:grayscale;\r\n }\r\n\r\n \/* Hero parallax: fallback for mobile (no fixed) *\/\r\n .hero {\r\n background-position: center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n position: relative;\r\n min-height: 76vh;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .hero::after{\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n\r\n \/* Degradado suave que aclara arriba y se oscurece abajo *\/\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(10,10,10,0.45) 0%, \/* parte superior *\/\r\n rgba(10,10,10,0.6) 35%, \/* punto medio *\/\r\n rgba(10,10,10,0.90) 85%, \/* casi oscuro *\/\r\n rgba(10,10,10,1) 100% \/* se fusiona perfectamente con tu fondo negro *\/\r\n );\r\n }\r\n\r\n \/* small decorative line used in headers *\/\r\n .line-reveal { width: 0; height: 3px; background: var(--gold); transition: width .8s ease; }\r\n .line-reveal.active { width: 110px; }\r\n\r\n \/* simple focus ring for accessibility *\/\r\n .focus-ring:focus { outline: 3px solid rgba(210,166,121,0.25); outline-offset: 2px; }\r\n\r\n \/* mobile menu *\/\r\n .mobile-nav { display: none; }\r\n @media (max-width: 768px) {\r\n .hero { min-height: auto; padding-top: 5rem; padding-bottom: 3rem; }\r\n .desktop-nav { display: none; }\r\n .mobile-nav { display: block; }\r\n }\r\n\r\n \/* animate on scroll *\/\r\n .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }\r\n .reveal.active { opacity: 1; transform: translateY(0); }\r\n\r\n \/* product card overlay gradient *\/\r\n .product-cta { background: linear-gradient(180deg, rgba(10,10,10,0.0) 0%, rgba(10,10,10,0.55) 100%); }\r\n\r\n \/* subtle parallax effect using transform on scroll (JS) *\/\r\n .parallax { transform: translateY(0); transition: transform .2s linear; }\r\n\r\n \/* small utilities *\/\r\n .soft-shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.45); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n \r\n<div class=\"w-full bg-black text-[10px] md:text-xs text-gray-200 z-50 relative\">\r\n <div class=\"max-w-6xl mx-auto px-3 py-1 flex flex-wrap items-center justify-center gap-3 md:justify-between\">\r\n <div class=\"font-semibold tracking-[.15em] uppercase text-gray-400 text-[9px] md:text-[11px]\">\r\n ARTURO'S COMPANY\r\n <\/div>\r\n <nav class=\"flex flex-wrap gap-3 md:gap-6 font-medium text-[10px] md:text-xs\">\r\n <a href=\"https:\/\/arturoscompany.com\" class=\"hover:text-[#D2A679] transition\">Company<\/a>\r\n <a href=\"https:\/\/arturoscompany.com\/arturoscoffee\" class=\"hover:text-[#D2A679] transition\">Arturo's Coffee<\/a>\r\n <a href=\"https:\/\/arturoscompany.com\/arturosfresh\" class=\"hover:text-[#D2A679] transition\">Arturo's Fresh<\/a>\r\n <\/nav>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n \r\n <header class=\"absolute top-[32px] left-0 w-full z-40 bg-black\/20 backdrop-blur-sm\">\r\n <div class=\"max-w-screen-xl mx-auto px-6 py-4 flex items-center justify-between\">\r\n\r\n \r\n <a href=\"#home\" class=\"flex items-center gap-3\" aria-label=\"Ir a inicio\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/LOGO-Arturs-COFFE-e1764315329508.png\" alt=\"Arturo's Coffee Logo\" class=\"h-10 object-contain\" onerror=\"this.src='data:image\/svg+xml;utf8,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 width=%22150%22 height=%2250%22><rect fill=%22%230A0A0A%22 width=%22150%22 height=%2250%22\/><\/svg>'\">\r\n <\/a>\r\n\r\n \r\n <nav class=\"desktop-nav\">\r\n <ul class=\"flex items-center gap-8 text-sm\">\r\n <li><a href=\"#home\" class=\"nav-link text-cream hover:text-gold transition\">Inicio<\/a><\/li>\r\n <li><a href=\"#about\" class=\"nav-link text-cream hover:text-gold transition\">Sobre Nosotros<\/a><\/li>\r\n <li><a href=\"#products\" class=\"nav-link text-cream hover:text-gold transition\">Productos<\/a><\/li>\r\n <li><a href=\"#contact\" class=\"nav-link text-cream hover:text-gold transition\">Cont\u00e1ctenos<\/a><\/li>\r\n <li>\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20me%20interesa%20comprar\" target=\"_blank\" rel=\"noopener\" class=\"ml-4 inline-flex items-center gap-2 bg-[#D2A679] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold shadow-sm hover:brightness-95 transition focus-ring\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Comprar\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n \r\n <div class=\"mobile-nav\">\r\n <button id=\"btn-mobile\" class=\"p-2 rounded-md bg-white\/5 hover:bg-[#D2A679]\/20 focus-ring transition group\">\r\n <i class=\"fas fa-bars text-2xl text-[#D2A679] group-hover:text-[#e1b88a]\"><\/i>\r\n <span class=\"sr-only\">Abrir men\u00fa<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-panel\" class=\"hidden bg-black\/80\">\r\n <div class=\"container mx-auto px-6 py-4\">\r\n <ul class=\"flex flex-col gap-3 text-white\">\r\n <li><a href=\"#home\" class=\"block py-2\">Inicio<\/a><\/li>\r\n <li><a href=\"#about\" class=\"block py-2\">Sobre Nosotros<\/a><\/li>\r\n <li><a href=\"#products\" class=\"block py-2\">Productos<\/a><\/li>\r\n <li><a href=\"#contact\" class=\"block py-2\">Cont\u00e1ctenos<\/a><\/li>\r\n <li>\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20me%20interesa%20comprar\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-2 bg-[#D2A679] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Comprar\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <main class=\"mt-20\">\r\n <section id=\"home\" class=\"hero parallax\" style=\"background-image: url('https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/fondo_finca-min.png');\" aria-label=\"Hero: Monta\u00f1as y cafetal al amanecer\">\r\n \r\n <div class=\"container mx-auto px-6 relative z-10\">\r\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"text-left reveal\">\r\n <p class=\"text-sm font-semibold text-[#D2A679] mb-3\">Desde San Ram\u00f3n, Alajuela \u2014 Costa Rica<\/p>\r\n <h1 class=\"text-4xl md:text-6xl font-extrabold leading-tight mb-4\" style=\"color:var(--cream);\">Arturo\u2019s Coffee House<\/h1>\r\n <p class=\"text-lg md:max-w-xl text-gray-200 mb-8\">\r\n Caf\u00e9 costarricense con prop\u00f3sito. Nuestra pasi\u00f3n es ofrecer el mejor caf\u00e9 que Costa Rica tiene, para brindar la experiencia inigualable de una buena taza de caf\u00e9.\r\n <\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"#products\" class=\"inline-flex items-center gap-3 bg-[#D2A679] text-[#0A0A0A] px-5 py-3 rounded-full font-semibold shadow-lg hover:brightness-95 transition focus-ring\" role=\"button\">\r\n <i class=\"fas fa-coffee\"><\/i> Ver Productos\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20me%20interesa%20comprar\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-3 border border-[#D2A679] px-5 py-3 rounded-full font-semibold hover:bg-white\/5 transition focus-ring\">\r\n <i class=\"fab fa-whatsapp text-[#D2A679]\"><\/i> Comprar (WhatsApp)\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n \r\n <div class=\"soft-shadow rounded-xl overflow-hidden bg-gradient-to-b from-transparent to-black\/25\">\r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/taza_3.png\" alt=\"Taza cer\u00e1mica verde y crema\" class=\"w-full h-80 object-cover\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\" class=\"py-20 bg-black\/60\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-10\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-[#D2A679]\">Sobre Nosotros<\/h2>\r\n <div class=\"line-reveal mx-auto mt-4\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-10 items-center\">\r\n <div class=\"reveal\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/cafe.png\" alt=\"Finca cafetalera\" class=\"w-full rounded-xl object-cover soft-shadow\" \/>\r\n <\/div>\r\n <div class=\"reveal\">\r\n <h3 class=\"text-2xl font-semibold mb-4\" style=\"color:var(--cream)\">Arturo's Coffee House<\/h3>\r\n <p class=\"text-gray-200 mb-4\">\r\n Bienvenidos a Arturo\u2019s Coffee, una empresa familiar 100% costarricense, ubicada en el coraz\u00f3n de las monta\u00f1as cafetaleras de San Ram\u00f3n de Alajuela. Nuestra pasi\u00f3n es ofrecer el mejor caf\u00e9 que Costa Rica tiene, para brindar la experiencia inigualable de una buena taza de caf\u00e9.\r\n <\/p>\r\n <p class=\"text-gray-200 mb-4\">\r\n Con generaciones de experiencia, nos comprometemos a producir un caf\u00e9 que refleje nuestra dedicaci\u00f3n a la calidad, la sostenibilidad y la rica herencia de la cultura cafetera costarricense.\r\n <\/p>\r\n <p class=\"text-gray-200\">\r\n Cada taza de Arturo\u2019s Coffee se elabora con esmero, honrando las tradiciones de nuestra tierra y el amor que sentimos por esta maravillosa bebida. \u00danete a nosotros para celebrar el arte del caf\u00e9 excepcional.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"process\" class=\"py-20 bg-gradient-to-b from-black\/50 via-black\/30 to-black\/50\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl font-bold text-[#D2A679]\">Nuestro Proceso<\/h2>\r\n <p class=\"text-gray-300 max-w-2xl mx-auto mt-3\">\r\n Desde la siembra hasta la taza: cada paso es cuidado por nuestras manos familiares para garantizar sabor y calidad.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-5 gap-6 text-center\">\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-seedling text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">Siembra<\/h4>\r\n <p class=\"text-sm text-gray-300\">Cultivo responsable y seleccion de variedades.<\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-hands-helping text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">Cosecha<\/h4>\r\n <p class=\"text-sm text-gray-300\">Cosecha manual para asegurar calidad en cada grano.<\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-fire text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">Tueste<\/h4>\r\n <p class=\"text-sm text-gray-300\">Tueste artesanal que resalta perfiles de sabor.<\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-box-open text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">Empaque<\/h4>\r\n <p class=\"text-sm text-gray-300\">Empaque premium y sostenible.<\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-mug-hot text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">T\u00fa<\/h4>\r\n <p class=\"text-sm text-gray-300\">Tu taza perfecta en casa o en la oficina.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"why\" class=\"py-20 bg-black\/70\">\r\n <div class=\"container mx-auto px-6 text-center\">\r\n <h2 class=\"text-3xl font-bold text-[#D2A679] mb-6\">\u00bfPor qu\u00e9 Arturo's Coffee?<\/h2>\r\n <div class=\"grid md:grid-cols-4 gap-6 max-w-4xl mx-auto\">\r\n <div class=\"reveal p-6 bg-white\/6 rounded-xl\">\r\n <h4 class=\"font-semibold text-lg\">Caf\u00e9 Org\u00e1nico<\/h4>\r\n <p class=\"text-sm text-gray-300 mt-2\">Pr\u00e1cticas sostenibles que cuidan la tierra.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 bg-white\/6 rounded-xl\">\r\n <h4 class=\"font-semibold text-lg\">100% Ar\u00e1bica<\/h4>\r\n <p class=\"text-sm text-gray-300 mt-2\">Selecci\u00f3n de granos premium.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 bg-white\/6 rounded-xl\">\r\n <h4 class=\"font-semibold text-lg\">Sabor Inigualable<\/h4>\r\n <p class=\"text-sm text-gray-300 mt-2\">Perfiles complejos y balanceados.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 bg-white\/6 rounded-xl\">\r\n <h4 class=\"font-semibold text-lg\">Grano Entero<\/h4>\r\n <p class=\"text-sm text-gray-300 mt-2\">Conserva frescura hasta el momento del molido.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"products\" class=\"py-20 bg-black\/60\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-10\">\r\n <h2 class=\"text-3xl font-bold text-[#D2A679]\">Nuestros Productos<\/h2>\r\n <div class=\"line-reveal mx-auto mt-4\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-8\">\r\n \r\n <article class=\"reveal rounded-xl overflow-hidden soft-shadow bg-gradient-to-b from-white\/3 to-black\/10\">\r\n <div class=\"relative\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/wistler.png\" alt=\"Whistler Coffee\" class=\"mx-auto w-60 md:w-80 object-contain\"\/>\r\n <div class=\"absolute inset-0 flex items-end p-6 product-cta\">\r\n <div class=\"w-full text-left\">\r\n <h3 class=\"text-2xl font-bold\">Whistler<\/h3>\r\n <p class=\"text-sm text-gray-200\">Tostado Oscuro \u2014 100% Ar\u00e1bica<\/p>\r\n <\/div>\r\n <div class=\"ml-4\">\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20quiero%20comprar%20Whistler\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-2 bg-[#D2A679] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Comprar\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"reveal rounded-xl overflow-hidden soft-shadow bg-gradient-to-b from-white\/3 to-black\/10\">\r\n <div class=\"relative\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/tanager.png\" alt=\"Tanager Coffee\" class=\"mx-auto w-60 md:w-80 object-contain\"\/>\r\n <div class=\"absolute inset-0 flex items-end p-6 product-cta\">\r\n <div class=\"w-full text-left\">\r\n <h3 class=\"text-2xl font-bold\">Tanager<\/h3>\r\n <p class=\"text-sm text-gray-200\">Tostado Medio \u2014 Notas frutales<\/p>\r\n <\/div>\r\n <div class=\"ml-4\">\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20quiero%20comprar%20Tanager\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-2 bg-[#D2A679] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Comprar\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"god\" class=\"py-20 bg-gradient-to-b from-black\/90 to-black\/80 text-center\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-3xl font-semibold mb-4 text-[#D2A679]\">God is Enough<\/h2>\r\n <p class=\"text-gray-300 max-w-3xl mx-auto\">\r\n Nuestra familia cree que todo lo bueno proviene de Dios. \u00c9l es suficiente. Este valor gu\u00eda nuestro trabajo, nuestra comunidad y la forma en la que cuidamos la tierra.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\" class=\"py-20 bg-black\/70\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"reveal\">\r\n <h3 class=\"text-2xl font-bold text-[#D2A679] mb-4\">Cont\u00e1ctenos<\/h3>\r\n <p class=\"text-gray-300 mb-6\">\u00bfTienes alguna pregunta o quieres ordenar? Escr\u00edbenos por WhatsApp o completa el formulario.<\/p>\r\n\r\n <ul class=\"space-y-4 text-gray-200 mb-6\">\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"p-2 bg-[#D2A679] text-[#0A0A0A] rounded-full\"><i class=\"fas fa-phone\"><\/i><\/span>\r\n <div>\r\n <div class=\"font-semibold\">Tel\u00e9fono<\/div>\r\n <div>+506 8324 3564<\/div>\r\n <\/div>\r\n <\/li>\r\n\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"p-2 bg-[#D2A679] text-[#0A0A0A] rounded-full\"><i class=\"fas fa-envelope\"><\/i><\/span>\r\n <div>\r\n <div class=\"font-semibold\">Email<\/div>\r\n <div>ventas@arturoscompany.com<\/div>\r\n <\/div>\r\n <\/li>\r\n\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"p-2 bg-[#D2A679] text-[#0A0A0A] rounded-full\"><i class=\"fas fa-map-marker-alt\"><\/i><\/span>\r\n <div>\r\n <div class=\"font-semibold\">Direcci\u00f3n<\/div>\r\n <div>San Isidro de San Ram\u00f3n, Alajuela, Costa Rica<\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20quiero%20informaci%C3%B3n\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-3 bg-[#D2A679] text-[#0A0A0A] px-5 py-3 rounded-full font-semibold\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Chatear por WhatsApp\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n \r\n <form id=\"contactForm\" class=\"bg-white\/5 p-6 rounded-xl\">\r\n <label class=\"block mb-3\">\r\n <span class=\"text-sm text-gray-200\">Nombre<\/span>\r\n <input name=\"name\" required class=\"mt-1 block w-full rounded-md bg-black\/40 border border-white\/10 px-3 py-2 text-white placeholder-gray-400 focus-ring\" placeholder=\"Tu nombre\"\/>\r\n <\/label>\r\n\r\n <label class=\"block mb-3\">\r\n <span class=\"text-sm text-gray-200\">Correo<\/span>\r\n <input type=\"email\" name=\"email\" required class=\"mt-1 block w-full rounded-md bg-black\/40 border border-white\/10 px-3 py-2 text-white placeholder-gray-400 focus-ring\" placeholder=\"tu@correo.com\"\/>\r\n <\/label>\r\n\r\n <label class=\"block mb-4\">\r\n <span class=\"text-sm text-gray-200\">Mensaje<\/span>\r\n <textarea name=\"message\" rows=\"4\" required class=\"mt-1 block w-full rounded-md bg-black\/40 border border-white\/10 px-3 py-2 text-white placeholder-gray-400 focus-ring\" placeholder=\"\u00bfEn qu\u00e9 podemos ayudarte?\"><\/textarea>\r\n <\/label>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <button type=\"submit\" class=\"inline-flex items-center gap-2 bg-[#D2A679] hover:bg-[#c3926b] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold transition\">\r\n Enviar mensaje\r\n <\/button>\r\n\r\n <small class=\"text-gray-400\">O env\u00edanos un mensaje directo por WhatsApp<\/small>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"bg-black\/90 py-8\">\r\n <div class=\"container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6\">\r\n <div class=\"flex items-center gap-4\">\r\n <img decoding=\"async\" src=\"assets\/logo_white.png\" alt=\"Arturo's Coffee logo blanco\" class=\"h-10 object-contain\" onerror=\"this.style.display='none'\">\r\n <div>\r\n <div class=\"text-sm text-gray-300\">\u00a9 2025 Arturo's Coffee House<\/div>\r\n <div class=\"text-xs text-gray-500\">Hecho por \u2014 bytebros.net<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <nav class=\"flex items-center gap-4 text-sm text-gray-400\">\r\n <a href=\"#home\" class=\"hover:text-white\">Inicio<\/a>\r\n <a href=\"#about\" class=\"hover:text-white\">Sobre Nosotros<\/a>\r\n <a href=\"#products\" class=\"hover:text-white\">Productos<\/a>\r\n <a href=\"#contact\" class=\"hover:text-white\">Contacto<\/a>\r\n <\/nav>\r\n <\/div>\r\n <\/footer>\r\n <\/main>\r\n\r\n \r\n <script>\r\n \/\/ Mobile menu toggle\r\n const btn = document.getElementById('btn-mobile');\r\n const panel = document.getElementById('mobile-panel');\r\n if (btn) {\r\n btn.addEventListener('click', () => {\r\n panel.classList.toggle('hidden');\r\n });\r\n }\r\n\r\n \/\/ Intersection Observer: reveal elements and line-reveal\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const reveals = document.querySelectorAll('.reveal');\r\n const lines = document.querySelectorAll('.line-reveal');\r\n\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n\r\n reveals.forEach(el => io.observe(el));\r\n lines.forEach(line => io.observe(line));\r\n\r\n \/\/ Small parallax on hero image using scroll\r\n const hero = document.querySelector('.hero');\r\n window.addEventListener('scroll', () => {\r\n if (!hero) return;\r\n const rect = hero.getBoundingClientRect();\r\n \/\/ move only when in view for performance\r\n if (rect.top < window.innerHeight && rect.bottom > 0) {\r\n const speed = 0.15; \/\/ ajuste suave\r\n const offset = -rect.top * speed;\r\n hero.style.transform = `translateY(${offset}px)`;\r\n }\r\n });\r\n\r\n \/\/ Simple contact form handler (no backend) - open WhatsApp with form summary\r\n const form = document.getElementById('contactForm');\r\n if (form) {\r\n form.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const name = form.name.value.trim();\r\n const email = form.email.value.trim();\r\n const message = form.message.value.trim();\r\n \/\/ Abrir WhatsApp (prellenado) como primera opci\u00f3n de contacto\r\n const text = encodeURIComponent(`Hola Arturo's Coffee, soy ${name} (${email}). ${message}`);\r\n window.open(`https:\/\/wa.me\/50683243564?text=${text}`, '_blank');\r\n \/\/ alternativamente show a toast or reset\r\n form.reset();\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Arturo’s Coffee House \u2014 Caf\u00e9 costarricense ARTURO’S COMPANY Company Arturo’s Coffee Arturo’s Fresh<\/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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":205,"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":222,"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/pages\/7\/revisions\/222"}],"wp:attachment":[{"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Arturo's Coffee House \u2014 Caf\u00e9 costarricense<\/title>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root{\r\n --coffee-dark: #0A0A0A;\r\n --coffee-medium: #7A4F2A;\r\n --forest: #0C2C1B;\r\n --gold: #D2A679;\r\n --cream: #F7F3E9;\r\n --accent: #497D4A;\r\n }\r\n\r\n html,body { height: 100%; }\r\n body{\r\n font-family: 'Poppins', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n background: var(--coffee-dark);\r\n color: var(--cream);\r\n -webkit-font-smoothing:antialiased;\r\n -moz-osx-font-smoothing:grayscale;\r\n }\r\n\r\n \/* Hero parallax: fallback for mobile (no fixed) *\/\r\n .hero {\r\n background-position: center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n position: relative;\r\n min-height: 76vh;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .hero::after{\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n\r\n \/* Degradado suave que aclara arriba y se oscurece abajo *\/\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(10,10,10,0.45) 0%, \/* parte superior *\/\r\n rgba(10,10,10,0.6) 35%, \/* punto medio *\/\r\n rgba(10,10,10,0.90) 85%, \/* casi oscuro *\/\r\n rgba(10,10,10,1) 100% \/* se fusiona perfectamente con tu fondo negro *\/\r\n );\r\n }\r\n\r\n \/* small decorative line used in headers *\/\r\n .line-reveal { width: 0; height: 3px; background: var(--gold); transition: width .8s ease; }\r\n .line-reveal.active { width: 110px; }\r\n\r\n \/* simple focus ring for accessibility *\/\r\n .focus-ring:focus { outline: 3px solid rgba(210,166,121,0.25); outline-offset: 2px; }\r\n\r\n \/* mobile menu *\/\r\n .mobile-nav { display: none; }\r\n @media (max-width: 768px) {\r\n .hero { min-height: auto; padding-top: 5rem; padding-bottom: 3rem; }\r\n .desktop-nav { display: none; }\r\n .mobile-nav { display: block; }\r\n }\r\n\r\n \/* animate on scroll *\/\r\n .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }\r\n .reveal.active { opacity: 1; transform: translateY(0); }\r\n\r\n \/* product card overlay gradient *\/\r\n .product-cta { background: linear-gradient(180deg, rgba(10,10,10,0.0) 0%, rgba(10,10,10,0.55) 100%); }\r\n\r\n \/* subtle parallax effect using transform on scroll (JS) *\/\r\n .parallax { transform: translateY(0); transition: transform .2s linear; }\r\n\r\n \/* small utilities *\/\r\n .soft-shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.45); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n \r\n<div class=\"w-full bg-black text-[10px] md:text-xs text-gray-200 z-50 relative\">\r\n <div class=\"max-w-6xl mx-auto px-3 py-1 flex flex-wrap items-center justify-center gap-3 md:justify-between\">\r\n <div class=\"font-semibold tracking-[.15em] uppercase text-gray-400 text-[9px] md:text-[11px]\">\r\n ARTURO'S COMPANY\r\n <\/div>\r\n <nav class=\"flex flex-wrap gap-3 md:gap-6 font-medium text-[10px] md:text-xs\">\r\n <a href=\"https:\/\/arturoscompany.com\" class=\"hover:text-[#D2A679] transition\">Company<\/a>\r\n <a href=\"https:\/\/arturoscompany.com\/arturoscoffee\" class=\"hover:text-[#D2A679] transition\">Arturo's Coffee<\/a>\r\n <a href=\"https:\/\/arturoscompany.com\/arturosfresh\" class=\"hover:text-[#D2A679] transition\">Arturo's Fresh<\/a>\r\n <\/nav>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n \r\n <header class=\"absolute top-[32px] left-0 w-full z-40 bg-black\/20 backdrop-blur-sm\">\r\n <div class=\"max-w-screen-xl mx-auto px-6 py-4 flex items-center justify-between\">\r\n\r\n \r\n <a href=\"#home\" class=\"flex items-center gap-3\" aria-label=\"Ir a inicio\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/LOGO-Arturs-COFFE-e1764315329508.png\" alt=\"Arturo's Coffee Logo\" class=\"h-10 object-contain\" onerror=\"this.src='data:image\/svg+xml;utf8,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 width=%22150%22 height=%2250%22><rect fill=%22%230A0A0A%22 width=%22150%22 height=%2250%22\/><\/svg>'\">\r\n <\/a>\r\n\r\n \r\n <nav class=\"desktop-nav\">\r\n <ul class=\"flex items-center gap-8 text-sm\">\r\n <li><a href=\"#home\" class=\"nav-link text-cream hover:text-gold transition\">Inicio<\/a><\/li>\r\n <li><a href=\"#about\" class=\"nav-link text-cream hover:text-gold transition\">Sobre Nosotros<\/a><\/li>\r\n <li><a href=\"#products\" class=\"nav-link text-cream hover:text-gold transition\">Productos<\/a><\/li>\r\n <li><a href=\"#contact\" class=\"nav-link text-cream hover:text-gold transition\">Cont\u00e1ctenos<\/a><\/li>\r\n <li>\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20me%20interesa%20comprar\" target=\"_blank\" rel=\"noopener\" class=\"ml-4 inline-flex items-center gap-2 bg-[#D2A679] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold shadow-sm hover:brightness-95 transition focus-ring\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Comprar\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n \r\n <div class=\"mobile-nav\">\r\n <button id=\"btn-mobile\" class=\"p-2 rounded-md bg-white\/5 hover:bg-[#D2A679]\/20 focus-ring transition group\">\r\n <i class=\"fas fa-bars text-2xl text-[#D2A679] group-hover:text-[#e1b88a]\"><\/i>\r\n <span class=\"sr-only\">Abrir men\u00fa<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-panel\" class=\"hidden bg-black\/80\">\r\n <div class=\"container mx-auto px-6 py-4\">\r\n <ul class=\"flex flex-col gap-3 text-white\">\r\n <li><a href=\"#home\" class=\"block py-2\">Inicio<\/a><\/li>\r\n <li><a href=\"#about\" class=\"block py-2\">Sobre Nosotros<\/a><\/li>\r\n <li><a href=\"#products\" class=\"block py-2\">Productos<\/a><\/li>\r\n <li><a href=\"#contact\" class=\"block py-2\">Cont\u00e1ctenos<\/a><\/li>\r\n <li>\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20me%20interesa%20comprar\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-2 bg-[#D2A679] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Comprar\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <main class=\"mt-20\">\r\n <section id=\"home\" class=\"hero parallax\" style=\"background-image: url('https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/fondo_finca-min.png');\" aria-label=\"Hero: Monta\u00f1as y cafetal al amanecer\">\r\n \r\n <div class=\"container mx-auto px-6 relative z-10\">\r\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"text-left reveal\">\r\n <p class=\"text-sm font-semibold text-[#D2A679] mb-3\">Desde San Ram\u00f3n, Alajuela \u2014 Costa Rica<\/p>\r\n <h1 class=\"text-4xl md:text-6xl font-extrabold leading-tight mb-4\" style=\"color:var(--cream);\">Arturo\u2019s Coffee House<\/h1>\r\n <p class=\"text-lg md:max-w-xl text-gray-200 mb-8\">\r\n Caf\u00e9 costarricense con prop\u00f3sito. Nuestra pasi\u00f3n es ofrecer el mejor caf\u00e9 que Costa Rica tiene, para brindar la experiencia inigualable de una buena taza de caf\u00e9.\r\n <\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"#products\" class=\"inline-flex items-center gap-3 bg-[#D2A679] text-[#0A0A0A] px-5 py-3 rounded-full font-semibold shadow-lg hover:brightness-95 transition focus-ring\" role=\"button\">\r\n <i class=\"fas fa-coffee\"><\/i> Ver Productos\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20me%20interesa%20comprar\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-3 border border-[#D2A679] px-5 py-3 rounded-full font-semibold hover:bg-white\/5 transition focus-ring\">\r\n <i class=\"fab fa-whatsapp text-[#D2A679]\"><\/i> Comprar (WhatsApp)\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n \r\n <div class=\"soft-shadow rounded-xl overflow-hidden bg-gradient-to-b from-transparent to-black\/25\">\r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/taza_3.png\" alt=\"Taza cer\u00e1mica verde y crema\" class=\"w-full h-80 object-cover\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\" class=\"py-20 bg-black\/60\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-10\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-[#D2A679]\">Sobre Nosotros<\/h2>\r\n <div class=\"line-reveal mx-auto mt-4\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-10 items-center\">\r\n <div class=\"reveal\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/cafe.png\" alt=\"Finca cafetalera\" class=\"w-full rounded-xl object-cover soft-shadow\" \/>\r\n <\/div>\r\n <div class=\"reveal\">\r\n <h3 class=\"text-2xl font-semibold mb-4\" style=\"color:var(--cream)\">Arturo's Coffee House<\/h3>\r\n <p class=\"text-gray-200 mb-4\">\r\n Bienvenidos a Arturo\u2019s Coffee, una empresa familiar 100% costarricense, ubicada en el coraz\u00f3n de las monta\u00f1as cafetaleras de San Ram\u00f3n de Alajuela. Nuestra pasi\u00f3n es ofrecer el mejor caf\u00e9 que Costa Rica tiene, para brindar la experiencia inigualable de una buena taza de caf\u00e9.\r\n <\/p>\r\n <p class=\"text-gray-200 mb-4\">\r\n Con generaciones de experiencia, nos comprometemos a producir un caf\u00e9 que refleje nuestra dedicaci\u00f3n a la calidad, la sostenibilidad y la rica herencia de la cultura cafetera costarricense.\r\n <\/p>\r\n <p class=\"text-gray-200\">\r\n Cada taza de Arturo\u2019s Coffee se elabora con esmero, honrando las tradiciones de nuestra tierra y el amor que sentimos por esta maravillosa bebida. \u00danete a nosotros para celebrar el arte del caf\u00e9 excepcional.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"process\" class=\"py-20 bg-gradient-to-b from-black\/50 via-black\/30 to-black\/50\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl font-bold text-[#D2A679]\">Nuestro Proceso<\/h2>\r\n <p class=\"text-gray-300 max-w-2xl mx-auto mt-3\">\r\n Desde la siembra hasta la taza: cada paso es cuidado por nuestras manos familiares para garantizar sabor y calidad.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-5 gap-6 text-center\">\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-seedling text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">Siembra<\/h4>\r\n <p class=\"text-sm text-gray-300\">Cultivo responsable y seleccion de variedades.<\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-hands-helping text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">Cosecha<\/h4>\r\n <p class=\"text-sm text-gray-300\">Cosecha manual para asegurar calidad en cada grano.<\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-fire text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">Tueste<\/h4>\r\n <p class=\"text-sm text-gray-300\">Tueste artesanal que resalta perfiles de sabor.<\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-box-open text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">Empaque<\/h4>\r\n <p class=\"text-sm text-gray-300\">Empaque premium y sostenible.<\/p>\r\n <\/div>\r\n\r\n <div class=\"reveal p-6 bg-white\/5 rounded-xl\">\r\n <i class=\"fas fa-mug-hot text-2xl mb-3 text-[#D2A679]\"><\/i>\r\n <h4 class=\"font-semibold mb-1\">T\u00fa<\/h4>\r\n <p class=\"text-sm text-gray-300\">Tu taza perfecta en casa o en la oficina.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"why\" class=\"py-20 bg-black\/70\">\r\n <div class=\"container mx-auto px-6 text-center\">\r\n <h2 class=\"text-3xl font-bold text-[#D2A679] mb-6\">\u00bfPor qu\u00e9 Arturo's Coffee?<\/h2>\r\n <div class=\"grid md:grid-cols-4 gap-6 max-w-4xl mx-auto\">\r\n <div class=\"reveal p-6 bg-white\/6 rounded-xl\">\r\n <h4 class=\"font-semibold text-lg\">Caf\u00e9 Org\u00e1nico<\/h4>\r\n <p class=\"text-sm text-gray-300 mt-2\">Pr\u00e1cticas sostenibles que cuidan la tierra.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 bg-white\/6 rounded-xl\">\r\n <h4 class=\"font-semibold text-lg\">100% Ar\u00e1bica<\/h4>\r\n <p class=\"text-sm text-gray-300 mt-2\">Selecci\u00f3n de granos premium.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 bg-white\/6 rounded-xl\">\r\n <h4 class=\"font-semibold text-lg\">Sabor Inigualable<\/h4>\r\n <p class=\"text-sm text-gray-300 mt-2\">Perfiles complejos y balanceados.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 bg-white\/6 rounded-xl\">\r\n <h4 class=\"font-semibold text-lg\">Grano Entero<\/h4>\r\n <p class=\"text-sm text-gray-300 mt-2\">Conserva frescura hasta el momento del molido.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"products\" class=\"py-20 bg-black\/60\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-10\">\r\n <h2 class=\"text-3xl font-bold text-[#D2A679]\">Nuestros Productos<\/h2>\r\n <div class=\"line-reveal mx-auto mt-4\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-8\">\r\n \r\n <article class=\"reveal rounded-xl overflow-hidden soft-shadow bg-gradient-to-b from-white\/3 to-black\/10\">\r\n <div class=\"relative\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/wistler.png\" alt=\"Whistler Coffee\" class=\"mx-auto w-60 md:w-80 object-contain\"\/>\r\n <div class=\"absolute inset-0 flex items-end p-6 product-cta\">\r\n <div class=\"w-full text-left\">\r\n <h3 class=\"text-2xl font-bold\">Whistler<\/h3>\r\n <p class=\"text-sm text-gray-200\">Tostado Oscuro \u2014 100% Ar\u00e1bica<\/p>\r\n <\/div>\r\n <div class=\"ml-4\">\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20quiero%20comprar%20Whistler\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-2 bg-[#D2A679] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Comprar\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"reveal rounded-xl overflow-hidden soft-shadow bg-gradient-to-b from-white\/3 to-black\/10\">\r\n <div class=\"relative\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/arturoscompany.com\/wp-content\/uploads\/2025\/11\/tanager.png\" alt=\"Tanager Coffee\" class=\"mx-auto w-60 md:w-80 object-contain\"\/>\r\n <div class=\"absolute inset-0 flex items-end p-6 product-cta\">\r\n <div class=\"w-full text-left\">\r\n <h3 class=\"text-2xl font-bold\">Tanager<\/h3>\r\n <p class=\"text-sm text-gray-200\">Tostado Medio \u2014 Notas frutales<\/p>\r\n <\/div>\r\n <div class=\"ml-4\">\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20quiero%20comprar%20Tanager\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-2 bg-[#D2A679] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Comprar\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"god\" class=\"py-20 bg-gradient-to-b from-black\/90 to-black\/80 text-center\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-3xl font-semibold mb-4 text-[#D2A679]\">God is Enough<\/h2>\r\n <p class=\"text-gray-300 max-w-3xl mx-auto\">\r\n Nuestra familia cree que todo lo bueno proviene de Dios. \u00c9l es suficiente. Este valor gu\u00eda nuestro trabajo, nuestra comunidad y la forma en la que cuidamos la tierra.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\" class=\"py-20 bg-black\/70\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"reveal\">\r\n <h3 class=\"text-2xl font-bold text-[#D2A679] mb-4\">Cont\u00e1ctenos<\/h3>\r\n <p class=\"text-gray-300 mb-6\">\u00bfTienes alguna pregunta o quieres ordenar? Escr\u00edbenos por WhatsApp o completa el formulario.<\/p>\r\n\r\n <ul class=\"space-y-4 text-gray-200 mb-6\">\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"p-2 bg-[#D2A679] text-[#0A0A0A] rounded-full\"><i class=\"fas fa-phone\"><\/i><\/span>\r\n <div>\r\n <div class=\"font-semibold\">Tel\u00e9fono<\/div>\r\n <div>+506 8324 3564<\/div>\r\n <\/div>\r\n <\/li>\r\n\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"p-2 bg-[#D2A679] text-[#0A0A0A] rounded-full\"><i class=\"fas fa-envelope\"><\/i><\/span>\r\n <div>\r\n <div class=\"font-semibold\">Email<\/div>\r\n <div>ventas@arturoscompany.com<\/div>\r\n <\/div>\r\n <\/li>\r\n\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"p-2 bg-[#D2A679] text-[#0A0A0A] rounded-full\"><i class=\"fas fa-map-marker-alt\"><\/i><\/span>\r\n <div>\r\n <div class=\"font-semibold\">Direcci\u00f3n<\/div>\r\n <div>San Isidro de San Ram\u00f3n, Alajuela, Costa Rica<\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n\r\n <a href=\"https:\/\/wa.me\/50683243564?text=Hola%20Arturo's%20Coffee,%20quiero%20informaci%C3%B3n\" target=\"_blank\" rel=\"noopener\" class=\"inline-flex items-center gap-3 bg-[#D2A679] text-[#0A0A0A] px-5 py-3 rounded-full font-semibold\">\r\n <i class=\"fab fa-whatsapp\"><\/i> Chatear por WhatsApp\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n \r\n <form id=\"contactForm\" class=\"bg-white\/5 p-6 rounded-xl\">\r\n <label class=\"block mb-3\">\r\n <span class=\"text-sm text-gray-200\">Nombre<\/span>\r\n <input name=\"name\" required class=\"mt-1 block w-full rounded-md bg-black\/40 border border-white\/10 px-3 py-2 text-white placeholder-gray-400 focus-ring\" placeholder=\"Tu nombre\"\/>\r\n <\/label>\r\n\r\n <label class=\"block mb-3\">\r\n <span class=\"text-sm text-gray-200\">Correo<\/span>\r\n <input type=\"email\" name=\"email\" required class=\"mt-1 block w-full rounded-md bg-black\/40 border border-white\/10 px-3 py-2 text-white placeholder-gray-400 focus-ring\" placeholder=\"tu@correo.com\"\/>\r\n <\/label>\r\n\r\n <label class=\"block mb-4\">\r\n <span class=\"text-sm text-gray-200\">Mensaje<\/span>\r\n <textarea name=\"message\" rows=\"4\" required class=\"mt-1 block w-full rounded-md bg-black\/40 border border-white\/10 px-3 py-2 text-white placeholder-gray-400 focus-ring\" placeholder=\"\u00bfEn qu\u00e9 podemos ayudarte?\"><\/textarea>\r\n <\/label>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <button type=\"submit\" class=\"inline-flex items-center gap-2 bg-[#D2A679] hover:bg-[#c3926b] text-[#0A0A0A] px-4 py-2 rounded-full font-semibold transition\">\r\n Enviar mensaje\r\n <\/button>\r\n\r\n <small class=\"text-gray-400\">O env\u00edanos un mensaje directo por WhatsApp<\/small>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"bg-black\/90 py-8\">\r\n <div class=\"container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6\">\r\n <div class=\"flex items-center gap-4\">\r\n <img decoding=\"async\" src=\"assets\/logo_white.png\" alt=\"Arturo's Coffee logo blanco\" class=\"h-10 object-contain\" onerror=\"this.style.display='none'\">\r\n <div>\r\n <div class=\"text-sm text-gray-300\">\u00a9 2025 Arturo's Coffee House<\/div>\r\n <div class=\"text-xs text-gray-500\">Hecho por \u2014 bytebros.net<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <nav class=\"flex items-center gap-4 text-sm text-gray-400\">\r\n <a href=\"#home\" class=\"hover:text-white\">Inicio<\/a>\r\n <a href=\"#about\" class=\"hover:text-white\">Sobre Nosotros<\/a>\r\n <a href=\"#products\" class=\"hover:text-white\">Productos<\/a>\r\n <a href=\"#contact\" class=\"hover:text-white\">Contacto<\/a>\r\n <\/nav>\r\n <\/div>\r\n <\/footer>\r\n <\/main>\r\n\r\n \r\n <script>\r\n \/\/ Mobile menu toggle\r\n const btn = document.getElementById('btn-mobile');\r\n const panel = document.getElementById('mobile-panel');\r\n if (btn) {\r\n btn.addEventListener('click', () => {\r\n panel.classList.toggle('hidden');\r\n });\r\n }\r\n\r\n \/\/ Intersection Observer: reveal elements and line-reveal\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const reveals = document.querySelectorAll('.reveal');\r\n const lines = document.querySelectorAll('.line-reveal');\r\n\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n\r\n reveals.forEach(el => io.observe(el));\r\n lines.forEach(line => io.observe(line));\r\n\r\n \/\/ Small parallax on hero image using scroll\r\n const hero = document.querySelector('.hero');\r\n window.addEventListener('scroll', () => {\r\n if (!hero) return;\r\n const rect = hero.getBoundingClientRect();\r\n \/\/ move only when in view for performance\r\n if (rect.top < window.innerHeight && rect.bottom > 0) {\r\n const speed = 0.15; \/\/ ajuste suave\r\n const offset = -rect.top * speed;\r\n hero.style.transform = `translateY(${offset}px)`;\r\n }\r\n });\r\n\r\n \/\/ Simple contact form handler (no backend) - open WhatsApp with form summary\r\n const form = document.getElementById('contactForm');\r\n if (form) {\r\n form.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const name = form.name.value.trim();\r\n const email = form.email.value.trim();\r\n const message = form.message.value.trim();\r\n \/\/ Abrir WhatsApp (prellenado) como primera opci\u00f3n de contacto\r\n const text = encodeURIComponent(`Hola Arturo's Coffee, soy ${name} (${email}). ${message}`);\r\n window.open(`https:\/\/wa.me\/50683243564?text=${text}`, '_blank');\r\n \/\/ alternativamente show a toast or reset\r\n form.reset();\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Arturo’s Coffee House \u2014 Caf\u00e9 costarricense ARTURO’S COMPANY Company Arturo’s Coffee Arturo’s Fresh<\/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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":205,"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":222,"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/pages\/7\/revisions\/222"}],"wp:attachment":[{"href":"https:\/\/arturoscompany.com\/arturoscoffee\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}