:root{
  --ocean-900:#0b3d3a;
  --ocean-700:#0f766e;
  --ocean-500:#14b8a6;
  --ocean-100:#e6f6f4;
  --coral-600:#ea580c;
  --coral-500:#f97316;
  --sand-50:#fdfaf5;
  --sand-100:#f7f1e6;
  --ink-900:#1f2a2a;
  --ink-600:#4a5959;
  --ink-400:#7c8a8a;
  --line:#e4ddce;
  --star:#f5a524;
  --danger:#dc2626;
  --radius:16px;
  --shadow:0 1px 2px rgba(15,40,38,.06), 0 8px 24px rgba(15,40,38,.06);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--sand-50);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}

header.hero{
  background:linear-gradient(160deg,var(--ocean-900) 0%,var(--ocean-700) 60%,var(--ocean-500) 100%);
  color:#fff;
  padding:36px 0 40px;
  position:relative;
  overflow:hidden;
}
header.hero::after{
  content:"";
  position:absolute;
  right:-60px; bottom:-90px;
  width:280px; height:280px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
}
.hero-inner{
  max-width:1100px;margin:0 auto;padding:0 20px;position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "title  button"
    "badge  badge"
    "sub    sub";
  align-items:center;
  column-gap:12px;
  row-gap:10px;
}

h1.hero-title{grid-area:title;font-size:28px;margin:0;font-weight:750;letter-spacing:-.01em;}
.hero-eyebrow{
  grid-area:badge;
  justify-self:start;
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.14);
  padding:6px 12px;border-radius:999px;
  white-space:nowrap;
}
.hero-eyebrow svg{width:14px;height:14px;flex-shrink:0;}
.hero-sub{grid-area:sub;font-size:15px;color:#d6f3ee;max-width:560px;line-height:1.5;margin:0;}

.btn-publish{
  grid-area:button;
  align-self:center;justify-self:end;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--coral-500);color:#fff;border:none;
  width:38px;height:38px;padding:0;border-radius:10px;cursor:pointer;
  box-shadow:0 6px 16px rgba(234,88,12,.35);
  flex-shrink:0;
}
.btn-publish svg{width:18px;height:18px;flex-shrink:0;}
.btn-publish-label{display:none;}
.btn-publish:hover{background:var(--coral-600);}

@media (min-width:640px){
  .hero-inner{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:
      "title badge button"
      "sub   sub    .";
    column-gap:14px;
    row-gap:8px;
  }
  .btn-publish{
    width:auto;height:auto;
    padding:11px 18px;border-radius:12px;
  }
  .btn-publish svg{width:16px;height:16px;}
  .btn-publish-label{display:inline;}
}

main{max-width:1100px;margin:28px auto 60px;padding:0 20px;}

.search-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:20px;
}

.search-toggle{
  display:none;
  width:100%;
  align-items:center;gap:10px;
  background:none;border:none;padding:0;
  font-size:14.5px;font-weight:650;color:var(--ink-900);
  cursor:pointer;text-align:left;
}
.search-toggle svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-400);}
.search-toggle span{flex:1;}
.search-toggle .chevron{width:16px;height:16px;transition:transform .2s ease;}
.search-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg);}

.search-collapsible{
  overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}

@media (max-width:639px){
  .search-toggle{display:flex;}
  .search-collapsible{max-height:0;opacity:0;margin-top:0;}
  .search-collapsible.is-expanded{max-height:600px;opacity:1;margin-top:14px;}
}

.search-row{display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--sand-50);
}
.search-row svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-400);}
.search-row input{
  border:none;background:transparent;outline:none;font-size:15px;width:100%;color:var(--ink-900);
}
.search-row input::placeholder{color:var(--ink-400);}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--ocean-900);
  background:var(--ocean-100);border:1px solid transparent;
  padding:7px 13px;border-radius:999px;cursor:pointer;user-select:none;
  transition:.15s;
}
.chip:hover{background:#d7f0ec;}
.chip.active{background:var(--ocean-700);color:#fff;}

.section-label{
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-400);margin:26px 2px 12px;
}

.grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:640px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .grid{grid-template-columns:repeat(4,1fr);} }

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;position:relative;
  transition:transform .15s, box-shadow .15s;
}
.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,40,38,.08),0 14px 28px rgba(15,40,38,.1);}

.badge-top{
  position:absolute;top:-9px;right:14px;
  background:var(--coral-500);color:#fff;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;display:flex;align-items:center;gap:4px;
  box-shadow:0 4px 10px rgba(234,88,12,.35);
}
.badge-top svg{width:11px;height:11px;}

.card-top{display:flex;align-items:flex-start;gap:12px;}
.avatar{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--ocean-100);color:var(--ocean-700);
}
.avatar svg{width:24px;height:24px;}
.card-name{font-size:16px;font-weight:700;margin:0;color:var(--ink-900);}
.cat-tag{
  display:inline-block;font-size:11.5px;font-weight:600;color:var(--ocean-700);
  background:var(--ocean-100);padding:2px 8px;border-radius:6px;margin-top:4px;
}

