/* Escala legible compartida por la tienda y el panel.
   rem respeta el tamaño de texto del navegador; los breakpoints reorganizan
   el contenido en vez de reducir etiquetas y controles a microtipografía. */
:root {
  --muted: #625954;
  --type-label: .875rem;
  --type-small: .8125rem;
  --type-fine: .75rem;
}
html { font-size: 100%; }
body { font-size: 1rem; font-weight: 400; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #6b625e; opacity: 1; }
.wrap { width: min(90rem, calc(100% - clamp(2rem, 6vw, 7rem))); }
.wordmark {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  flex-shrink: 0;
}
.wordmark span {
  font-size: var(--type-fine);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .13em;
  margin-top: .5rem;
}
.announcement {
  height: auto;
  min-height: 2.5rem;
  padding: .5rem 1rem;
  font-size: var(--type-fine);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .12em;
}
.header-main {
  display: grid;
  grid-template-columns: auto minmax(12rem, 28rem) auto;
  justify-content: space-between;
  min-height: 7.5rem;
  height: auto;
  padding-block: 1rem;
  gap: 2rem;
}
.search { width: 100%; max-width: none; height: 3rem; margin: 0; }
.search input { font-size: 1rem; min-width: 0; }
.header-actions { gap: 1rem; }
.icon-button, .search button { min-width: 2.75rem; min-height: 2.75rem; }
.cart-button { font-size: var(--type-label); font-weight: 500; min-height: 2.75rem; }
.cart-button > span:last-child { width: 1.5rem; height: 1.5rem; font-size: var(--type-fine); }
.nav-row { height: auto; min-height: 4.5rem; padding-block: .75rem; gap: 1.5rem; }
.nav-row nav { font-size: .9375rem; font-weight: 500; gap: clamp(1rem, 2vw, 2rem); min-width: 0; }
.nav-row nav a { min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }
.nav-row a:hover, .text-link:hover { color: var(--wine-dark); }
.mode-control { flex-shrink: 0; }
.mode-control button { min-height: 2.5rem; padding: .5rem 1rem; font-size: var(--type-small); font-weight: 600; }
.demo-banner { font-size: var(--type-small); line-height: 1.5; padding: .625rem 1rem; color: #644a43; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-copy {
  padding: 3.5rem 3rem 3rem max(clamp(1rem, 3vw, 3.5rem), calc((100vw - 90rem) / 2));
  min-width: 0;
}
.eyebrow { font-size: var(--type-fine); line-height: 1.5; letter-spacing: .14em; font-weight: 600; }
.hero h1 { font-size: clamp(3rem, 4vw, 4.75rem); line-height: 1.06; letter-spacing: -.045em; }
.hero p { font-size: 1rem; line-height: 1.75; }
.button { font-size: .9375rem; font-weight: 600; line-height: 1.5; padding: .875rem 1.5rem; min-height: 3rem; gap: 1.5rem; }
.hero-footnote { font-size: var(--type-small); line-height: 1.5; color: #66584d; letter-spacing: .02em; }
.hero-seal { width: 7rem; height: 7rem; left: -3.5rem; }
.hero-seal span { font-size: var(--type-fine); letter-spacing: .08em; font-weight: 600; }
.hero-seal b { font-size: 2.75rem; font-weight: 700; }
.image-caption {
  font-size: var(--type-fine);
  line-height: 1.5;
  letter-spacing: .06em;
  font-weight: 500;
  background: #46202de6;
  padding: .5rem .75rem;
  max-width: calc(100% - 3rem);
  text-shadow: none;
}
.benefits { gap: 1rem; }
.benefits > div { gap: 1rem; padding-right: 1rem; min-width: 0; }
.benefits svg { flex-shrink: 0; }
.benefits p { font-size: .9375rem; font-weight: 500; }
.benefits small { font-size: var(--type-small); font-weight: 400; }
.section-heading .eyebrow { font-size: var(--type-fine); letter-spacing: .12em; }
.text-link, .text-button { font-size: var(--type-label); font-weight: 500; line-height: 1.5; }
.text-button { min-height: 2.75rem; }
.category-card small { font-size: var(--type-fine); letter-spacing: .06em; line-height: 1.5; }
.category-card .category-label { gap: .5rem; }
.category-card .category-label > div { min-width: 0; }
.category-card .arrow { flex-shrink: 0; }
.category-card h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.3; }
.category-card:after { inset: 25% 0 0; background: linear-gradient(transparent, #281a21e6); }
.product-badge { font-size: var(--type-fine); font-weight: 600; letter-spacing: .03em; }
.favorite { min-width: 2.5rem; min-height: 2.5rem; display: grid; place-items: center; }
.product-brand { font-size: var(--type-fine); letter-spacing: .04em; font-weight: 500; overflow-wrap: anywhere; }
.product-name { font-size: 1.1875rem; line-height: 1.4; }
.product-price { font-size: 1.125rem; font-weight: 700; }
.product-price small { font-size: var(--type-small); line-height: 1.6; }
.card-price { font-size: var(--type-label); }
.product-options { font-size: var(--type-small); color: var(--muted); flex-wrap: wrap; gap: .375rem; }
.size-tag { min-width: 1.875rem; padding: .125rem .375rem; }
.product-placeholder small { font-size: var(--type-fine); color: var(--wine); padding-inline: .5rem; }
.wholesale-banner p, .wholesale-details p { font-size: 1rem; }
.wholesale-details small { font-size: var(--type-label); color: #ead8d6; }
.brand-note p { font-size: 1rem; }
.footer-main .wordmark { font-size: 3rem; }
.footer-main .wordmark span { font-size: var(--type-fine); letter-spacing: .08em; }
.footer-main p, .footer-main h3 { font-size: .9375rem; }
.footer-main > div > a:not(.wordmark), .footer-main .text-button { font-size: var(--type-label); }
.footer-bottom { font-size: var(--type-small); color: var(--muted); }
.breadcrumbs { font-size: var(--type-label); }
.filters h3 { font-size: 1rem; }
.filters label, .filters select, .filters .text-button { font-size: var(--type-label); }
.filters select { min-height: 2.75rem; }
.catalog-toolbar { font-size: var(--type-label); flex-wrap: wrap; }
.catalog-toolbar select { font-size: var(--type-label); min-height: 2.75rem; }
.pagination { font-size: var(--type-label); }
.pagination button { min-height: 2.75rem; }
.notice, .muted, .error, .success { font-size: var(--type-label); line-height: 1.65; }
.help details p { font-size: 1rem; }
.detail-info > .product-price { font-size: 1.5rem; }
.detail-description { font-size: 1rem; line-height: 1.7; }
.field { font-size: var(--type-label); line-height: 1.5; }
.field input, .field select, .field textarea { font-size: 1rem; min-height: 2.75rem; }
.detail-note { font-size: var(--type-small); }
.close-dialog { width: 2.75rem; height: 2.75rem; }
.detail-add { flex-wrap: wrap; }
.detail-add .button { flex-basis: 10rem; }
.quantity { font-size: 1rem; }
.quantity button { min-width: 2.5rem; min-height: 2.75rem; }
.quantity input { font-size: 1rem; }
.cart-line { grid-template-columns: 76px minmax(0, 1fr); }
.cart-line h3 { font-size: 1.1875rem; line-height: 1.4; }
.cart-line p, .cart-line .remove { font-size: var(--type-small); }
.cart-line .remove { min-height: 2.75rem; }
.cart-line-controls { flex-wrap: wrap; }
.cart-line-controls .quantity, .cart-line-price { font-size: .9375rem; }
.cart-summary > div { font-size: .9375rem; gap: 1rem; }
.cart-summary > div.total { font-size: 1.5rem; }
.cart-summary small { font-size: var(--type-small); }
.minimum-alert, .check-label { font-size: var(--type-label); }
.order-success p { font-size: 1rem; }
.toast { font-size: var(--type-label); line-height: 1.6; }

/* Administración: los importes y los formularios conservan la misma escala. */
.admin-header .wordmark { font-size: 2.75rem; }
.admin-header .text-link { font-size: var(--type-label); }
.login-card p { font-size: 1rem; }
.login-card small, .settings-form small, .admin-dialog small { font-size: var(--type-small); }
.admin-tag { font-size: var(--type-fine); font-weight: 600; }
.admin-toolbar > p, .admin-toolbar > span { font-size: var(--type-label); }
.admin-toolbar .button { font-size: var(--type-label); }
.table-scroll table { font-size: var(--type-label); }
.table-scroll th { font-size: var(--type-fine); }
.table-scroll td small { font-size: var(--type-small); }
.status { font-size: var(--type-fine); }
.admin-dialog p, .order-card p, .order-details, .order-item { font-size: var(--type-label); }
code { font-size: var(--type-small); overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .header-main { grid-template-columns: auto minmax(10rem, 1fr) auto; gap: 1.5rem; }
  .nav-row { flex-wrap: wrap; gap: .5rem 1rem; }
  .nav-row nav { flex: 1 1 100%; justify-content: space-between; gap: 1rem; }
  .nav-row .mode-control { margin-left: auto; }
  .hero-copy { padding-right: 2rem; }
  .hero h1 { font-size: clamp(2.75rem, 4.5vw, 3.25rem); }
  .hero-seal { bottom: 3rem; }
  .benefits { align-items: start; }
}

@media (max-width: 760px) {
  .announcement { font-size: var(--type-fine); gap: .5rem; letter-spacing: .025em; padding-inline: .625rem; }
  .header-main { grid-template-columns: minmax(0, 1fr) auto; gap: 1.125rem .5rem; padding-block: 1rem .5rem; }
  .wordmark { font-size: 2.875rem; letter-spacing: -.02em; width: fit-content; }
  .wordmark span { font-size: var(--type-fine); letter-spacing: .06em; margin-top: .375rem; }
  .header-actions { grid-column: 2; grid-row: 1; gap: .375rem; margin-left: 0; }
  .search { position: static; grid-column: 1 / -1; grid-row: 2; height: 3rem; }
  .search input { font-size: 1rem; }
  .nav-row { padding-top: .5rem; padding-bottom: .75rem; gap: .625rem; }
  .nav-row nav { order: 2; padding-block: .25rem; gap: 1.375rem; font-size: .9375rem; width: 100%; justify-content: flex-start; }
  .nav-row .mode-control { margin-top: 0; }
  .mode-control button { font-size: var(--type-small); padding: .5rem .875rem; }
  .demo-banner { font-size: var(--type-small); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 2.5rem 1.5rem 3rem; }
  .hero h1 { font-size: clamp(2.375rem, 10.5vw, 3.25rem); line-height: 1.08; letter-spacing: -.045em; }
  .hero h1 br:nth-child(2) { display: initial; }
  .hero h1 em { padding-left: 0; }
  .hero .eyebrow { font-size: var(--type-fine); }
  .hero p { font-size: 1rem; max-width: none; }
  .hero .button { font-size: .9375rem; padding: .875rem 1.25rem; }
  .hero-seal { width: 6.25rem; height: 6.25rem; left: auto; right: 1.5rem; top: -2.25rem; }
  .hero-seal span { font-size: var(--type-fine); }
  .hero-seal b { font-size: 2.5rem; }
  .image-caption { font-size: var(--type-fine); bottom: 1rem; right: 1rem; max-width: calc(100% - 2rem); }
  .benefits { grid-template-columns: 1fr; gap: 1rem; padding-block: 1.5rem; }
  .benefits > div { border: 0; padding: 0; gap: 1rem; }
  .benefits > div:last-child { display: flex; }
  .benefits p { font-size: .9375rem; }
  .benefits small { font-size: var(--type-small); }
  .section-heading { flex-wrap: wrap; gap: 1rem; }
  .section-heading .eyebrow { font-size: var(--type-fine); letter-spacing: .08em; }
  .section h2 { font-size: 1.875rem; max-width: none; }
  .text-link { font-size: var(--type-label); margin-top: 0; text-align: left; min-width: 0; }
  .category-card small { font-size: var(--type-fine); letter-spacing: .02em; text-transform: none; }
  .category-card h3 { font-size: 1.375rem; }
  .category-card .category-label { left: .875rem; right: .75rem; bottom: .875rem; }
  .category-card .arrow { display: none; }
  .product-name { font-size: 1.0625rem; }
  .product-price { font-size: 1.0625rem; }
  .product-price small, .card-price { font-size: var(--type-small); }
  .product-brand, .product-badge { font-size: var(--type-fine); }
  .product-badge { padding: .25rem .375rem; left: .375rem; }
  .product-options { font-size: var(--type-small); }
  .favorite { top: .375rem; right: .375rem; }
  .wholesale-banner { width: calc(100% - 2rem); }
  .wholesale-banner .button { font-size: var(--type-label); gap: .75rem; padding: .875rem 1rem; }
  .wholesale-details p { font-size: 1rem; }
  .wholesale-details small { font-size: var(--type-label); }
  .brand-note p { font-size: 1rem; }
  .footer-main > div { min-width: 0; }
  .footer-main .wordmark { font-size: 2.75rem; }
  .footer-main .wordmark span { white-space: normal; }
  .footer-bottom { font-size: var(--type-small); }
  .filters { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .filters label, .filters select, .filters .text-button { font-size: var(--type-label); min-width: 0; }
  .filters .text-button { align-self: end; }
  .catalog-toolbar { font-size: var(--type-label); gap: .75rem; }
  .catalog-toolbar select { max-width: none; font-size: var(--type-label); }
  .notice { font-size: var(--type-label); }
  .cart-dialog { padding: 1.125rem; }
  .cart-line { grid-template-columns: 60px minmax(0, 1fr); gap: .875rem; }
  .cart-line img { width: 60px; height: 80px; }
  .cart-line-controls { gap: .5rem; }
  .cart-line-price { margin-left: 0; }
  .checkout-form .form-grid { grid-template-columns: 1fr; }
  .variant-fields { grid-template-columns: 1fr; }
  .detail-info { padding: 1.5rem; }
  .detail-info > .product-price { font-size: 1.5rem; }
}

@media (max-width: 359px) {
  .announcement { flex-wrap: wrap; column-gap: .5rem; row-gap: 0; }
  .announcement span { display: none; }
  .wordmark { font-size: 2.5rem; }
  .header-actions { gap: 0; }
  .cart-button { padding-inline: .25rem; }
  .hero-copy { padding-inline: 1rem; }
  .product-badge { top: auto; bottom: .5rem; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-manifesto { padding-left: 0; border: 0; }
}