/* Las Victorias en Aire: el sistema minimalista de BarApp (docs/diseno/aire/ de maurodipietrantonio/BarApp),
   llevado a una tienda de ropa. Va encima de estilo.css (que es la versión con la base de Elim) y cambia
   los valores y las piezas: mucho espacio, la letra del sistema en peso 300, tres grises, bordes finísimos
   y tarjetas que se elevan al pasar el mouse. El color va en la ropa, no en la página.

   Las paletas son suaves y cambian sólo el fondo, el gris y el color de la acción principal
   (data-paleta en <html>): aire (blanco y grises, la de base), arena, salvia, niebla y rosa. */
:root {
  /* Valores de Aire (tokens.css de BarApp) */
  --aire-fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --aire-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --aire-tiempo: 0.28s;
  --aire-sombra-hover: 0 18px 40px -18px rgba(17, 24, 39, 0.22);
  --aire-sombra-renglon: 0 10px 26px -18px rgba(17, 24, 39, 0.18);
  --aire-radio: 20px;
  --aire-radio-foto: 16px;
  --aire-radio-campo: 12px;
  --aire-radio-chico: 8px;
  --aire-borde: rgba(0, 0, 0, 0.08);
  --aire-borde-fuerte: rgba(0, 0, 0, 0.2);
  --aire-ok: #34a853;
  --aire-mal: #b3261e;

  /* Paleta «aire»: blanco y grises; la acción principal en casi negro */
  --aire-fondo: #fafafa;
  --aire-superficie: #ffffff;
  --aire-gris-suave: #efeff2;
  --aire-texto: #1d1d1f;
  --aire-texto-2: #86868b;
  --aire-texto-3: #aeaeb2;
  --aire-acento: #1d1d1f;
  --aire-sobre-acento: #ffffff;
  --aire-foto: #f2f2f4;

  /* Lo que usa estilo.css, tomado de Aire */
  --arena: var(--aire-fondo);
  --papel: var(--aire-superficie);
  --tinta: var(--aire-texto);
  --oro: var(--aire-acento);
  --linea: var(--aire-borde);
  --piedra: var(--aire-texto-2);
  --foto: var(--aire-foto);
  --rebaja: var(--aire-mal);
  --ok: #2f7d43;
  --serif: var(--aire-fuente);
  --sans: var(--aire-fuente);
  --gutter: clamp(16px, 4vw, 48px);
}
:root[data-paleta="arena"] { --aire-fondo: #faf8f5; --aire-gris-suave: #f1ece5; --aire-texto: #2a2622; --aire-texto-2: #8c857c; --aire-texto-3: #b5aea4; --aire-acento: #8f6f45; --aire-foto: #f3eee7 }
:root[data-paleta="salvia"] { --aire-fondo: #f8faf8; --aire-gris-suave: #e9efe9; --aire-texto: #1f2620; --aire-texto-2: #7f8a80; --aire-texto-3: #aab3ab; --aire-acento: #4f6b54; --aire-foto: #eef2ee }
:root[data-paleta="niebla"] { --aire-fondo: #f7f8fa; --aire-gris-suave: #e9edf2; --aire-texto: #1c2230; --aire-texto-2: #7f8797; --aire-texto-3: #aab0bc; --aire-acento: #3d4f6e; --aire-foto: #eef1f5 }
:root[data-paleta="rosa"] { --aire-fondo: #fcf9f8; --aire-gris-suave: #f3ebe9; --aire-texto: #2b2324; --aire-texto-2: #94898b; --aire-texto-3: #bcb1b2; --aire-acento: #9c6970; --aire-foto: #f5eeec }

body { font: 300 15px/1.6 var(--aire-fuente); letter-spacing: -0.003em; -webkit-font-smoothing: antialiased }
h1, h2, h3 { font-weight: 300; letter-spacing: -0.03em }
strong, b { font-weight: 500 }
.tenue { color: var(--aire-texto-2) }
.etiqueta { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--aire-texto-2) }
.enlace { color: var(--aire-texto); text-decoration-color: var(--aire-borde-fuerte); text-underline-offset: 4px; font-size: 14px; font-weight: 400 }
.enlace:hover { text-decoration-color: currentColor }
:focus-visible { outline: 2px solid var(--aire-acento); outline-offset: 3px; border-radius: 4px }

/* Franja y cabecera: livianas, sin bloque negro */
.franja { background: var(--aire-fondo); color: var(--aire-texto-2); font-size: 12px; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--aire-borde) }
.cabecera { background: color-mix(in srgb, var(--aire-fondo) 80%, transparent); padding-block: 16px }
.cabecera.con-borde { border-bottom-color: var(--aire-borde) }
.marca { font: 300 19px/1 var(--aire-fuente); letter-spacing: .34em }
.menu { font-size: 14px; letter-spacing: 0; text-transform: none; gap: 28px }
.menu a { color: var(--aire-texto-2); border-bottom: 0; transition: color var(--aire-tiempo) }
.menu a:hover, .menu a.activo { color: var(--aire-texto) }
.menu .panel-link { color: var(--aire-texto-2) }
.menu .panel-link::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--aire-acento); vertical-align: 2px }
.icono svg { stroke-width: 1.3 }
.cuenta { background: var(--aire-acento); color: var(--aire-sobre-acento); font-weight: 500 }
@media (max-width: 860px) { .menu a { border-bottom: 1px solid var(--aire-borde); padding: 16px 0 } }