.rating-row{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-600);}
.stars{color:var(--star);letter-spacing:1px;font-size:14px;}
.rating-count{color:var(--ink-400);}

.card-desc{font-size:13.5px;color:var(--ink-600);line-height:1.5;margin:0;}

.card-footer{
  display:flex;gap:8px;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);
}
.btn{
  flex:1;text-align:center;font-size:13.5px;font-weight:650;
  padding:9px 10px;border-radius:10px;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;cursor:pointer;
}
.btn svg{width:15px;height:15px;}
.btn-whatsapp{background:#25D366;color:#fff;}
.btn-whatsapp:hover{background:#1fbd5a;}
.btn-rate{background:var(--sand-100);color:var(--ink-900);border-color:var(--line);}
.btn-rate:hover{background:#efe6d3;}
.btn-rate:disabled,.btn-whatsapp:disabled{opacity:.55;cursor:not-allowed;}

/* Paginacion */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:6px;
  flex-wrap:wrap;margin:28px 0 4px;
}
.page-btn,.page-nav{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 4px;
  border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink-900);
  font-size:13.5px;font-weight:650;cursor:pointer;
  transition:.15s;
}
.page-btn:hover,.page-nav:hover:not(:disabled){background:var(--ocean-100);border-color:transparent;}
.page-btn.active{background:var(--ocean-700);border-color:transparent;color:#fff;}
.page-nav svg{width:16px;height:16px;}
.page-nav:disabled{opacity:.35;cursor:not-allowed;}
.page-ellipsis{color:var(--ink-400);padding:0 4px;font-weight:650;}

.empty-state,.error-state{
  text-align:center;padding:50px 20px;color:var(--ink-400);font-size:14px;
}
.error-state p{margin:0 0 14px;color:var(--danger);}
.error-state .btn{display:inline-flex;flex:none;padding:9px 18px;}

/* Skeleton loading */
.skeleton-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:640px){ .skeleton-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .skeleton-grid{grid-template-columns:repeat(4,1fr);} }
.card.skeleton{gap:12px;}
.sk-line{background:linear-gradient(90deg,var(--sand-100) 25%,#efe6d3 37%,var(--sand-100) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:8px;
}
.sk-avatar{width:46px;height:46px;border-radius:12px;}
.sk-title{height:14px;width:70%;}
.sk-text{height:11px;width:100%;}
.sk-text.short{width:60%;}
@keyframes shimmer{
  0%{background-position:100% 0;}
  100%{background-position:0 0;}
}

/* Modales */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,40,38,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:20;
}
.modal-card{
  background:#fff;border-radius:var(--radius);padding:26px;width:100%;max-width:440px;
  box-shadow:var(--shadow);position:relative;max-height:90vh;overflow-y:auto;
}
.modal-card-small{max-width:360px;text-align:center;}
.modal-close{
  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;
  border:none;background:var(--sand-100);color:var(--ink-600);font-size:18px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:#efe6d3;}
.modal-card h2{margin:0 0 6px;font-size:19px;color:var(--ocean-900);}
.modal-sub{font-size:13.5px;color:var(--ink-600);margin:0 0 18px;line-height:1.5;}

#publishForm label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-600);margin-bottom:14px;}
#publishForm input,#publishForm select,#publishForm textarea{
  border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;
  font-family:inherit;color:var(--ink-900);resize:vertical;
}
#publishForm input:focus,#publishForm select:focus,#publishForm textarea:focus{border-color:var(--ocean-500);}

.form-error{color:var(--danger);font-size:13px;margin:0 0 6px;min-height:16px;}

.modal-actions{display:flex;gap:10px;margin-top:6px;}
.modal-actions .btn{flex:1;}

.modal-success{text-align:center;padding:6px 4px 2px;}
.modal-success svg{width:44px;height:44px;color:var(--ocean-700);margin-bottom:12px;}
.modal-success p{font-size:14.5px;color:var(--ink-600);line-height:1.55;margin:0 0 18px;}
.modal-success .btn{display:inline-flex;flex:none;padding:9px 22px;}

/* Selector de estrellas */
.star-picker{display:flex;justify-content:center;gap:8px;margin:6px 0 18px;}
.star-btn{
  background:none;border:none;font-size:34px;line-height:1;cursor:pointer;
  color:var(--line);transition:transform .1s, color .1s;padding:0;
}
.star-btn:hover{transform:scale(1.1);}
.star-btn.filled{color:var(--star);}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  background:var(--ocean-900);color:#eafffb;font-size:13.5px;font-weight:600;
  padding:12px 20px;border-radius:12px;box-shadow:0 8px 24px rgba(15,40,38,.25);
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:30;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

@media (max-width:480px){
  h1.hero-title{font-size:23px;}
}