/*
Theme Name: Moka Cafe
Theme URI: https://example.com/moka-cafe
Author: Moka Cafe Studio
Description: Tema cálido y moderno para una cafetería: menú, blog, autores, preguntas frecuentes, patrones y contacto.
Version: 2.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: moka-cafe
Tags: food-and-drink, blog, custom-logo, custom-menu, featured-images, block-patterns
*/

:root {
  --moka-espresso: #2f211b;
  --moka-cocoa: #5a3d30;
  --moka-caramel: #c7804f;
  --moka-cream: #f5eee4;
  --moka-paper: #fffaf4;
  --moka-sage: #7d9277;
  --moka-ink: #241f1b;
  --moka-muted: #746b64;
  --moka-line: rgba(47, 33, 27, .13);
  --moka-shadow: 0 18px 50px rgba(47, 33, 27, .12);
  --moka-radius: 24px;
  --moka-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--moka-ink);
  background: var(--moka-paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.moka-container { width: min(calc(100% - 32px), var(--moka-max)); margin-inline: auto; }
.moka-section { padding: 88px 0; }
.moka-section--tight { padding: 56px 0; }
.moka-kicker { display: inline-block; margin-bottom: 12px; color: var(--moka-caramel); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.moka-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.045em; }
.moka-title--small { font-size: clamp(1.9rem, 3vw, 3.2rem); }
.moka-lead { max-width: 680px; margin: 22px 0 0; color: var(--moka-muted); font-size: 1.08rem; }
.moka-grid { display: grid; gap: 24px; }
.moka-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.moka-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.moka-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid var(--moka-espresso); border-radius: 999px;
  background: var(--moka-espresso); color: #fff; font-weight: 800; cursor: pointer; transition: .2s ease;
}
.moka-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(47,33,27,.18); }
.moka-btn--ghost { color: var(--moka-espresso); background: transparent; }
.moka-btn--cream { background: var(--moka-cream); color: var(--moka-espresso); border-color: var(--moka-cream); }