/* Botones: el principal lleno, con radio de campo; el secundario, sólo el borde */
.boton, .contorno { min-height: 48px; padding: 0 26px; border-radius: var(--aire-radio-campo); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; transition: transform var(--aire-tiempo) var(--aire-curva), box-shadow var(--aire-tiempo), background var(--aire-tiempo), color var(--aire-tiempo) }
.boton { background: var(--aire-acento); color: var(--aire-sobre-acento); border: 1px solid var(--aire-acento) }
.boton:hover { background: var(--aire-acento); transform: translateY(-2px); box-shadow: var(--aire-sombra-renglon) }
.contorno { background: transparent; color: var(--aire-texto); border: 1px solid var(--aire-borde-fuerte) }
.contorno:hover { background: var(--aire-superficie); color: var(--aire-texto); transform: translateY(-2px); box-shadow: var(--aire-sombra-renglon) }
.boton:active, .contorno:active { transform: translateY(-1px) }

/* Chips: píldoras sin borde */
.chip { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--aire-gris-suave); color: var(--aire-texto); font-size: 13px; letter-spacing: 0; transition: background var(--aire-tiempo), color var(--aire-tiempo) }
.chip:hover { background: color-mix(in srgb, var(--aire-gris-suave) 70%, var(--aire-texto-3)) }
.chip[aria-pressed="true"] { background: var(--aire-texto); color: var(--aire-superficie) }

/* Inicio */
.hero { padding-block: 56px 120px }
.hero h1 { font-size: clamp(44px, 6vw, 84px); line-height: 1.04; font-weight: 300; letter-spacing: -0.045em; margin: 20px 0 24px }
.hero h1 em { font-style: normal; color: var(--aire-texto-2) }
.hero .bajada { font-size: 17px; color: var(--aire-texto-2) }
.hero-fotos { gap: 20px }
.hero-fotos img { border-radius: var(--aire-radio) }
.bloque { padding-block: 0 128px }
.bloque-cabeza { margin-bottom: 40px }
.bloque-cabeza h2 { font-size: clamp(30px, 3.6vw, 44px) }
.categorias { gap: 20px }
.categoria .marco { border-radius: var(--aire-radio-foto); transition: transform var(--aire-tiempo) var(--aire-curva), box-shadow var(--aire-tiempo) }
.categoria span { font: 400 15px var(--aire-fuente); letter-spacing: -0.01em }
@media (hover: hover) { .categoria:hover .marco { transform: translateY(-4px); box-shadow: var(--aire-sombra-hover) } .categoria:hover img { transform: none } }
.look { background: transparent; border: 1px solid var(--aire-borde); border-radius: var(--aire-radio); padding: clamp(20px, 3vw, 36px) }
.look img { border-radius: var(--aire-radio-foto) }
.look h2 { font-size: clamp(28px, 3vw, 40px) }
.look-lista { border-top-color: var(--aire-borde) }
.look-lista div { border-bottom-color: var(--aire-borde); font-size: 14px }
.valores { border-color: var(--aire-borde); padding-block: 48px; margin-bottom: 128px; gap: 40px }
.valores h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em }
.valores p { color: var(--aire-texto-2); font-size: 14px }

