:root {
  color-scheme: light;
  --papel: #f6f3ed;
  --tinta: #262a24;
  --verde: #24382e;
  --fondo-campana: #24382e;
  --foco: #47725a;
  --oro: #862b38;
  --borde: #ded7cb;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--tinta);
  background: var(--papel);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.marco { width: min(1200px, 92%); margin-inline: auto; }
.barra { border-bottom: 1px solid var(--borde); }
.navegacion, .marca, .pie { display: flex; align-items: center; }
.navegacion { min-height: 76px; justify-content: space-between; gap: 12px; }
.marca { text-decoration: none; gap: 9px; font: bold 20px Georgia, serif; }
.marca img { border-radius: 50%; }
.marca small { display: block; margin-top: 2px; font: 700 9px system-ui, sans-serif; letter-spacing: .17em; }
.contacto { text-decoration: none; border: 1px solid #a9a398; padding: 9px 15px; border-radius: 99px; font-weight: 650; }
.etiqueta { color: var(--oro); font-size: .73rem; font-weight: 700; letter-spacing: .12em; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; margin: 0; }
h1 { font-size: clamp(3.7rem, 8.2vw, 7.2rem); letter-spacing: -.037em; line-height: 1; margin: 20px 0; }
.principal, .consulta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 99px; text-decoration: none; font-weight: 700; }
.principal { background: #fff; color: #862b38; padding: 12px 17px; }
.principal:hover { background: #fff1f3; }
.catalogo { padding: 57px 0 64px; }
.encabezado { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
h2 { font-size: clamp(2.15rem, 5vw, 3.8rem); letter-spacing: -.025em; }
.buscar { display: flex; align-items: center; gap: 9px; background: #ffffff; border: 1px solid #a9a398; border-radius: 12px; padding: 0 12px; width: min(100%, 320px); }
.buscar span { font-size: 1.7rem; }
.buscar input { min-width: 0; width: 100%; padding: 12px 0; border: 0; background: transparent; color: var(--tinta); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; }
.filtros button { cursor: pointer; border: 1px solid #d6cec1; background: #ffffff; color: var(--tinta); border-radius: 99px; padding: 8px 13px; }
.filtros button[aria-pressed="true"] { background: var(--verde); color: white; border-color: var(--verde); }
#resultados { color: #52574e; font-size: .88rem; }
.productos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ficha { border: 1px solid var(--borde); background: #ffffff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.foto { position: relative; background: #ebdfca; }
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.codigo { position: absolute; top: 9px; left: 9px; padding: 4px 8px; border-radius: 99px; background: #fff9ed; font-size: .73rem; font-weight: 750; }
.datos { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.categoria { color: var(--oro); font-weight: 750; font-size: .75rem; margin: 0 0 5px; }
.datos h3 { font-size: 1rem; margin: 0 0 6px; overflow-wrap: anywhere; }
.detalle { color: #52574e; font-size: .82rem; margin: 0 0 12px; }
.detalle:empty { display: none; }
.precios { margin-top: auto; padding-top: 6px; }
.precios strong { font-size: 1.26rem; }
.precios small { display: block; min-height: 1.25em; color: #52574e; }
.consulta { border: 1px solid #a6b3a6; color: var(--verde); margin-top: 12px; padding: 8px; font-size: .8rem; text-align: center; }
.consulta:hover { background: #edf3e9; }
footer { background: var(--verde); color: #fff5dc; padding: 36px 0; }
.pie { justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.pie h2 { font-size: 2rem; }
.pie p { margin: 7px 0; }
.nota { font-size: .87rem; }
@media (max-width: 900px) { .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .encabezado { align-items: stretch; flex-direction: column; }
  .buscar { width: 100%; }
  .catalogo { padding-top: 39px; }
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .datos { padding: 10px; }
}


.cintillo { background: #862b38; color: #fff; font-size: .81rem; font-weight: 650; }
.cintillo .marco { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 15px; padding-block: 8px; }
.cintillo a { text-underline-offset: 3px; }
.barra { position: sticky; z-index: 2; top: 0; background: #fff; }
.navegacion { gap: clamp(12px, 3vw, 30px); }
.buscar { flex: 1; width: auto; max-width: 560px; }
.buscar button { border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; }
.contacto { background: #fff; cursor: pointer; white-space: nowrap; }
.contacto span { display: inline-grid; place-items: center; min-width: 1.5rem; min-height: 1.5rem; padding: 0 4px; border-radius: 99px; background: #862b38; color: #fff; font-size: .78rem; }
.accesos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(16px, 5vw, 58px); padding-block: 26px 32px; }
.accesos a { display: grid; justify-items: center; gap: 6px; min-width: 64px; text-decoration: none; font-size: .85rem; font-weight: 750; }
.accesos img { border: 2px solid #e5aeb9; border-radius: 50%; padding: 3px; }
.accesos a:hover img { border-color: #862b38; }
.escena { display: flex; align-items: center; gap: 12px; border: 1px solid var(--borde); border-radius: 16px; padding: 8px; background: #fff; font-weight: 750; text-decoration: none; }
.escena:hover { border-color: #862b38; }
.escena img { width: min(48%, 124px); height: auto; border-radius: 10px; }

#catalogo, #entregas, #inicio { scroll-margin-top: 100px; }
.bajada { color: #52574e; margin: 0 0 5px; }
.precios small { margin-top: 3px; font-weight: 650; }
.agregar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 9px 10px; border: 0; border-radius: 9px; background: #862b38; color: #fff; font: inherit; font-size: .85rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.agregar:hover { background: #6e202e; }
.consulta { border: 0; margin-top: 5px; padding: 6px 0; }
#pedido { width: min(460px, 100%); max-width: 100%; max-height: none; height: 100%; margin: 0 0 0 auto; padding: 24px; border: 0; background: #fff; color: var(--tinta); }
#pedido::backdrop { background: rgb(15 23 42 / .58); }
.pedido-cabecera, .pedido-total, .linea-pedido { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pedido-cabecera h2 { font-size: 2rem; }
.cerrar { border: 0; background: #f4f6f8; border-radius: 99px; font-size: 1.5rem; width: 38px; height: 38px; cursor: pointer; }
#pedido-productos { list-style: none; padding: 0; }
.linea-pedido { border-bottom: 1px solid var(--borde); padding: 12px 0; }
.linea-pedido small { display: block; color: #52574e; margin-top: 4px; }
.cantidad { display: flex; align-items: center; gap: 7px; }
.cantidad button { min-width: 32px; min-height: 34px; border-radius: 8px; border: 1px solid var(--borde); background: #fff; cursor: pointer; }
#pedido-whatsapp { width: 100%; background: #14653e; }
.solo-lectura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 720px) {
  .navegacion { display: grid; grid-template-columns: 1fr auto; padding-block: 8px; gap: 7px 12px; }
  .navegacion .buscar { grid-row: 2; grid-column: 1 / -1; width: 100%; max-width: none; }
  .navegacion .buscar input { padding-block: 8px; }
  .marca { font-size: 17px; }
  .marca img { width: 36px; height: 36px; }
  .contacto { padding: 6px 9px; font-size: .82rem; }
  .escena { font-size: .84rem; gap: 6px; }
}

.cintillo { background: var(--fondo-campana); }
.cintillo .campana { color: #fff; text-decoration: none; }
.buscar { border-radius: 99px; }
.contacto.menu { display: inline-flex; align-items: center; gap: 6px; }
.contacto.menu span { background: transparent; color: #862b38; font-size: 1rem; }
.contacto:not(.menu) span { background: #862b38; }
.accesos img { border-color: #e6d2d7; }
.accesos a:hover img { border-color: #862b38; }
.ver-todo { color: #862b38; font-weight: 750; text-underline-offset: 3px; }
.vitrinas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 15px 0; }
.escena { flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; border-radius: 10px; }
.escena > span:last-child { padding: 9px 10px; }
.escena-imagen { display: block; aspect-ratio: 1.55; overflow: hidden; background: #f8f0e6; }
.escena-imagen img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.escena:hover { border-color: #862b38; }
.ficha { border-radius: 8px; }
.ficha[hidden] { display: none; }
.ficha:hover { box-shadow: 0 4px 12px #0001; }
.codigo { border-radius: 4px; background: #fff; }
.categoria { text-transform: uppercase; letter-spacing: .07em; }
.precio-unidad, .precio-cantidad { padding: 5px 8px; }
.precio-unidad span, .precio-cantidad span { display: block; font-size: .75rem; }
.precio-unidad strong { font-size: 1.05rem; }
.precio-cantidad { background: #f8efeb; border-radius: 6px; color: #742a36; }
.precio-cantidad strong { font-size: 1.25rem; }
.precio-cantidad small { display: inline; color: inherit; }
.pie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px; }
.pie h2 { font-size: 1.05rem; letter-spacing: 0; }
.pie a { display: inline-block; margin-top: 6px; text-underline-offset: 3px; }
.pie ul { padding-left: 1em; margin: 7px 0; }
.pie-nota { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid #777; }
#menu-categorias { width: min(360px, 100%); max-width: 100%; max-height: none; height: 100%; margin: 0 auto 0 0; padding: 24px; border: 0; color: var(--tinta); }
#menu-categorias::backdrop { background: #1a1a1a88; }
#enlaces-menu { display: grid; gap: 2px; margin-top: 18px; }
#enlaces-menu a { display: block; padding: 12px 8px; border-bottom: 1px solid var(--borde); text-decoration: none; }
#enlaces-menu a:hover { background: #f8efeb; }
@media (max-width: 720px) {
  .navegacion { grid-template-columns: 1fr auto auto; gap: 7px 8px; }
  .contacto.menu b { display: none; }
  .vitrinas { gap: 8px; }
  .pie { grid-template-columns: 1fr; }
}

.buscar button { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--verde); color: white; line-height: 1; }
.elegir-entrega { display: flex; align-items: center; gap: 5px 10px; }
.elegir-entrega { flex-wrap: wrap; }
.elegir-entrega label { font-weight: 700; }
.elegir-entrega select { max-width: 100%; border: 1px solid #a9a398; border-radius: 6px; padding: 4px 8px; color: inherit; background: #fff; font: inherit; }
.accesos { gap: 14px clamp(16px, 4vw, 42px); padding-block: 18px 24px; }
.accesos img { background: #f8efeb; border-color: #efdce1; }
.mundos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mundo { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: clamp(12px, 2.6vw, 26px); }
.mundo h2 { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.campanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.campanas a { display: flex; justify-content: space-between; align-items: center; gap: 10px; overflow: hidden; border-radius: 12px; background: var(--verde); color: #fff; text-decoration: none; }
.campanas a + a { background: #782b37; }
.campanas span { padding: 12px 0 12px 16px; font-size: .85rem; }
.campanas strong { display: block; font-size: clamp(1rem, 2.3vw, 1.5rem); margin-bottom: 4px; }
.campanas img { display: block; width: min(32%, 150px); height: auto; align-self: stretch; object-fit: cover; }
.vendedor { font-size: .75rem; color: #52574e; margin: 0 0 8px; }
.precio-cantidad .ahorro:not([hidden]) { display: table; padding: 3px 6px; margin-top: 3px; border-radius: 4px; background: #862b38; color: #fff; font-weight: 700; }
@media (max-width: 720px) {
  .mundos, .campanas { gap: 10px; }
  .accesos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .accesos a { flex: 0 0 auto; }
}
@media (max-width: 540px) {
  .mundos, .campanas { grid-template-columns: 1fr; }
  #catalogo, #entregas, #inicio { scroll-margin-top: 116px; }
}

#pedido { width: min(460px, calc(100% - 28px)); }
#menu-categorias { width: min(360px, calc(100% - 28px)); }
#enlaces-menu a { display: flex; align-items: center; gap: 11px; }
#enlaces-menu img, .producto-pedido img { flex: none; object-fit: contain; border-radius: 6px; background: #f8f0e6; }
.producto-pedido { display: flex; align-items: center; gap: 8px; min-width: 0; }
.producto-pedido strong { overflow-wrap: anywhere; }
.linea-pedido .cantidad { flex: none; }
#pedido .elegir-entrega { flex-direction: column; align-items: stretch; margin-top: 16px; }
#pedido .elegir-entrega select { min-height: 40px; }
@media (max-width: 420px) {
  #pedido { padding: 16px; }
  .producto-pedido img { width: 40px; height: 40px; }
  .linea-pedido { gap: 6px; }
  .linea-pedido .cantidad { gap: 4px; }
}

.buscar input:focus { outline: none; }
.buscar:focus-within { border-color: var(--foco); box-shadow: inset 0 0 0 1px var(--foco); }
.foto { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .ficha .foto img, .escena-imagen img, .accesos img, #enlaces-menu img, .campanas img {
    transition: transform 240ms ease-out;
  }
  .ficha:hover .foto img, .escena:hover img, .accesos a:hover img,
  #enlaces-menu a:hover img, .campanas a:hover img {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ficha .foto img, .escena-imagen img, .accesos img, #enlaces-menu img, .campanas img {
    transition: none;
  }
}

:root[data-tema="rojo"] {
  --verde: #75152b;
  --fondo-campana: linear-gradient(130deg, #75152b, #bd1636);
  --foco: #862b38;
}
.portada-colecciones { margin-block: 26px 0; }
.portada-colecciones h2 { text-align: center; margin-bottom: 18px; font-size: clamp(1.85rem, 3.5vw, 2.75rem); }
.vitrina-expandible { display: flex; align-items: flex-start; gap: 7px; min-height: clamp(245px, 31vw, 412px); }
.panel-vitrina {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  min-width: 0;
  height: clamp(190px, 24vw, 320px);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--verde);
  color: #fff;
  cursor: pointer;
}
.panel-vitrina[aria-pressed="true"] { flex-grow: 2.3; height: clamp(245px, 31vw, 412px); }
.panel-vitrina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-vitrina span {
  position: relative;
  display: block;
  width: 100%;
  padding: 28px 9px 12px;
  background: linear-gradient(transparent, #160e0cd9);
  font-size: clamp(.83rem, 1.55vw, 1.2rem);
  font-weight: 700;
  text-align: center;
}
.detalle-vitrina {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  min-height: 68px;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--fondo-campana);
  color: #fff7e6;
}
.detalle-vitrina p { margin: 0; line-height: 1.4; }
.detalle-vitrina a { flex: none; }
.panel-vitrina { transition: flex-grow 380ms ease, height 380ms ease; }
@media (prefers-reduced-motion: reduce) {
  .panel-vitrina { transition-duration: 150ms; }
}
@media (max-width: 540px) {
  .vitrina-expandible { min-height: 210px; gap: 4px; }
  .panel-vitrina { height: 166px; }
  .panel-vitrina[aria-pressed="true"] { height: 210px; flex-grow: 1.75; }
  .panel-vitrina span { padding-inline: 3px; }
  .detalle-vitrina { align-items: flex-start; flex-direction: column; }
}

.portada {
  display: grid;
  grid-template-columns: 44% 56%;
  min-height: 330px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--fondo-campana);
  color: #fff5dc;
}
.portada-texto { align-self: center; padding: clamp(28px, 5vw, 74px); }
.portada .etiqueta { color: #e8d2a8; }
.portada h1 { font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: 1; }
.portada p { max-width: 30ch; margin: 0 0 24px; line-height: 1.55; }
.portada-foto { position: relative; min-height: 100%; }
.portada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada-texto { padding: 25px; }
  .portada-foto { min-height: 210px; }
}