/* ==========================================================================
   CHELAVIN — hoja de estilos compartida
   Paleta "Opción B" aprobada (mockup final, artboards Main/Catalogo/Producto)
   ========================================================================== */

:root {
  --bg: oklch(99% 0.003 80);
  --surface: oklch(100% 0 0);
  --ink: oklch(19% 0.01 40);
  --ink-soft: oklch(46% 0.02 45);

  --rosa-soft: #FBEFF2;
  --rosa-deep: #9C2952;
  --morado-soft: #EDE1EF;
  --morado-deep: #5B2E68;
  --morado-brand: #5B2E68;
  --verde-soft: #E3ECE4;
  --verde-deep: #2F6B4F;

  --line: #E6E1D8;
  --wa: #25D366;
  --wa-deep: #1EA952;

  --max-width: 480px;      /* ancho del contenido (crece en pantallas grandes) */
  --bar-max-width: 480px;  /* ancho de la barra de carrito / CTA flotante (se mantiene compacta) */
}

/* --------------------------------------------------------- Breakpoints */
/* Mobile-first: por defecto el diseño es el de celular (390-480px, tal
   cual el mockup aprobado). Estas media queries lo adaptan a tablet y
   escritorio ampliando el contenedor y las columnas de las cuadrículas,
   sin tocar el diseño base. */

@media (min-width: 640px) {
  :root { --max-width: 720px; }
}

@media (min-width: 1024px) {
  :root { --max-width: 1100px; --bar-max-width: 560px; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Work Sans", system-ui, -apple-system, sans-serif;
}

h1, h2, h3 {
  font-family: "Baloo 2", "Work Sans", sans-serif;
  margin: 0;
}

a { color: var(--morado-deep); text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

img { max-width: 100%; display: block; }

.wrap {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 96px; /* espacio para la barra flotante del carrito */
  transition: max-width 0.15s ease;
}

/* ---------------------------------------------------------------- Header */

.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--rosa-soft);
  box-shadow: 0 3px 10px oklch(0% 0 0 / 0.07);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brandbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brandbar img.logo {
  height: 46px;
  width: auto;
  display: block;
}

.brandbar .wordmark {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.015em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.brandbar .menu-btn {
  flex: 0 0 auto;
  padding: 6px;
}

/* Menú horizontal (solo visible en escritorio, ver breakpoint abajo) */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 28px;
}
.desktop-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.desktop-nav a:hover,
.desktop-nav a.active {
  color: var(--morado-deep);
}

@media (min-width: 1024px) {
  .brandbar { padding: 14px 32px; }
  .brandbar .menu-btn { display: none; }
  .desktop-nav { display: flex; }
  /* El menú deslizable de celular no debe poder abrirse en escritorio */
  .nav-panel, .nav-overlay { display: none !important; }
}

.brand-stripe {
  display: flex;
  height: 4px;
}
.brand-stripe > div { flex: 1; }
.brand-stripe .a { background: var(--rosa-deep); }
.brand-stripe .b { background: var(--morado-deep); }
.brand-stripe .c { background: var(--verde-deep); }

/* ------------------------------------------------------------- Menu/nav */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.35);
  z-index: 30;
  display: none;
}
.nav-overlay.open { display: block; }

.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  max-width: 320px;
  background: var(--surface);
  z-index: 31;
  padding: 22px 22px;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  box-shadow: -8px 0 30px oklch(0% 0 0 / 0.15);
}
.nav-panel.open { transform: translateX(0); }

.nav-panel .close-btn { margin-bottom: 18px; }

