/* La tienda publica de cada negocio (/t/<slug>).
   4E (8-oct-2026): hereda la casa de Naho (papel, tinta, Fraunces para el
   nombre, Archivo para todo lo demas, la escala 12·13·15·17·22·28) y le suma la
   marca del negocio: su color (--marca, servido por /t/<slug>/marca.css) y su
   logo. Dos temas: «clasico» (cualquier giro) y «editorial» (moda). Antes era
   un solo molde de boutique, con letra de revista en mayusculas espaciadas,
   para la ferreteria y la farmacia por igual (auditoria de diseno, punto 10).

   Reglas: cero mayusculas espaciadas; ningun font-size fuera de la escala
   (salvo el monograma de la ficha sin foto, que es dibujo, no texto); contraste
   AA en todo texto; toques de 44 px como minimo; nada se mueve. */

@font-face { font-family:"Archivo"; font-style:normal; font-weight:400 700;
             font-display:swap; src:url("/estatico/fuentes/archivo.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:400 700;
             font-display:swap; src:url("/estatico/fuentes/fraunces.woff2") format("woff2"); }

:root {
  --papel: #f6f3ec;
  --marfil: #fffdf8;
  --tinta: #211e18;
  --tinta2: #655e50;
  --tinta3: #716a5c;
  --linea: #e6dfd2;
  --linea2: #d3cabb;
  --salvia: #e7efe9;
  --verde-osc: #1d3b30;
  --error: #a63d2f;
  --error-fondo: #faf0ec;
  /* la marca del negocio; marca.css las reemplaza (estas son las de Naho) */
  --marca: #2d5546;
  --marca-tinte: #f0f1eb;
  --marca-tinte2: #e2e7df;
  --marca-linea: #c4cdc4;
  --serifa: "Fraunces", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: 1.75rem;
  --alto: 2.75rem;
  --alto-accion: 3rem;
  --radio: .625rem;
  --radio-chico: .5rem;
  --ancho: 76rem;
  --fondo: var(--papel);
  --tarjeta: var(--marfil);
  --foto: 1 / 1;
}
.tema-editorial {
  --fondo: var(--marfil);
  --tarjeta: var(--marfil);
  --radio: .125rem;
  --radio-chico: .125rem;
  --foto: 4 / 5;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: var(--t-base); line-height: 1.5;
       color: var(--tinta); background: var(--fondo); min-height: 100vh;
       display: flex; flex-direction: column;
       -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
main { width: 100%; max-width: var(--ancho); margin: 0 auto; flex: 1;
       padding: 1.25rem 1rem 3rem; }
a { color: var(--tinta); text-underline-offset: .2em; }
img { max-width: 100%; }
::selection { background: var(--marca); color: #fff; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }
.ico-grande { width: 2.75rem; height: 2.75rem; color: var(--tinta2); }
.ico-marca { color: var(--marca); }

.saltar { position: absolute; left: .5rem; top: .5rem; z-index: 60; background: var(--marfil);
          padding: .6rem 1rem; border-radius: var(--radio-chico);
          clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.saltar:focus { clip-path: none; width: auto; height: auto; }

/* ── cabecera: logo + nombre a la izquierda, cuenta y carrito a la derecha ── */
.cabecera { position: sticky; top: 0; z-index: 30; background: var(--fondo);
            border-bottom: 1px solid var(--linea); }
.cabecera-fila { max-width: var(--ancho); margin: 0 auto; display: flex;
                 align-items: center; gap: .75rem; padding: .5rem 1rem;
                 min-height: 3.75rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; min-width: 0;
         flex: 1 1 auto; text-decoration: none; color: var(--tinta); }
.marca-nombre { font-family: var(--serifa); font-size: var(--t-md); font-weight: 600;
                line-height: 1.2; overflow-wrap: anywhere;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                overflow: hidden; }
.marca-logo { height: 2.5rem; width: auto; max-width: 7rem; object-fit: contain; flex: none; }
.enlaces { display: flex; align-items: center; gap: .25rem; flex: none; }
.enlace-ico { position: relative; display: inline-flex; align-items: center;
             justify-content: center; gap: .4rem; min-width: var(--alto);
             min-height: var(--alto); padding: 0 .5rem; border-radius: var(--radio-chico);
             color: var(--tinta); text-decoration: none; font-size: var(--t-sm);
             font-weight: 500; }
.enlace-ico:hover { background: var(--marca-tinte); }
.rotulo-ico { display: none; }
.cuenta-carrito { position: absolute; top: .2rem; right: .1rem; min-width: 1.15rem;
                  height: 1.15rem; padding: 0 .3rem; border-radius: 1rem;
                  background: var(--marca); color: #fff; font-size: var(--t-xs);
                  font-weight: 600; line-height: 1.15rem; text-align: center; }

/* categorias: fila de pastillas que se desliza de lado en celular */
.categorias { max-width: var(--ancho); margin: 0 auto; display: flex; gap: .5rem;
              padding: 0 1rem .6rem; overflow-x: auto; scrollbar-width: none; }
.categorias::-webkit-scrollbar { display: none; }
.categorias a { flex: none; display: inline-flex; align-items: center;
                min-height: 2.25rem; padding: 0 .9rem; border-radius: 2rem;
                border: 1px solid var(--linea2); background: var(--tarjeta);
                color: var(--tinta); text-decoration: none; font-size: var(--t-sm);
                white-space: nowrap; }
.categorias a:hover { border-color: var(--marca); }
.categorias a[aria-current="page"] { background: var(--marca); border-color: var(--marca);
                                     color: #fff; }

@media (min-width: 760px) {
  .cabecera-fila { padding: .6rem 1.5rem; min-height: 4.5rem; }
  .categorias { padding: 0 1.5rem .75rem; }
  main { padding: 1.75rem 1.5rem 4rem; }
  .marca-nombre { font-size: var(--t-lg); }
  .marca-logo { height: 3rem; max-width: 9rem; }
  .rotulo-ico { display: inline; }
  .enlace-ico.con-texto { padding: 0 .75rem; }
  .cuenta-carrito { position: static; }
}

/* ── titulos y texto ── */
h1 { font-family: var(--serifa); font-size: var(--t-xl); font-weight: 500;
     line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: var(--t-md); font-weight: 600; margin: 2rem 0 .75rem; }
/* 5D: el título de cada página es ui.encabezado (header.cabeza, de _ui.html) */
.cabeza { margin: .25rem 0 1.25rem; }
.cabeza h1 { margin: 0; }
.cabeza-ayuda { color: var(--tinta2); font-size: var(--t-sm); margin-top: .25rem; }
.nota, .vacio { color: var(--tinta2); font-size: var(--t-sm); margin: .9rem 0; }
.nota a, .vacio a { color: var(--tinta); }
.nota.con-ico { display: flex; gap: .5rem; align-items: flex-start; }
.nota.con-ico .ico { width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--marca); }
.volver { margin: 0 0 .75rem; font-size: var(--t-sm); }
.volver a { display: inline-flex; align-items: center; gap: .15rem; min-height: var(--alto);
            color: var(--tinta2); text-decoration: none; padding-right: .5rem; }
.volver a:hover { color: var(--tinta); text-decoration: underline; }
.volver .ico { width: 1.1rem; height: 1.1rem; margin-left: -.3rem; }
.volver.centrado { text-align: center; margin-top: 2rem; }
.aviso-tienda { border-left: 3px solid var(--marca); background: var(--marca-tinte);
                padding: .75rem 1rem; margin: 1rem 0; border-radius: var(--radio-chico);
                font-size: var(--t-base); }
.aviso-tienda.error { border-left-color: var(--error); background: var(--error-fondo); }
.angosta { max-width: 30rem; }

/* ── botones: primario (color de la marca), suave (con borde) y enlace ── */
button, .boton { font: inherit; font-size: var(--t-base); font-weight: 600;
                 display: inline-flex; align-items: center; justify-content: center;
                 gap: .5rem; min-height: var(--alto-accion); padding: 0 1.4rem;
                 border-radius: var(--radio); border: 1px solid transparent;
                 cursor: pointer; text-decoration: none; text-align: center;
                 background: var(--marca); color: #fff; }
button:hover, .boton:hover { filter: brightness(1.08); }
button:disabled { background: var(--linea); color: var(--tinta2); cursor: default; filter: none; }
.suave, button.suave, .boton.suave { background: var(--tarjeta); color: var(--tinta);
                                     border-color: var(--linea2); }
.suave:hover { filter: none; border-color: var(--marca); }
button.enlace { background: none; color: var(--tinta2); border: 0; padding: 0 .25rem;
                min-height: var(--alto); font-weight: 500; text-decoration: underline;
                font-size: var(--t-sm); }
button.enlace:hover { color: var(--tinta); filter: none; }
.ancho { width: 100%; }
.botones { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }

/* ── formularios: caja, etiqueta arriba, 16 px para que el celular no acerque ── */
label { display: block; margin: 0 0 1rem; font-size: var(--t-sm); font-weight: 500;
        color: var(--tinta2); }
input[type=text], input[type=tel], input[type=email], input[type=number], select {
  display: block; width: 100%; min-height: var(--alto); margin-top: .35rem;
  padding: .55rem .75rem; font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--marfil); border: 1px solid var(--linea2);
  border-radius: var(--radio-chico); appearance: none; }
input::placeholder { color: var(--tinta3); }
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: 0;
                            border-color: var(--marca); }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23655e50' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right .85rem center;
         padding-right: 2.2rem; }
.ayuda { display: block; margin-top: .3rem; font-size: var(--t-xs); font-weight: 400;
         color: var(--tinta2); }
.datos-cliente { max-width: 34rem; }
.consentimiento { color: var(--tinta2); font-size: var(--t-sm); line-height: 1.55;
                  margin: .25rem 0 1rem; }
.consentimiento a { color: var(--tinta); }

/* ── la portada ── */
.bienvenida { padding: .75rem 0 1.5rem; max-width: 40rem; }
.bienvenida h1 { font-size: var(--t-xl); }
.bienvenida .cabeza { margin: 0; }
.bienvenida .cabeza-ayuda { margin-top: .5rem; color: var(--tinta2); font-size: var(--t-md);
                            line-height: 1.5; }
.ver-mas { display: flex; justify-content: center; margin-top: 2rem; }

/* ── la grilla ── */
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.pieza { display: flex; flex-direction: column; text-decoration: none; color: var(--tinta);
         background: var(--tarjeta); border: 1px solid var(--linea);
         border-radius: var(--radio); overflow: hidden; }
.pieza:hover { border-color: var(--marca-linea); }
.pieza:hover .nombre { text-decoration: underline; }
.pieza-foto { display: block; aspect-ratio: var(--foto); background: var(--marca-tinte);
              overflow: hidden; }
.pieza-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pieza .nombre { padding: .65rem .75rem 0; font-size: var(--t-base); line-height: 1.35;
                 overflow-wrap: anywhere; }
.pieza .precio { margin-top: auto; padding: .35rem .75rem .75rem; font-weight: 600;
                 font-variant-numeric: tabular-nums; }
.por-unidad { font-weight: 400; color: var(--tinta2); font-size: var(--t-sm); }

/* sin foto: iniciales sobre el tono de la marca, con el icono del giro */
.sin-foto { position: relative; width: 100%; height: 100%; display: grid;
            place-items: center; background: var(--marca-tinte); color: var(--marca); }
.sin-foto[data-tono="1"] { background: var(--marca-tinte2); }
.sin-foto[data-tono="2"] { background: #efe9df; }
.monograma { font-family: var(--serifa); font-size: clamp(2rem, 9vw, 3rem); font-weight: 500;
             line-height: 1; letter-spacing: .02em; }
.ico-giro { position: absolute; top: .7rem; left: .7rem; width: 1.35rem; height: 1.35rem;
            opacity: .7; }
.sin-foto[data-forma="grande"] .monograma { font-size: clamp(3.5rem, 16vw, 6rem); }
.sin-foto[data-forma="grande"] .ico-giro { width: 2rem; height: 2rem; top: 1rem; left: 1rem; }

/* tema editorial: sin tarjetas, fotos altas, nombres en la serifa */
.tema-editorial .pieza { border: 0; background: none; }
.tema-editorial .pieza .nombre { padding: .7rem 0 0; font-family: var(--serifa);
                                 font-size: var(--t-md); }
.tema-editorial .pieza .precio { padding: .2rem 0 0; font-weight: 500; }
.tema-editorial .rejilla { gap: 1.75rem .9rem; }
.tema-editorial .categorias a { border-color: transparent; background: none;
                                padding: 0 .6rem; border-radius: 0; }
.tema-editorial .categorias a[aria-current="page"] { background: none; color: var(--tinta);
                                                     border-bottom: 2px solid var(--marca); }
.tema-editorial .bienvenida { text-align: center; margin: 0 auto; padding: 1.5rem 0 2.25rem; }
.tema-editorial @media (min-width: 760px) {
  .tema-editorial .rejilla { gap: 2.5rem 1.25rem; }
  .tema-editorial .bienvenida h1 { font-size: 2.25rem; }
}

/* ── la ficha del producto ── */
.ficha { display: grid; gap: 1.25rem; }
@media (min-width: 760px) {
  .ficha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem;
           align-items: start; }
}
.ficha-foto { aspect-ratio: var(--foto); border-radius: var(--radio); overflow: hidden;
              background: var(--marca-tinte); }
/* sin foto, en celular la ficha no gasta una pantalla entera en el dibujo */
@media (max-width: 759px) { .ficha-foto:has(.sin-foto) { aspect-ratio: 2 / 1; } }
.ficha-foto .foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.ficha .datos { max-width: 30rem; }
.ficha .precio { font-size: var(--t-lg); font-weight: 600; margin: .5rem 0 1.25rem;
                 font-variant-numeric: tabular-nums; }
.ficha .precio .por-unidad { font-size: var(--t-base); }
.ficha .descripcion { color: var(--tinta2); line-height: 1.6; margin: -.5rem 0 1.25rem; }
.precio-nota { color: var(--tinta2); margin: 0 0 .75rem; }
.opciones { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.opciones legend { font-size: var(--t-sm); font-weight: 500; color: var(--tinta2);
                   margin-bottom: .4rem; padding: 0; }
.opciones-fila { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { margin: 0; position: relative; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span { display: inline-flex; align-items: center; min-height: var(--alto);
               min-width: var(--alto); justify-content: center; padding: 0 .9rem;
               border: 1px solid var(--linea2); border-radius: var(--radio-chico);
               background: var(--marfil); color: var(--tinta); font-size: var(--t-base);
               cursor: pointer; }
.opcion input:checked + span { border: 2px solid var(--marca); background: var(--marca-tinte);
                               padding: 0 calc(.9rem - 1px); font-weight: 600; }
.opcion input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.comprar-fila { display: flex; gap: .75rem; align-items: flex-end; }
.comprar-fila .cantidad { flex: 0 0 7.5rem; margin: 0; }
.comprar-fila .cantidad input { min-height: var(--alto-accion); text-align: center; }
.comprar-fila button { flex: 1; }
.wa-talla { max-width: 14rem; }
.boton-wa { margin-top: .5rem; }

/* ── carrito ── */
.caja-compra { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .caja-compra { grid-template-columns: minmax(0, 1fr) 26rem; gap: 2.5rem; align-items: start; }
}
.lineas { list-style: none; padding: 0; border-top: 1px solid var(--linea); }
.linea { padding: .85rem 0; border-bottom: 1px solid var(--linea); }
.linea-arriba { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.linea-nombre { overflow-wrap: anywhere; font-weight: 500; }
.linea-total { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.linea-abajo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
               margin-top: .35rem; }
.linea-precio { color: var(--tinta2); font-size: var(--t-sm); margin-right: auto; }
.paso { display: inline-flex; align-items: center; border: 1px solid var(--linea2);
        border-radius: var(--radio-chico); background: var(--marfil); }
.paso form { display: contents; }
.paso-valor { min-width: 2.5rem; text-align: center; font-weight: 600;
              font-variant-numeric: tabular-nums; padding: 0 .25rem; }
.quitar-linea { margin: 0; }
.total-fila { display: flex; justify-content: space-between; align-items: baseline;
              padding: 1rem 0 0; font-size: var(--t-md); }
.total-fila strong { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.sus-datos { background: var(--tarjeta); border: 1px solid var(--linea);
             border-radius: var(--radio); padding: 1.25rem 1rem; }
.sus-datos h2 { margin-top: 0; }
@media (min-width: 760px) { .sus-datos { padding: 1.5rem; } }
.vacio-caja { text-align: center; padding: 2.5rem 1rem; display: flex; flex-direction: column;
              align-items: center; gap: .75rem; }
.vacio-caja p { color: var(--tinta2); }

/* ── gracias y pedido ── */
.gracias { text-align: center; padding: 1.5rem 0 1.25rem; max-width: 34rem; margin: 0 auto;
           display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.gracias p { color: var(--tinta2); }
.gracias p strong { color: var(--tinta); }
.gracias form { margin-top: .5rem; }
.resumen-pedido { max-width: 34rem; margin: 1rem auto 0; background: var(--tarjeta);
                  border: 1px solid var(--linea); border-radius: var(--radio);
                  padding: .5rem 1rem 1rem; }
.resumen-pedido .lineas { border-top: 0; }
.datos-entrega { margin-top: 1rem; display: grid; gap: .4rem; font-size: var(--t-sm); }
.datos-entrega div { display: flex; gap: .5rem; }
.datos-entrega dt { color: var(--tinta2); flex: 0 0 6.5rem; }
.datos-entrega dd { margin: 0; overflow-wrap: anywhere; }
.gracias-acciones { max-width: 34rem; margin: 1.25rem auto 0; display: flex; flex-direction: column;
                    gap: .6rem; }
.gracias-acciones .nota { text-align: center; margin: 0; }
.gracias-acciones form button { width: 100%; }
.gracias-acciones.izquierda { margin-left: 0; }
.estado-pedido { display: flex; gap: .5rem; flex-wrap: wrap; margin: -.5rem 0 .5rem; }
.pastilla { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 .7rem;
            border-radius: 2rem; background: var(--papel); border: 1px solid var(--linea);
            font-size: var(--t-sm); color: var(--tinta); white-space: nowrap; }
.pastilla.bien { background: var(--salvia); border-color: #cfdcd3; color: var(--verde-osc); }
.pastilla.mal { background: var(--error-fondo); border-color: #e8c7bd; color: var(--error); }
.tema-editorial .resumen-pedido, .tema-editorial .sus-datos { border-color: var(--linea2); }
.estado-pedido + .resumen-pedido, .titulo-pagina + .estado-pedido + .resumen-pedido { margin-left: 0; }

/* ── cuenta ── */
.tarjeta-cuenta { background: var(--tarjeta); border: 1px solid var(--linea);
                  border-radius: var(--radio); padding: 1rem 1.1rem; max-width: 34rem; }
.tarjeta-cuenta .nota { margin: .4rem 0 0; }
.lista-pedidos { list-style: none; padding: 0; max-width: 40rem; border-top: 1px solid var(--linea); }
.lista-pedidos a { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
                   align-items: center; padding: .8rem .25rem; min-height: 3.5rem;
                   border-bottom: 1px solid var(--linea); text-decoration: none; }
.lista-pedidos a:hover .lp-numero { text-decoration: underline; }
.lp-numero { font-weight: 600; }
.lp-fecha { color: var(--tinta2); font-size: var(--t-sm); grid-row: 2; }
.lp-total { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.lista-pedidos .pastilla { grid-row: 2; grid-column: 2; justify-self: end; }
.salir-form { margin-top: 1.5rem; }

/* ── paginas legales ── */
.texto-legal { max-width: 40rem; line-height: 1.7; }
.texto-legal p { margin: 0 0 1rem; }

/* ── el pie: quien vende (073), con contraste AA ── */
.pie-tienda { border-top: 1px solid var(--linea); background: var(--fondo);
              color: var(--tinta2); font-size: var(--t-sm); line-height: 1.6; }
.pie-columnas { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem 1rem 2rem;
                display: grid; gap: .75rem; }
@media (min-width: 760px) {
  .pie-columnas { grid-template-columns: 1fr auto; padding: 1.75rem 1.5rem 2.25rem;
                  align-items: start; }
}
.pie-tienda p { margin: 0; }
.pie-negocio { color: var(--tinta); }
.pie-tienda a { color: var(--tinta2); }
.pie-tienda a:hover { color: var(--tinta); }
.pie-legal a { display: inline-block; padding: .2rem 0; }

/* 5D (ola 5): la tienda arma sus títulos y botones con las piezas comunes de
   _ui.html (ui.encabezado, ui.seccion, ui.boton). Aquí, cómo se ven aquí. */
.cabeza-acciones { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.gracias .cabeza, .ficha .datos .cabeza { margin: 0; }
.seccion-cabeza { margin: 2rem 0 .75rem; }
.seccion-cabeza h2 { margin: 0; }
.sus-datos .seccion-cabeza { margin-top: 0; }
.datos-cliente > .boton { width: 100%; }
.angosta .botones > .boton { flex: 1 1 100%; }
#wa-enlace { margin-top: .5rem; }
/* los pasos de cantidad del carrito: botones sin caja dentro de su marco */
.paso .boton { min-height: var(--alto); min-width: var(--alto); padding: 0;
               background: none; color: var(--tinta); border: 0; border-radius: 0; }
.paso .boton:hover { background: var(--marca-tinte); filter: none; }
.paso .boton:disabled { background: none; color: var(--linea2); }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
               overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* fin 5D */
