/* =========================
   AIMARAS — MINIMAL RETAIL UI
   Claro por defecto + oscuro elegante
   ========================= */

/* 1) TOKENS */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --card:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --line:#e5e7eb;

  --accent:#ff2db2;      /* fucsia */
  --accent-ink:#0b0b10;  /* texto sobre fucsia */
  --shadow:0 10px 30px rgba(0,0,0,.06);

  --radius:18px;
  --container:1120px;
}

html[data-theme="dark"]{
  --bg:#0b0c10;
  --surface:#0f1117;
  --card:#121522;
  --text:#f3f4f6;
  --muted:#a7afbd;
  --line:rgba(255,255,255,.10);
  --shadow:0 14px 40px rgba(0,0,0,.35);
}

/* 2) BASE */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 18px}
.main{padding:26px 0 42px}

/* 3) HEADER */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.80);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
html[data-theme="dark"] .header{background:rgba(11,12,16,.72)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brand__logo{
  width:44px;height:44px;border-radius:14px;background:#000;
  display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);
}
.brand__logo img{width:100%;height:100%;object-fit:cover}
.brand__name{font-weight:950;letter-spacing:.2px;line-height:1.1}
.brand__tag{font-size:12px;color:var(--muted);margin-top:3px}

.nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  font-size:14px;padding:10px 12px;border-radius:999px;color:var(--muted);
}
.nav a:hover{color:var(--text);background:rgba(17,17,17,.05)}
html[data-theme="dark"] .nav a:hover{background:rgba(255,255,255,.06)}

/* Primary CTA in navbar */
.nav .cta{background:var(--accent);color:var(--accent-ink);font-weight:900}
.nav .cta:hover{filter:brightness(.97)}

/* Mobile hamburger */
.nav-toggle{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  display:none;
}
.nav-toggle:active{transform:translateY(1px)}
.burger{
  width:18px;height:12px;position:relative;display:inline-block;
}
.burger span{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--text);
}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:5px}
.burger span:nth-child(3){bottom:0}

.mobile-menu{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
}
html[data-theme="dark"] .mobile-menu{background:rgba(11,12,16,.86)}
.mobile-menu__inner{padding:10px 18px;display:flex;flex-direction:column;gap:6px}
.mobile-menu a{
  padding:12px 12px;border-radius:14px;color:var(--text);
  border:1px solid var(--line);background:var(--surface);
}
.mobile-menu a.cta{background:var(--accent);border:none;color:var(--accent-ink);font-weight:900}

/* 4) BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-weight:800;cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{border:none;background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{filter:brightness(.97)}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:rgba(17,17,17,.05)}
html[data-theme="dark"] .btn--ghost:hover{background:rgba(255,255,255,.06)}
.btn--sm{padding:9px 12px;font-size:13px}

/* 5) HERO */
.hero{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:22px;
}
.hero--mini h1{font-size:30px}
.hero h1{margin:0;font-size:32px;letter-spacing:-0.6px}
.hero p{margin:10px 0 0;color:var(--muted);max-width:70ch;font-size:15px;line-height:1.55}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* 6) BADGE */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);
  border:1px solid var(--line);
  background:rgba(17,17,17,.02);
  padding:6px 10px;border-radius:999px;
}
html[data-theme="dark"] .badge{background:rgba(255,255,255,.04)}

/* 7) SECTIONS */
.section{margin-top:22px}
.section__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin:6px 0 12px;
}
.section__head h2{margin:0;font-size:20px;letter-spacing:-0.3px}
.muted{color:var(--muted);font-size:13px}
.link{color:var(--muted);font-weight:800;font-size:14px}
.link:hover{color:var(--text)}

/* 8) CAROUSEL (Nuevos) */
.carousel{
  display:flex;gap:14px;overflow:auto;padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:rgba(17,17,17,.15);border-radius:999px}
html[data-theme="dark"] .carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}