.nav-panel a {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-panel a:hover { color: var(--morado-deep); }

/* ---------------------------------------------------------------- Hero */

.hero {
  margin: 16px 20px 0 20px;
  padding: 26px 22px;
  border-radius: 24px;
  background: var(--rosa-soft);
  position: relative;
  overflow: hidden;
}
.hero .hero-copy { position: relative; max-width: 210px; z-index: 1; }
.hero .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rosa-deep);
  text-transform: uppercase;
}
.hero h1 {
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 6px;
}
.hero p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.85;
  margin: 12px 0 18px 0;
}
/* Botón redondeado reutilizable tipo "pill" (usado por el hero y por los
   botones de WhatsApp fuera de la barra flotante, ej. Nosotros / Cómo
   comprar). */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.btn-pill.wa { background: var(--wa); }
.btn-pill.wa:hover,
.btn-pill.wa:active { background: var(--wa-deep); }

.hero .btn-primary {
  background: var(--morado-brand);
  color: #fff;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}
.hero img.hero-img {
  position: absolute;
  height: 150px;
  width: auto;
  right: -14px;
  bottom: -6px;
}

@media (min-width: 640px) {
  .hero { padding: 40px 40px; }
  .hero .hero-copy { max-width: 340px; }
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 15px; }
  .hero img.hero-img { height: 220px; right: 30px; }
}

@media (min-width: 1024px) {
  .hero { padding: 56px 56px; }
  .hero .hero-copy { max-width: 420px; }
  .hero h1 { font-size: 36px; }
  .hero img.hero-img { height: 280px; right: 60px; }
}

/* ------------------------------------------------------------ Category */

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 20px 0 20px;
}
@media (min-width: 640px) {
  .category-grid { gap: 18px; padding: 28px 20px 0 20px; }
  .category-card .cover { height: 180px; }
}
@media (min-width: 1024px) {
  .category-card .cover { height: 220px; }
}
.category-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
}
.category-card .cover { height: 130px; overflow: hidden; }
.category-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.category-card .info { padding: 10px 12px 14px 12px; }
.category-card .title { font-family: "Baloo 2"; font-weight: 700; font-size: 15px; }
.category-card .subtitle { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ------------------------------------------------------------- Section */

.section { padding: 26px 20px 0 20px; }
.section h2 { font-size: 18px; margin-bottom: 14px; }

/* --------------------------------------------------------------- Tabs */

.tabs {
  display: flex;
  gap: 8px;
  padding: 14px 20px 4px 20px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tab.active {
  background: var(--morado-brand);
  color: #fff;
  border-color: var(--morado-brand);
}

/* ----------------------------------------------------------- Products */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 20px 0 20px;
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 20px 0 20px; }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
.product-card {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
  display: flex;
  flex-direction: column;
}
.product-card .thumb-link { display: block; }
.product-card img.thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.product-card .body { padding: 10px 12px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.product-card .name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 34px;
  color: var(--ink);
}
.product-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
}
.product-card .price {
  font-family: "Baloo 2";
  font-weight: 700;
  font-size: 15px;
}
.product-card .price .mxn {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 2px;
}
.add-btn {
  background: var(--wa);
  color: #fff;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.add-btn:active { background: var(--wa-deep); }

/* "Ver más productos" tile (catálogo destacados en Inicio) */
.more-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
  min-height: 190px;
  display: block;
}
.more-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.more-tile .veil {
  position: absolute;
  inset: 0;
  background: oklch(100% 0 0 / 0.74);
}
.more-tile .label {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
}
.more-tile .label-title { font-family: "Baloo 2"; font-weight: 700; font-size: 14px; color: var(--morado-deep); }
.more-tile .label-sub { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }

/* ---------------------------------------------------------------- Footer */

.site-footer {
  margin-top: 32px;
  padding: 22px 20px 24px 20px;
  border-top: 1px solid var(--line);
}
.site-footer .socials { display: flex; gap: 14px; margin-bottom: 12px; }
.site-footer .socials svg.disabled { opacity: 0.5; }
.site-footer .note { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }

/* --------------------------------------------------------- Cart bar */