/* Tienda */
.tienda-cabeza { padding-block: 40px 32px; gap: 14px }
.tienda-cabeza h1 { font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -0.04em }
.migas { font-size: 12px; color: var(--aire-texto-3) }
.filtros { gap: 32px; top: 96px }
.filtro .etiqueta { color: var(--aire-texto) ; font-weight: 500 }
.filtro-colores button { border-color: var(--aire-borde-fuerte); box-shadow: inset 0 0 0 2px var(--aire-fondo) }
.rango input { accent-color: var(--aire-acento) }
.casilla input { accent-color: var(--aire-acento) }
.barra-tienda { color: var(--aire-texto-2); margin-bottom: 28px }
.barra-tienda select { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--aire-gris-suave); color: var(--aire-texto) }
.ver-filtros { border: 0; border-radius: 999px; background: var(--aire-gris-suave); text-transform: none; letter-spacing: 0; font-size: 13px; min-height: 38px }
@media (max-width: 860px) { .filtros { background: var(--aire-superficie); border: 1px solid var(--aire-borde); border-radius: var(--aire-radio); padding: 24px } }

/* Tarjeta de producto: la foto con radio, que sube y toma sombra al pasar el mouse.
   Al entrar, las tarjetas suben en cascada (70 ms entre una y otra). */
.grilla { gap: clamp(28px, 3vw, 40px) clamp(14px, 1.8vw, 24px) }
.tarjeta { gap: 8px; animation: aire-entra .6s var(--aire-curva) backwards }
.grilla .tarjeta:nth-child(2) { animation-delay: 70ms }
.grilla .tarjeta:nth-child(3) { animation-delay: 140ms }
.grilla .tarjeta:nth-child(4) { animation-delay: 210ms }
.grilla .tarjeta:nth-child(5) { animation-delay: 280ms }
.grilla .tarjeta:nth-child(6) { animation-delay: 350ms }
.grilla .tarjeta:nth-child(n+7) { animation-delay: 420ms }
@keyframes aire-entra { from { opacity: 0; transform: translateY(12px) } }
.tarjeta-foto { border-radius: var(--aire-radio-foto); transition: transform var(--aire-tiempo) var(--aire-curva), box-shadow var(--aire-tiempo) }
@media (hover: hover) {
  .tarjeta-foto:hover { transform: translateY(-4px); box-shadow: var(--aire-sombra-hover) }
  .tarjeta-foto:hover img { transform: none }
}
.sello { border-radius: 999px; padding: 4px 10px; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; background: color-mix(in srgb, var(--aire-superficie) 92%, transparent); color: var(--aire-texto) }
.sello.rebaja { background: color-mix(in srgb, var(--aire-superficie) 92%, transparent); color: var(--aire-mal) }
.corazon { background: color-mix(in srgb, var(--aire-superficie) 88%, transparent); width: 36px; height: 36px; top: 10px; right: 10px }
.corazon svg { stroke: var(--aire-texto); stroke-width: 1.3; width: 18px; height: 18px }
.corazon[aria-pressed="true"] svg { fill: var(--aire-acento); stroke: var(--aire-acento) }
.rapido { border-radius: 14px; background: color-mix(in srgb, var(--aire-superficie) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 12px }
.rapido p { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--aire-texto-2) }
.rapido button { border: 0; border-radius: 999px; background: var(--aire-gris-suave); min-width: 36px; height: 30px; font-size: 12px }
.rapido button:hover:not(:disabled) { background: var(--aire-texto); color: var(--aire-superficie) }
.tarjeta h3 { font: 400 15px/1.35 var(--aire-fuente); letter-spacing: -0.01em; margin-top: 4px }
.precios { font-size: 14px; font-weight: 400 }
.precios s { color: var(--aire-texto-3) }
.cuotas { font-size: 12px; color: var(--aire-texto-3) }
.muestras { gap: 6px; order: 0 }
.muestra { width: 14px; height: 14px; border-color: var(--aire-borde-fuerte); box-shadow: none; position: relative }
.muestra::after { content: ""; position: absolute; inset: -9px } /* zona de toque cómoda sin agrandar el punto */
.muestra[aria-pressed="true"] { outline: 1px solid var(--aire-texto); outline-offset: 2px }