.site-header {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px);
  background: rgba(255,250,244,.88); border-bottom: 1px solid var(--moka-line);
}
.site-header__row { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap: 28px; }
.site-branding { display:flex; align-items:center; gap:12px; min-width:max-content; }
.custom-logo-link img { max-height: 42px; width:auto; }
.site-title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.3rem; }
.site-title em { color: var(--moka-caramel); font-style: normal; }
.primary-nav ul { list-style:none; display:flex; align-items:center; gap:24px; margin:0; padding:0; }
.primary-nav a { font-size:.94rem; font-weight:700; }
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--moka-caramel); }
.menu-toggle { display:none; width:46px; height:46px; border:1px solid var(--moka-line); border-radius:14px; background:#fff; cursor:pointer; }

.moka-hero { padding: 44px 0 64px; overflow:hidden; }
.moka-hero__grid { display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:48px; }
.moka-hero__copy p { max-width:620px; color:var(--moka-muted); font-size:1.08rem; }
.moka-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.moka-hero__art { position:relative; min-height:560px; border-radius:36px; overflow:hidden; background: radial-gradient(circle at 68% 26%, #e9bf96 0 13%, transparent 14%), linear-gradient(135deg,#4c3026 0%,#2f211b 52%,#7e5945 100%); box-shadow:var(--moka-shadow); }
.moka-hero__art::before { content:""; position:absolute; width:280px; height:280px; border:28px solid rgba(255,255,255,.12); border-radius:50%; left:52%; top:52%; transform:translate(-50%,-50%); }
.moka-cup { position:absolute; left:50%; top:53%; transform:translate(-50%,-50%); width:260px; height:180px; border-radius:18px 18px 70px 70px; background:#f6eadc; box-shadow:0 35px 50px rgba(0,0,0,.2); }
.moka-cup::before { content:""; position:absolute; width:110px; height:88px; border:22px solid #f6eadc; border-left:0; border-radius:0 50% 50% 0; right:-88px; top:34px; }
.moka-cup::after { content:""; position:absolute; width:205px; height:52px; border-radius:50%; background:#3e241a; left:27px; top:-13px; box-shadow: inset 0 0 0 13px #ead8c3; }
.moka-bean { position:absolute; width:28px; height:42px; border-radius:60% 40% 60% 40%; background:#1f1511; transform:rotate(28deg); opacity:.85; }
.moka-bean--1 { left:11%; top:18%; } .moka-bean--2 { right:12%; bottom:18%; transform:rotate(-38deg); } .moka-bean--3 { left:22%; bottom:10%; transform:rotate(70deg); }
.moka-badge { position:absolute; right:24px; bottom:24px; max-width:220px; padding:16px 18px; border-radius:18px; background:rgba(255,250,244,.92); box-shadow:var(--moka-shadow); }
.moka-badge strong { display:block; font-family:Georgia,serif; font-size:1.25rem; }

.moka-card { padding:28px; border:1px solid var(--moka-line); border-radius:var(--moka-radius); background:#fff; box-shadow:0 8px 30px rgba(47,33,27,.06); }
.moka-card h3 { margin:0 0 10px; font-family:Georgia,serif; font-size:1.45rem; }
.moka-card p { color:var(--moka-muted); margin:0; }
.moka-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:18px; border-radius:16px; background:var(--moka-cream); font-size:1.4rem; }

.moka-menu-card { overflow:hidden; padding:0; }
.moka-menu-card__visual { min-height:190px; display:grid; place-items:center; background:linear-gradient(145deg,#6d4a38,#2f211b); color:#fff; font-family:Georgia,serif; font-size:4.6rem; }
.moka-menu-card__body { padding:24px; }
.moka-menu-card__meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; font-weight:800; }
.moka-price { color:var(--moka-caramel); }

.moka-band { background:var(--moka-espresso); color:#fff; }
.moka-band .moka-lead { color:rgba(255,255,255,.72); }
.moka-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.moka-stat { padding:22px; border:1px solid rgba(255,255,255,.15); border-radius:20px; }
.moka-stat strong { display:block; font-family:Georgia,serif; font-size:2.2rem; }
.moka-stat span { color:rgba(255,255,255,.68); font-size:.92rem; }

.moka-post-card { padding:0; overflow:hidden; }
.moka-post-card__cover { min-height:210px; background:linear-gradient(135deg,#d9b08c,#7d9277); position:relative; }
.moka-post-card__cover::after { content:"M"; position:absolute; right:22px; bottom:-28px; color:rgba(255,255,255,.52); font-family:Georgia,serif; font-size:9rem; line-height:1; }
.moka-post-card__body { padding:24px; }
.moka-post-card__meta { color:var(--moka-muted); font-size:.86rem; margin-bottom:10px; }
.moka-post-card h2, .moka-post-card h3 { margin:0 0 12px; font-family:Georgia,serif; }

.moka-page-hero { padding:72px 0 40px; }
.moka-breadcrumb { color:var(--moka-muted); font-size:.9rem; margin-bottom:16px; }

.moka-faq details { border-top:1px solid var(--moka-line); padding:20px 0; }
.moka-faq details:last-child { border-bottom:1px solid var(--moka-line); }
.moka-faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; font-weight:800; }
.moka-faq summary::-webkit-details-marker { display:none; }
.moka-faq summary::after { content:"+"; font-size:1.4rem; color:var(--moka-caramel); }
.moka-faq details[open] summary::after { content:"–"; }
.moka-faq details p { color:var(--moka-muted); max-width:820px; }

.moka-author { display:grid; grid-template-columns:82px 1fr; gap:20px; align-items:start; }
.moka-author__avatar img { border-radius:22px; }
.moka-author__bio p { color:var(--moka-muted); }


.moka-form { display:grid; gap:16px; max-width:760px; }
.moka-form label { display:grid; gap:7px; font-weight:800; }
.moka-form input, .moka-form textarea { width:100%; padding:14px 16px; border:1px solid var(--moka-line); border-radius:14px; background:#fff; color:var(--moka-ink); }
.moka-form textarea { min-height:150px; resize:vertical; }
.moka-alert { padding:14px 16px; border-radius:14px; background:#edf6ea; color:#355b31; margin-bottom:18px; }
.moka-alert--error { background:#fff0ee; color:#8d3b31; }

.site-footer { padding:56px 0 24px; color:#fff; background:#211712; }
.site-footer__grid { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:36px; }
.site-footer h3, .site-footer h4 { font-family:Georgia,serif; margin-top:0; }
.site-footer p, .site-footer li, .site-footer a { color:rgba(255,255,255,.72); }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.site-footer__bottom { margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.52); font-size:.88rem; }

.entry-content { font-size:1.04rem; }
.entry-content > * { max-width:800px; margin-left:auto; margin-right:auto; }
.entry-content > .alignwide { max-width:var(--moka-max); }
.entry-content h2, .entry-content h3 { font-family:Georgia,serif; }
.entry-content a { color:var(--moka-caramel); text-decoration:underline; }

.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 980px) {
  .moka-hero__grid, .site-footer__grid { grid-template-columns:1fr 1fr; }
  .moka-grid--4 { grid-template-columns:repeat(2,1fr); }
  .moka-grid--3 { grid-template-columns:repeat(2,1fr); }
  .primary-nav { position:absolute; left:16px; right:16px; top:68px; display:none; padding:18px; border:1px solid var(--moka-line); border-radius:20px; background:var(--moka-paper); box-shadow:var(--moka-shadow); }
  .primary-nav.is-open { display:block; }
  .primary-nav ul { flex-direction:column; align-items:stretch; gap:12px; }
  .menu-toggle { display:block; }
  .site-header__cta { display:none; }
}

@media (max-width: 720px) {
  .moka-section { padding:64px 0; }
  .moka-hero__grid, .site-footer__grid, .moka-grid--3, .moka-grid--4, .moka-stats { grid-template-columns:1fr; }
  .moka-hero__art { min-height:430px; }
  .moka-cup { transform:translate(-50%,-50%) scale(.78); }
  .site-footer__grid { gap:26px; }
}

/* Assignment integrations */
.moka-contact-grid { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:24px; align-items:start; }
.moka-contact-sidebar, .moka-contact-main { display:grid; gap:24px; }
.moka-chat-card .moka-btn { margin-top:20px; }
.moka-plugin-slot { margin-top:28px; }
.moka-map { margin-top:24px; min-height:380px; overflow:hidden; border:1px solid var(--moka-line); border-radius:20px; background:var(--moka-cream); }
.moka-map iframe { width:100%; height:420px; border:0; display:block; }
.moka-map--plugin > * { width:100%; }
.moka-contact-main .moka-card { padding:32px; }
@media (max-width: 820px) { .moka-contact-grid { grid-template-columns:1fr; } }

/* Elementor compatibility */
.moka-elementor-content{width:100%;min-height:1px;}

/* =========================================================
   Moka Cafe 2.1 — native Elementor demo styling
   Content remains editable as normal Elementor widgets.
   ========================================================= */
.moka-elementor-content .elementor-section > .elementor-container{
  width:min(calc(100% - 32px), var(--moka-max));
  margin-inline:auto;
}
.moka-elementor-content .elementor-widget-text-editor p:last-child{margin-bottom:0}
.moka-elementor-content .moka-el-hero{
  background:
    radial-gradient(circle at 82% 24%, rgba(199,128,79,.22), transparent 24%),
    linear-gradient(135deg, var(--moka-paper), #f3e5d6);
  overflow:hidden;
}
.moka-elementor-content .moka-el-hero > .elementor-container{max-width:980px}
.moka-elementor-content .moka-el-hero-copy{max-width:900px}
.moka-elementor-content .moka-el-kicker p{
  margin:0 0 8px;color:var(--moka-caramel);font-size:.79rem;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;
}
.moka-elementor-content .moka-el-hero-title .elementor-heading-title{
  margin:0;color:var(--moka-espresso);font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.7rem,6.5vw,5.5rem);line-height:.96;letter-spacing:-.05em;
}
.moka-elementor-content .moka-el-section-title .elementor-heading-title{
  margin:0;color:var(--moka-espresso);font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;letter-spacing:-.035em;
}
.moka-elementor-content .moka-el-card-title .elementor-heading-title{
  color:var(--moka-espresso);font-family:Georgia,"Times New Roman",serif;
  font-size:1.5rem;line-height:1.12;
}
.moka-elementor-content .moka-el-lead,
.moka-elementor-content .moka-el-card-copy{color:var(--moka-muted);font-size:1.05rem}
.moka-elementor-content .moka-el-lead{max-width:760px}
.moka-elementor-content .moka-el-section{padding:78px 24px}
.moka-elementor-content .moka-el-section-soft{background:var(--moka-cream)}
.moka-elementor-content .moka-el-card-grid{padding:18px 24px 62px}
.moka-elementor-content .moka-el-card-grid > .elementor-container{gap:22px}
.moka-elementor-content .moka-el-card{
  height:100%;background:#fff;border:1px solid var(--moka-line);border-radius:24px;
  box-shadow:0 10px 34px rgba(47,33,27,.07);transition:transform .2s ease,box-shadow .2s ease;
}
.moka-elementor-content .moka-el-card:hover{transform:translateY(-3px);box-shadow:var(--moka-shadow)}
.moka-elementor-content .moka-el-meta p{color:var(--moka-caramel);font-size:1.12rem}
.moka-elementor-content .moka-el-stat .elementor-heading-title{
  color:inherit;font-family:Georgia,"Times New Roman",serif;font-size:3.1rem;
}
.moka-elementor-content .moka-el-section-dark{
  padding:68px 24px;background:var(--moka-espresso);color:#fff;
}
.moka-elementor-content .moka-el-section-dark .moka-el-card{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);box-shadow:none;color:#fff;
}
.moka-elementor-content .moka-el-section-dark .elementor-heading-title,
.moka-elementor-content .moka-el-section-dark .moka-el-section-title .elementor-heading-title,
.moka-elementor-content .moka-el-section-dark .moka-el-card-title .elementor-heading-title{color:#fff}
.moka-elementor-content .moka-el-section-dark .elementor-widget-text-editor{color:rgba(255,255,255,.74)}
.moka-elementor-content .moka-el-section-dark .moka-el-kicker p{color:#e9b486}
.moka-elementor-content .moka-el-cta{
  padding:64px 24px;background:linear-gradient(135deg,#efe1d0,#f8f0e7);border-top:1px solid var(--moka-line);
}
.moka-elementor-content .moka-el-button .elementor-button,
.moka-elementor-content .moka-el-button-small .elementor-button{
  border-radius:999px;background:var(--moka-espresso);color:#fff;font-weight:800;
  box-shadow:none;transition:.2s ease;
}
.moka-elementor-content .moka-el-button .elementor-button{padding:15px 23px}
.moka-elementor-content .moka-el-button-small .elementor-button{padding:11px 17px;font-size:.92rem}
.moka-elementor-content .moka-el-button .elementor-button:hover,
.moka-elementor-content .moka-el-button-small .elementor-button:hover{transform:translateY(-2px);background:var(--moka-cocoa)}
.moka-elementor-content .moka-el-button-alt .elementor-button{background:transparent;color:var(--moka-espresso);border:1px solid var(--moka-espresso)}
.moka-elementor-content .moka-el-contact-grid{padding:58px 24px}
.moka-elementor-content .moka-el-contact-grid > .elementor-container{gap:26px;align-items:flex-start}
.moka-elementor-content .moka-el-form .wpforms-container{margin:0}
.moka-elementor-content .moka-el-form input,
.moka-elementor-content .moka-el-form textarea,
.moka-elementor-content .moka-el-form select{border-radius:14px!important;border:1px solid var(--moka-line)!important;background:#fff!important}
.moka-elementor-content .moka-el-form button,
.moka-elementor-content .moka-el-form .wpforms-submit{border-radius:999px!important;background:var(--moka-espresso)!important;color:#fff!important;border:0!important;padding:12px 22px!important}
.moka-elementor-content .moka-el-map .moka-map{margin-top:8px}
.moka-elementor-content .moka-el-menu-heading{padding-bottom:16px}
.moka-elementor-content .elementor-divider-separator{border-color:var(--moka-line)!important}

@media (max-width: 767px){
  .moka-elementor-content .moka-el-hero{padding-left:10px!important;padding-right:10px!important}
  .moka-elementor-content .moka-el-section,
  .moka-elementor-content .moka-el-card-grid,
  .moka-elementor-content .moka-el-section-dark,
  .moka-elementor-content .moka-el-cta,
  .moka-elementor-content .moka-el-contact-grid{padding-left:10px!important;padding-right:10px!important}
  .moka-elementor-content .moka-el-card-grid > .elementor-container,
  .moka-elementor-content .moka-el-contact-grid > .elementor-container{gap:14px}
}

/* Moka Cafe 2.1 — editor-safe visual fallback. Elementor widget values remain
   editable; these rules only provide the Moka look when global defaults leak in. */
.moka-elementor-content .moka-el-hero > .elementor-container{align-items:center;gap:34px}
.moka-elementor-content .moka-el-hero-copy > .elementor-widget-button{display:inline-block;width:auto;margin:10px 10px 0 0}
.moka-elementor-content .moka-el-hero-copy .elementor-widget-text-editor{max-width:700px}
.moka-elementor-content .moka-el-hero-art-col{align-self:stretch}
.moka-elementor-content .moka-el-hero-art-widget,.moka-elementor-content .moka-el-hero-art-widget .elementor-widget-container{height:100%}
.moka-elementor-content .moka-el-coffee-art{
  position:relative;min-height:520px;height:100%;overflow:hidden;border-radius:36px;
  background:radial-gradient(circle at 68% 26%,#e9bf96 0 13%,transparent 14%),linear-gradient(135deg,#4c3026 0%,#2f211b 52%,#7e5945 100%);
  box-shadow:0 18px 50px rgba(47,33,27,.16)
}
.moka-elementor-content .moka-el-coffee-art:before{content:"";position:absolute;width:280px;height:280px;border:28px solid rgba(255,255,255,.12);border-radius:50%;left:52%;top:52%;transform:translate(-50%,-50%)}
.moka-elementor-content .moka-el-cup{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:250px;height:174px;border-radius:18px 18px 70px 70px;background:#f6eadc;box-shadow:0 35px 50px rgba(0,0,0,.2)}
.moka-elementor-content .moka-el-cup:before{content:"";position:absolute;width:108px;height:86px;border:22px solid #f6eadc;border-left:0;border-radius:0 50% 50% 0;right:-86px;top:33px}
.moka-elementor-content .moka-el-cup:after{content:"";position:absolute;width:198px;height:50px;border-radius:50%;background:#3e241a;left:26px;top:-13px;box-shadow:inset 0 0 0 13px #ead8c3}
.moka-elementor-content .moka-el-bean{position:absolute;width:28px;height:42px;border-radius:60% 40% 60% 40%;background:#1f1511;transform:rotate(28deg);opacity:.85}
.moka-elementor-content .moka-el-bean-1{left:11%;top:18%}.moka-elementor-content .moka-el-bean-2{right:12%;bottom:18%;transform:rotate(-38deg)}.moka-elementor-content .moka-el-bean-3{left:22%;bottom:10%;transform:rotate(70deg)}
.moka-elementor-content .moka-el-art-badge{position:absolute;right:24px;bottom:24px;max-width:220px;padding:16px 18px;border-radius:18px;background:rgba(255,250,244,.94);box-shadow:0 18px 50px rgba(47,33,27,.12);color:#746b64}
.moka-elementor-content .moka-el-art-badge strong{display:block;margin-bottom:2px;font-family:Georgia,"Times New Roman",serif;color:#2f211b;font-size:1.22rem}
.moka-elementor-content .moka-el-art-badge span{font-size:.88rem}

/* Higher specificity than Elementor's global defaults, but no !important: any
   explicit style selected by the user in Elementor still wins inline. */
.moka-elementor-content .elementor-widget.moka-el-hero-title .elementor-heading-title{color:#2f211b}
.moka-elementor-content .elementor-widget.moka-el-section-title .elementor-heading-title,
.moka-elementor-content .elementor-widget.moka-el-card-title .elementor-heading-title{color:#2f211b}
.moka-elementor-content .elementor-widget.moka-el-kicker{color:#c7804f}
.moka-elementor-content .elementor-widget.moka-el-button .elementor-button{background:#2f211b;color:#fff;border:1px solid #2f211b;border-radius:999px}
.moka-elementor-content .elementor-widget.moka-el-button-alt .elementor-button{background:transparent;color:#2f211b}
.moka-elementor-content .elementor-widget.moka-el-button .elementor-button:hover{background:#5a3d30;color:#fff}
@media(max-width:767px){
  .moka-elementor-content .moka-el-hero > .elementor-container{gap:10px}
  .moka-elementor-content .moka-el-coffee-art{min-height:390px;border-radius:26px}
  .moka-elementor-content .moka-el-cup{transform:translate(-50%,-50%) scale(.78)}
  .moka-elementor-content .moka-el-hero-copy > .elementor-widget-button{display:block;margin-right:0}
}