.cart-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: calc(100% - 32px);
  max-width: calc(var(--bar-max-width) - 32px);
  background: var(--rosa-soft);
  color: var(--ink);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 26px oklch(0% 0 0 / 0.2);
  z-index: 25;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.cart-bar.hidden { display: none; }

/* En páginas con un botón fijo propio abajo (ej. producto.html tiene
   "Agregar al pedido"), la barra "Ver pedido" se sube para no encimarse. */
body.has-fixed-cta .cart-bar { bottom: 88px; }
body.has-fixed-cta .wrap { padding-bottom: 150px; }
.cart-bar .summary { font-size: 13px; }
.cart-bar .view-order {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--wa);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* ------------------------------------------------------------ Product page */

.product-page .back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0 20px;
}
.product-page .main-image {
  margin: 14px 20px 0 20px;
  border-radius: 22px;
  overflow: hidden;
}
.product-page .main-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.product-page .info { padding: 20px 20px 0 20px; }
.product-page .category-label {
  font-size: 12px;
  color: var(--rosa-deep);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.product-page h1 { font-size: 21px; margin-top: 6px; line-height: 1.25; }
.product-page .price {
  font-family: "Baloo 2";
  font-weight: 700;
  font-size: 24px;
  margin-top: 10px;
}
.product-page .price .mxn { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-left: 4px; }
.product-page .desc { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-top: 14px; }

/* En tablet/escritorio la foto y la info se acomodan lado a lado en vez
   de apiladas, para aprovechar el ancho extra. */
@media (min-width: 768px) {
  #product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    padding: 0 20px;
  }
  .product-page .main-image { margin: 24px 0 0 0; }
  .product-page .info { padding: 24px 0 0 0; }
  .product-page h1 { font-size: 26px; }
  .product-page .price { font-size: 28px; }
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) {
  .related-grid { gap: 16px; }
}
.related-card {
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
}
.related-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.related-card .body { padding: 7px 8px 9px 8px; }
.related-card .name { font-size: 11px; font-weight: 600; line-height: 1.25; min-height: 28px; }
.related-card .price { font-family: "Baloo 2"; font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.related-card .price .mxn { font-size: 9px; font-weight: 600; color: var(--ink-soft); margin-left: 2px; }

.cta-fixed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: calc(100% - 32px);
  max-width: calc(var(--bar-max-width) - 32px);
  z-index: 25;
}
.cta-fixed .btn-add {
  width: 100%;
  background: var(--morado-brand);
  color: #fff;
  border-radius: 16px;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px oklch(0% 0 0 / 0.15);
}
.cta-fixed .btn-add:active { background: var(--morado-deep); }

/* --------------------------------------------------------- Simple pages */

.simple-page { padding: 20px; max-width: 640px; }
@media (min-width: 640px) {
  .simple-page { padding: 32px 20px; }
}
.simple-page h1 { font-size: 22px; margin-bottom: 16px; }
.simple-page h2 { font-size: 16px; margin: 20px 0 8px 0; }
.simple-page p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px 0; }
.simple-page .step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.simple-page .step .num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--morado-soft);
  color: var(--morado-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

/* -------------------------------------------------------------- Toast */

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  bottom: 96px;
  background: var(--morado-brand);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 40;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------- Cart page/modal */

.order-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}
.order-sheet.open { display: block; }
.order-sheet .overlay {
  position: absolute;
  inset: 0;
  background: oklch(0% 0 0 / 0.35);
}
.order-sheet .panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  max-height: 82vh;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Encabezado y pie NO hacen scroll; solo la lista de productos en medio.
   Así el botón "Enviar pedido por WhatsApp" siempre queda visible,
   sin importar cuántos productos tenga el pedido. */