/* Producto */
.producto { padding-block: 32px 104px; gap: clamp(28px, 5vw, 88px) }
.galeria { gap: 16px; top: 96px }
.miniaturas { gap: 12px }
.miniaturas button { border-radius: 12px; border: 1px solid transparent; opacity: .7; transition: opacity var(--aire-tiempo) }
.miniaturas button:hover, .miniaturas button[aria-current="true"] { opacity: 1; border-color: var(--aire-borde-fuerte) }
.principal { border-radius: var(--aire-radio) }
.principal .contador { border-radius: 999px; padding: 4px 12px; background: color-mix(in srgb, var(--aire-superficie) 88%, transparent); font-size: 12px; letter-spacing: 0 }
@media (max-width: 900px) { .carrusel img { border-radius: var(--aire-radio-foto); margin-right: 10px } .carrusel { padding-left: 16px } }
.ficha { gap: 26px }
.ficha h1 { font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.035em }
.ficha .precios { font-size: 20px; font-weight: 400 }
.pagos { color: var(--aire-texto-2); font-size: 13px }
.pagos strong { color: var(--aire-texto) }
.opcion-cabeza { font-size: 14px; color: var(--aire-texto-2) }
.opcion-cabeza strong { color: var(--aire-texto) }
.colores { gap: 12px }
.colores button { width: 32px; height: 32px; border-color: var(--aire-borde-fuerte); box-shadow: inset 0 0 0 3px var(--aire-fondo) }
.colores button[aria-pressed="true"] { outline: 1px solid var(--aire-texto); outline-offset: 3px }
.talles { gap: 10px }
.talles button { height: 46px; border: 1px solid var(--aire-borde); border-radius: var(--aire-radio-campo); background: var(--aire-superficie); font-size: 14px; transition: border-color var(--aire-tiempo), transform var(--aire-tiempo) var(--aire-curva) }
.talles button:hover { border-color: var(--aire-borde-fuerte) }
.talles button[aria-pressed="true"] { background: var(--aire-texto); color: var(--aire-superficie); border-color: var(--aire-texto) }
.talles button.agotado { background: var(--aire-fondo); color: var(--aire-texto-3); text-decoration: line-through; border-style: dashed }
/* El estado es un punto (regla 4 de Aire) */
.estado-stock { font-size: 13px; color: var(--aire-texto-2); display: flex; align-items: center; gap: 8px }
.estado-stock::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--aire-texto-3) }
.estado-stock.ok { color: var(--aire-texto-2) }
.estado-stock.ok::before { background: var(--aire-ok) }
.estado-stock.pocas { color: var(--aire-mal) }
.estado-stock.pocas::before { background: var(--aire-mal) }
.cantidad { border: 1px solid var(--aire-borde-fuerte); border-radius: var(--aire-radio-campo) }
.cantidad button { height: 46px }
.fav-grande { border: 1px solid var(--aire-borde-fuerte); border-radius: var(--aire-radio-campo); width: 48px }
.fav-grande svg { stroke-width: 1.3 }
.fav-grande[aria-pressed="true"] svg { fill: var(--aire-acento); stroke: var(--aire-acento) }
.avisame input, .envio input, .cupon input, .checkout input, .checkout select, .calcular input, .campo input, .campo select, .campo textarea, .variante-cabeza input[type="text"] {
  border: 1px solid var(--aire-borde); border-radius: var(--aire-radio-campo); background: var(--aire-superficie); font-size: 16px; min-height: 48px; transition: border-color var(--aire-tiempo)
}
.avisame input:focus, .envio input:focus, .cupon input:focus, .checkout input:focus, .calcular input:focus, .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--aire-borde-fuerte) }
.envio { background: transparent; border: 1px solid var(--aire-borde); border-radius: var(--aire-radio-foto); padding: 20px; gap: 12px; font-size: 14px }
.envio button, .cupon button { border: 0; border-radius: var(--aire-radio-campo); background: var(--aire-gris-suave); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; padding: 0 18px }
.envio li { color: var(--aire-texto-2) }
.envio li strong { color: var(--aire-texto); font-weight: 400 }
.acordeon { border-top-color: var(--aire-borde) }
.acordeon details { border-bottom-color: var(--aire-borde) }
.acordeon summary { padding: 20px 0; font-size: 15px; font-weight: 400; letter-spacing: -0.01em; text-transform: none }
/* Lo que se despliega lleva un ángulo de trazo fino que gira al abrir */
.acordeon summary::after { content: ""; width: 7px; height: 7px; margin: 6px 4px 0 0; border-right: 1px solid var(--aire-texto-2); border-bottom: 1px solid var(--aire-texto-2); transform: rotate(45deg); transition: transform var(--aire-tiempo) var(--aire-curva) }
.acordeon details[open] summary::after { content: ""; transform: rotate(225deg) }
.acordeon .dentro { color: var(--aire-texto-2); font-size: 14px; line-height: 1.7 }
.acordeon .dentro strong { color: var(--aire-texto) }
.compartir { color: var(--aire-texto-2) }
@media (max-width: 900px) { .barra-celu { background: color-mix(in srgb, var(--aire-superficie) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top-color: var(--aire-borde) } }

/* Cajones, buscador, guía y foto ampliada */
.velo { background: rgba(17, 24, 39, .18); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px) }
.cajon { background: var(--aire-superficie); box-shadow: -24px 0 60px -30px rgba(17, 24, 39, .3); transition: transform .45s var(--aire-curva), visibility .45s }
.cajon-cabeza h2 { font-size: 26px; letter-spacing: -0.03em }
.cerrar { font-weight: 200; color: var(--aire-texto-2) }
.progreso { color: var(--aire-texto-2); font-size: 13px }
.progreso strong { color: var(--aire-texto) }
.progreso .riel { height: 2px; background: var(--aire-gris-suave); border-radius: 2px }
.progreso .riel span { background: var(--aire-acento); border-radius: 2px }
.item { border-bottom-color: var(--aire-borde); padding: 18px 0 }
.item img { border-radius: 12px }
.item-info .nombre { font-weight: 400; font-size: 15px }
.item-info select { border: 0; background: var(--aire-gris-suave); border-radius: 999px; padding: 2px 8px; font-size: 13px }
.item .cantidad { border-color: var(--aire-borde); border-radius: 999px }
.totales { font-size: 14px; color: var(--aire-texto-2) }
.totales .total { font: 400 22px var(--aire-fuente); letter-spacing: -0.02em; color: var(--aire-texto); border-top-color: var(--aire-borde) }
.cupon-msj { color: var(--aire-texto-2) }
.vacio { color: var(--aire-texto-2) }
.buscador { background: rgba(17, 24, 39, .18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px) }
.buscador-caja { background: var(--aire-fondo); border-radius: 0 0 var(--aire-radio) var(--aire-radio); padding-bottom: 40px }
.buscador-fila { border-bottom-color: var(--aire-borde) }
.buscador input { font: 300 clamp(26px, 3vw, 36px) var(--aire-fuente); letter-spacing: -0.03em }
.resultado img { border-radius: 12px }
.modal { background: rgba(17, 24, 39, .18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px) }
.modal-caja { border-radius: var(--aire-radio); background: var(--aire-superficie); box-shadow: var(--aire-sombra-hover); padding: 28px clamp(20px, 3vw, 40px) 36px }
.tabla th { color: var(--aire-texto-2); letter-spacing: 0; text-transform: none; font-size: 12px }
.tabla th, .tabla td { border-bottom-color: var(--aire-borde) }
.tabla tr.sugerido td { background: var(--aire-gris-suave); font-weight: 500 }
.calcular { background: var(--aire-fondo); border-radius: var(--aire-radio-foto); padding: 22px }
.calcular label { color: var(--aire-texto-2) }
.calcular-resultado strong { font: 400 22px var(--aire-fuente) }
.lupa { background: var(--aire-fondo) }
.lupa .flecha { border-radius: 50%; background: var(--aire-superficie); box-shadow: var(--aire-sombra-renglon); font-size: 18px }
.aviso-flotante { border-radius: 999px; background: var(--aire-texto); color: var(--aire-superficie); font-size: 13px; padding: 12px 22px; box-shadow: var(--aire-sombra-hover) }