.p-card{
  min-width:240px;max-width:240px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
  scroll-snap-align:start;
}
.p-card__img{width:100%;height:180px;object-fit:cover;background:#f3f4f6}
html[data-theme="dark"] .p-card__img{background:#0f1117}
.p-card__body{padding:12px 12px 0}
.p-card__title{font-weight:950;font-size:14px}
.p-card__meta{color:var(--muted);font-size:12px;margin-top:4px}
.p-card__actions{display:flex;gap:8px;padding:12px}

/* 9) GRIDS + CARDS */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:18px}
.card{
  grid-column:span 4;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.card:hover{transform:translateY(-2px)}
.card__img{width:100%;height:230px;object-fit:cover;background:#f3f4f6}
html[data-theme="dark"] .card__img{background:#0f1117}
.card__body{padding:14px 14px 6px}
.card__title{margin:10px 0 6px;font-weight:950;letter-spacing:-0.2px}
.card__text{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.card__actions{display:flex;gap:10px;flex-wrap:wrap;padding:12px 14px 14px}

/* Categories cards */
.cat-card{
  grid-column:span 4;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:16px;
  transition:transform .12s ease;
}
.cat-card:hover{transform:translateY(-2px)}
.cat-card__title{font-weight:980;letter-spacing:-0.2px}
.cat-card__text{color:var(--muted);margin-top:6px;font-size:14px}

/* 10) FORMS */
.form{
  max-width:760px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.field{display:grid;gap:6px;margin-bottom:12px}
label{font-size:13px;color:var(--muted)}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  outline:none;
}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:rgba(255,45,178,.45);
  box-shadow:0 0 0 4px rgba(255,45,178,.12);
}

/* 11) FOOTER */
.footer{border-top:1px solid var(--line);padding:18px 0;background:var(--surface)}
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer__title{font-weight:950}
.footer__text{color:var(--muted);font-size:14px;margin-top:4px}
.footer__links{display:flex;gap:12px;flex-wrap:wrap}
.footer__links a{color:var(--muted)}
.footer__links a:hover{color:var(--text)}

/* 12) THEME SWITCH */
.theme-switch{position:relative;width:50px;height:28px;margin-left:6px}
.theme-switch input{position:absolute;opacity:0;width:0;height:0}
.theme-switch label{
  display:block;width:100%;height:100%;
  background:rgba(17,17,17,.08);
  border:1px solid var(--line);
  border-radius:999px;cursor:pointer;transition:background .25s ease;
  position:relative;
}
html[data-theme="dark"] .theme-switch label{background:rgba(255,255,255,.08)}
.theme-switch label::before{
  content:"";
  position:absolute;width:22px;height:22px;left:3px;top:2px;
  background:#fff;border-radius:50%;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  transition:transform .25s ease;
}
.theme-switch input:checked + label{background:var(--accent);border-color:transparent}
.theme-switch input:checked + label::before{transform:translateX(22px)}

/* 13) RESPONSIVE */
@media (max-width: 980px){
  .card{grid-column:span 6}
  .cat-card{grid-column:span 6}
  .hero h1{font-size:28px}
}
@media (max-width: 760px){
  .nav a{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .mobile-menu{display:block}
  .mobile-menu[hidden]{display:none}
}
@media (max-width: 620px){
  .brand{min-width:auto}
  .card{grid-column:span 12}
  .cat-card{grid-column:span 12}
  .p-card{min-width:78%;max-width:78%}
  .card__img{height:210px}
}
/* ===== FOOTER BLOQUES ===== */
.footer__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  padding: 18px 0;
}

.footer__block{
  grid-column: span 3;
}

.footer__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}

.footer__subtitle{
  font-weight: 900;
  margin-bottom: 8px;
}

.footer__text{
  color: var(--muted);
  font-size: 14px;
  margin-top: 6px;
  line-height: 1.5;
}

.footer__link{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  margin-top: 8px;
  font-weight: 800;
  font-size: 14px;
}

.footer__link:hover{
  filter: brightness(.98);
}

.footer__link--cta{
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
}

.footer__bottom{
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.footer__small{
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 980px){
  .footer__block{ grid-column: span 6; }
}

@media (max-width: 620px){
  .footer__block{ grid-column: span 12; }
}
/* ===== MAP ===== */
.map-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.map-card iframe{
  width: 100%;
  height: 360px;
  display: block;
}

@media (max-width: 620px){
  .map-card iframe{ height: 300px; }
}