.order-sheet .panel-header {
  flex: 0 0 auto;
  position: relative;
  padding: 20px 20px 12px 20px;
}
.order-sheet h2 { font-size: 18px; margin: 0; }
.order-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 20px;
  -webkit-overflow-scrolling: touch;
}
.order-sheet .panel-footer {
  flex: 0 0 auto;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px oklch(0% 0 0 / 0.05);
}
.order-sheet .panel-footer .btn-wa {
  width: 100%;
  background: var(--wa);
  color: #fff;
  border-radius: 16px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 12px;
  box-shadow: 0 8px 20px oklch(0% 0 0 / 0.15);
}
.order-sheet .panel-footer .btn-wa:active { background: var(--wa-deep); }
.order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.order-item img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.order-item .details { flex: 1; min-width: 0; }
.order-item .details .name { font-size: 13px; font-weight: 600; }
.order-item .details .price { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.order-item .qty-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.order-item .qty-ctrl button {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--morado-soft);
  color: var(--morado-deep);
  font-weight: 700;
  font-size: 15px;
}
.order-item .remove-item {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--rosa-deep);
  margin-left: 2px;
}
.order-item .remove-item:hover,
.order-item .remove-item:active {
  background: var(--rosa-soft);
}
.order-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 0 0 0;
}
.order-sheet .close-btn { position: absolute; top: 16px; right: 16px; }
.empty-cart { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 40px 0; }

/* ========================================================================
   REDISEÑO 2026 — una tienda más cálida, clara y comercial
   ======================================================================== */