/* Panel de carga */
.panel-intro h1 { font-size: clamp(34px, 4vw, 48px) }
.grupo { background: transparent; border: 1px solid var(--aire-borde); border-radius: var(--aire-radio); padding: 32px; gap: 18px }
.grupo h2 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em }
.campo { color: var(--aire-texto-2); font-size: 13px; letter-spacing: 0 }
.campo textarea { min-height: 104px }
.variante { background: var(--aire-superficie); border: 1px solid var(--aire-borde); border-radius: var(--aire-radio-foto) }
.variante-cabeza input[type="color"] { border-radius: 50%; width: 40px; height: 40px; border: 1px solid var(--aire-borde) }
.soltar { border: 1px dashed var(--aire-borde-fuerte); border-radius: var(--aire-radio-foto); background: var(--aire-fondo); transition: background var(--aire-tiempo), border-color var(--aire-tiempo) }
.soltar.encima { border-color: var(--aire-acento); background: var(--aire-gris-suave) }
.foto-cargada img { border-radius: 10px }
.foto-cargada button { border-radius: 50%; border: 0; background: var(--aire-gris-suave) }
.foto-cargada .tapa { border-radius: 999px; background: var(--aire-texto); color: var(--aire-superficie); letter-spacing: 0; text-transform: none }
.matriz th, .matriz td { border-bottom-color: var(--aire-borde) }
.matriz input { border: 1px solid var(--aire-borde); border-radius: 10px; background: var(--aire-superficie) }
.cargado { border-bottom-color: var(--aire-borde) }
.cargado img { border-radius: 8px }

@media (max-width: 600px) {
  .hero { padding-block: 24px 80px }
  .bloque { padding-block: 0 88px }
  .grupo { padding: 22px }
}

@media (prefers-reduced-motion: reduce) { .tarjeta { animation: none } }

/* ---------- Tipografías (2026-11-09) ----------
   Manrope para todo lo que se lee y se toca: geométrica pero cálida, con un 300 que mantiene lo liviano de Aire.
   Cormorant Garamond, sólo en los títulos grandes y en las bajadas en cursiva: el contraste de una serif de
   revista contra una palo seco limpia, como hacen las marcas de ropa de referencia. */
:root {
  --aire-fuente: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --aire-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --serif: var(--aire-display);
  --sans: var(--aire-fuente);
}
body { font-weight: 400; font-size: 15px }
p, .tenue, .bajada { font-weight: 300 }
h1, h2, .portada h3, .nota h3, .cajon-cabeza h2, .marca, .pie-marca { font-family: var(--aire-display); font-weight: 400; letter-spacing: -0.015em }
h1 { font-weight: 300 }
.hero h1, .campana-texto h1, .coleccion-texto h1, .articulo h1 { font-weight: 300; letter-spacing: -0.03em }
.campana-texto h1 em { font-style: italic; color: var(--aire-texto-2) }
.bloque-cabeza h2 { font-size: clamp(34px, 4vw, 52px) }
.tienda-cabeza h1 { font-size: clamp(44px, 5.4vw, 72px) }
.ficha h1 { font-size: clamp(38px, 4vw, 52px); letter-spacing: -0.02em }
.marca { font-size: 24px; letter-spacing: .18em; font-weight: 400 }
@media (max-width: 860px) { .marca { font-size: 19px; letter-spacing: .12em } }
.tarjeta h3, .valores h3, .grupo h2 { font-family: var(--aire-fuente) }
.cajon-cabeza h2 { font-size: 32px }
.coleccion-titulo, .articulo-bajada { font-weight: 300 }
.cupon-listo strong { font-family: var(--aire-fuente); font-weight: 600; letter-spacing: .1em; font-size: 20px }