:root {
  --bg: #fffaf7; --surface: #fff; --ink: #282126; --ink-soft: #71666d;
  --rosa-soft: #fcecef; --rosa-deep: #a62957; --morado-soft: #f0e8f2;
  --morado-deep: #613266; --morado-brand: #613266; --verde-deep: #39705c;
  --line: #eadfe2; --shadow: 0 12px 35px rgba(83,48,65,.10);
}
body { background: linear-gradient(180deg,#fff 0,#fffaf7 420px); }
.wrap { background: transparent; }
.announcement { background:#613266; color:#fff; text-align:center; padding:7px 12px; font-size:11px; font-weight:700; letter-spacing:.035em; }
.brandbar { background:rgba(255,250,247,.94); box-shadow:none; border-bottom:1px solid rgba(97,50,102,.08); backdrop-filter:blur(12px); }
.brandbar .wordmark { font-size:30px; letter-spacing:.04em; }
.brand-stripe { display:none; }
.desktop-nav a { position:relative; }
.desktop-nav a.active:after { content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px; background:var(--rosa-deep); }

.hero { margin-top:22px; min-height:410px; padding:38px 28px; background:linear-gradient(135deg,#fff0f3 0%,#f4e9f2 58%,#e4efe9 100%); border-radius:30px; box-shadow:var(--shadow); display:flex; align-items:flex-start; }
.hero:before { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-65px; top:-80px; background:rgba(255,255,255,.45); }
.hero .hero-copy { max-width:75%; }
.hero h1 { font-size:34px; line-height:1.05; margin-top:9px; letter-spacing:-.02em; }
.hero p { font-size:15px; max-width:550px; }
.hero img.hero-img { height:170px; right:10px; bottom:0; filter:drop-shadow(0 13px 12px rgba(75,42,59,.15)); }
.hero-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.hero .btn-primary,.btn-secondary { padding:13px 22px; box-shadow:0 8px 18px rgba(97,50,102,.18); }
.text-link { font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.category-grid { gap:16px; padding-top:26px; }
.category-card { position:relative; border:1px solid rgba(97,50,102,.08); box-shadow:0 8px 24px rgba(83,48,65,.08); transition:.2s ease; }
.category-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.category-card .cover { height:170px; }
.category-card .info { padding:14px 16px 17px; }
.category-card .title { font-size:18px; color:var(--ink); }
.category-card .subtitle { font-size:12px; line-height:1.45; }
.section { padding-top:34px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:15px; }
.section-heading h2 { margin:2px 0 0; font-size:24px; }
.section-heading>a { font-size:13px; font-weight:700; }
.section-kicker { color:var(--rosa-deep); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.section .product-grid { padding:0; }
.product-card { border:1px solid rgba(97,50,102,.07); box-shadow:0 8px 24px rgba(83,48,65,.07); transition:.2s ease; }
.product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.product-card .thumb-link { background:#f6f1ef; overflow:hidden; }
.product-card img.thumb { transition:transform .35s ease; }
.product-card:hover img.thumb { transform:scale(1.035); }
.product-card .body { padding:13px 14px 14px; }
.product-card .name { font-size:13px; min-height:35px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card .price { font-size:18px; color:var(--rosa-deep); }
.product-card .price .mxn,.price .mxn { font-family:"Work Sans"; font-size:10px; font-weight:600; margin-left:3px; text-transform:none; }
.add-btn { width:auto; height:32px; padding:0 11px; display:flex; align-items:center; gap:5px; background:var(--morado-brand); font-size:11px; font-weight:700; }
.add-btn b { font-size:16px; }
.trust-strip { margin:38px 20px 0; display:grid; gap:12px; }
.trust-strip>div { background:#fff; border:1px solid var(--line); border-radius:18px; padding:17px; display:grid; grid-template-columns:32px 1fr; align-items:center; }
.trust-strip>div>span { grid-row:1/3; font-size:24px; color:var(--rosa-deep); }
.trust-strip strong { font-size:13px; }
.trust-strip small { font-size:11px; color:var(--ink-soft); margin-top:2px; }

.catalog-head { padding:30px 20px 7px; }
.catalog-head h1 { font-size:34px; line-height:1; margin-top:4px; }
.catalog-head p { margin:8px 0 0; color:var(--ink-soft); font-size:14px; }
.catalog-tools { display:grid; grid-template-columns:1fr; gap:9px; padding:14px 20px 0; }
.search-box { height:46px; background:#fff; border:1px solid var(--line); border-radius:14px; display:flex; align-items:center; gap:9px; padding:0 14px; box-shadow:0 5px 15px rgba(83,48,65,.04); }
.search-box span { font-size:22px; color:var(--morado-deep); }
.search-box input { width:100%; border:0; outline:0; font:inherit; background:transparent; color:var(--ink); }
#catalog-sort { height:44px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); padding:0 12px; font:600 12px "Work Sans"; }
.tabs { padding-top:12px; }
.tab { padding:9px 15px; box-shadow:0 3px 10px rgba(83,48,65,.04); }
.load-more-wrap { text-align:center; padding:28px 20px 0; }
.btn-secondary { color:#fff; background:var(--morado-brand); border-radius:999px; font-weight:700; }
.btn-secondary[hidden] { display:none; }
.empty-state { margin:40px 20px; padding:35px; text-align:center; border:1px dashed #d8c7cf; border-radius:20px; color:var(--ink-soft); }
.empty-state strong,.empty-state span { display:block; }
.empty-state strong { color:var(--ink); margin-bottom:6px; }

.product-page .main-image { background:#f5efed; box-shadow:var(--shadow); }
.product-page h1 { font-size:27px; }
.stock-badge { display:inline-block; margin-top:10px; padding:6px 10px; border-radius:999px; color:var(--verde-deep); background:#e8f3ed; font-size:11px; font-weight:800; }
.product-note { border-left:3px solid var(--rosa-deep); padding:10px 12px; background:var(--rosa-soft); border-radius:0 10px 10px 0; color:var(--ink-soft); font-size:12px; margin-top:15px; }
.product-page .desc { color:var(--ink-soft); margin-top:20px; }
.product-page .desc p { font-size:14px; line-height:1.65; margin:0 0 13px; }
.product-page .desc h3 { color:var(--ink); font:700 15px "Baloo 2"; margin:17px 0 5px; }
.simple-page { margin:20px; padding:28px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.simple-page h1 { font-size:30px; }
.simple-page .step { padding:14px 0; margin:0; border-bottom:1px solid var(--line); }
.site-footer { margin-top:42px; background:#f8eff2; border:0; border-radius:24px 24px 0 0; }
.footer-brand { display:flex; flex-direction:column; margin-bottom:18px; }
.footer-brand strong { font-family:"Baloo 2"; font-size:20px; letter-spacing:.05em; }
.footer-brand span { color:var(--ink-soft); font-size:12px; }
.footer-copy { font-size:10px; color:var(--ink-soft); margin-top:15px; }
.footer-copy a { font-weight:700; }
.cart-bar { background:#fff; border:1px solid var(--line); }
.cart-bar .view-order { background:var(--morado-brand); }

@media (min-width:640px) {
  .hero { min-height:380px; align-items:center; }
  .hero .hero-copy { max-width:60%; }
  .hero h1 { font-size:44px; }
  .hero img.hero-img { height:285px; right:40px; }
  .hero-actions { flex-direction:row; align-items:center; }
  .trust-strip { grid-template-columns:repeat(3,1fr); }
  .catalog-tools { grid-template-columns:1fr 190px; }
}
@media (min-width:1024px) {
  .hero { min-height:430px; }
  .hero h1 { font-size:54px; }
  .hero img.hero-img { height:350px; right:70px; }
  .category-card .cover { height:210px; }
  .product-page h1 { font-size:34px; }
  .simple-page { margin:34px auto; }
}
@media (max-width:380px) {
  .brandbar .wordmark { font-size:25px; }
  .hero h1 { font-size:29px; }
  .hero .hero-copy { max-width:78%; }
  .hero img.hero-img { height:135px; right:-5px; }
  .add-btn span { display:none; }
  .add-btn { width:32px; padding:0; justify-content:center; }
}

/* Identidad Chelavin verde — aprobada con la nueva mascota */
:root {
  --bg:#fffaf1; --surface:#fff; --ink:#282624; --ink-soft:#6f6b63;
  --rosa-soft:#eef4ec; --rosa-deep:#b7664d;
  --morado-soft:#e5efe7; --morado-deep:#245b45; --morado-brand:#245b45;
  --verde-soft:#e5efe7; --verde-deep:#245b45; --salvia:#8daa91;
  --terracota:#c9785c; --line:#e5e1d5;
  --shadow:0 12px 35px rgba(45,77,61,.11);
}
body { background:linear-gradient(180deg,#fff 0,#fffaf1 420px); }
.announcement { background:#245b45; }
.brandbar { background:rgba(255,250,241,.95); border-bottom-color:rgba(36,91,69,.10); }
.brandbar img.logo { height:54px; }
.brandbar .wordmark { color:#245b45; }
.desktop-nav a.active:after { background:var(--terracota); }
.hero { background:linear-gradient(135deg,#fff8e9 0%,#edf4e9 56%,#dceadd 100%); }
.hero img.hero-img { height:215px; right:-4px; bottom:-5px; filter:drop-shadow(0 13px 12px rgba(36,91,69,.16)); }
.hero .btn-primary,.btn-secondary { box-shadow:0 8px 18px rgba(36,91,69,.20); }
.section-kicker { color:var(--terracota); }
.category-card,.product-card { border-color:rgba(36,91,69,.08); box-shadow:0 8px 24px rgba(45,77,61,.08); }
.product-card .price { color:var(--verde-deep); }
.trust-strip>div>span { color:var(--terracota); }
.stock-badge { background:#e5efe7; }
.product-note { border-left-color:var(--terracota); background:#fbefe9; }
.site-footer { background:#e8f1e7; }
.search-box { box-shadow:0 5px 15px rgba(45,77,61,.05); }
@media (min-width:640px) { .hero img.hero-img { height:330px; right:34px; } }
@media (min-width:1024px) { .hero img.hero-img { height:390px; right:65px; } }
@media (max-width:380px) { .hero img.hero-img { height:180px; right:-12px; } }