/* Piezas nuevas en Aire */
.menu-boton { color: var(--aire-texto-2); transition: color var(--aire-tiempo) }
.menu-boton:hover, .menu-boton[aria-expanded="true"], .menu-boton.activo { color: var(--aire-texto) }
.mega { background: var(--aire-fondo); border-bottom-color: var(--aire-borde); box-shadow: 0 30px 40px -34px rgba(17, 24, 39, .22) }
.mega-col { font-weight: 300 }
.mega-col .etiqueta { font-weight: 500; color: var(--aire-texto) }
.mega-foto .marco { border-radius: var(--aire-radio-foto) }
.campana-foto img, .portada .marco, .nota .marco, .coleccion-portada .marco, .articulo-foto { border-radius: var(--aire-radio) }
.portada .marco, .nota .marco { transition: transform var(--aire-tiempo) var(--aire-curva), box-shadow var(--aire-tiempo) }
@media (hover: hover) {
  .portada:hover .marco, .nota:hover .marco { transform: translateY(-4px); box-shadow: var(--aire-sombra-hover) }
  .portada:hover img, .nota:hover img { transform: none }
}
.portada .etiqueta, .nota .etiqueta { font-size: 12px }
.coleccion-titulo { color: var(--aire-texto-2) }
.articulo-texto { font-weight: 300; color: var(--aire-texto) }

.pie { border-top-color: var(--aire-borde); color: var(--aire-texto) }
.pie-boletin { border-bottom-color: var(--aire-borde) }
.pie-boletin .etiqueta { color: var(--aire-texto-2) }
#boletin input { background: var(--aire-superficie); border: 1px solid var(--aire-borde); border-radius: var(--aire-radio-campo); font-size: 16px; min-height: 48px }
#boletin input:focus { outline: none; border-color: var(--aire-borde-fuerte) }
.pie-col summary, .pie-titulo { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--aire-texto) }
.pie-col ul { font-weight: 300; color: var(--aire-texto-2) }
.pie-col a, .pie-col button { color: var(--aire-texto-2); transition: color var(--aire-tiempo) }
.pie-col a:hover, .pie-col button:hover { color: var(--aire-texto); text-decoration: none }
.pie-base { border-top-color: var(--aire-borde) }
.pie-pagos span { border: 0; border-radius: 999px; background: var(--aire-gris-suave); color: var(--aire-texto-2); padding: 5px 12px }
.pie-legales a, .pie-legales button { color: var(--aire-texto-2) }
.pie-marca { color: var(--aire-texto); opacity: .06; font-weight: 300 }
@media (max-width: 760px) { .pie-col { border-bottom-color: var(--aire-borde) } }