:root{
  /* paleta heredada del sitio original, muestreada del CSS y las imágenes */
  --granate:#7A0A10;
  --granate-deep:#4E0409;
  --granate-lite:#A8323A;
  --navy:#003466;
  --navy-deep:#00203F;
  --azul:#0066CC;
  --oro:#CD9933;
  --oro-lite:#E8C077;
  --naranja:#FF7200;

  --ink:#1F1412;
  --ink-2:#43302D;
  --muted:#7A625F;
  --ground:#F4EFEC;
  --surface:#FFFFFF;
  --surface-2:#EAE1DD;
  --line:#DACFCA;
  --line-soft:#E7DEDA;
  --wash:#F6E9E9;

  --pane-a:#B7C6CE;
  --pane-b:#D9DFDD;
  --pane-c:#C0CDD1;

  --shadow:0 1px 2px rgba(31,20,18,.06), 0 10px 30px -14px rgba(31,20,18,.28);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --granate:#C4444E; --granate-deep:#2A0508; --granate-lite:#E0808A;
    --navy:#7FA8D4; --navy-deep:#0A1626; --azul:#5B9EE8;
    --oro:#DDAB52; --oro-lite:#F0CE8E;
    --ink:#F0E7E4; --ink-2:#CBB9B5; --muted:#9C8783;
    --ground:#14100F; --surface:#1E1817; --surface-2:#271F1E;
    --line:#3A2E2C; --line-soft:#2C2322; --wash:#2A1618;
    --pane-a:#2C3A42; --pane-b:#1A2428; --pane-c:#243036;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 32px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --granate:#C4444E; --granate-deep:#2A0508; --granate-lite:#E0808A;
  --navy:#7FA8D4; --navy-deep:#0A1626; --azul:#5B9EE8;
  --oro:#DDAB52; --oro-lite:#F0CE8E;
  --ink:#F0E7E4; --ink-2:#CBB9B5; --muted:#9C8783;
  --ground:#14100F; --surface:#1E1817; --surface-2:#271F1E;
  --line:#3A2E2C; --line-soft:#2C2322; --wash:#2A1618;
  --pane-a:#2C3A42; --pane-b:#1A2428; --pane-c:#243036;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 32px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased
}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}

.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--granate);display:flex;align-items:center;gap:10px;margin:0 0 18px
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}

/* la banda dorada del fondo original, ahora como elemento estructural */
.rule-oro{height:3px;background:linear-gradient(90deg,var(--oro) 0%,var(--oro-lite) 50%,var(--oro) 100%)}

/* ---------- barra superior ---------- */
.top{background:var(--navy-deep);position:sticky;top:0;z-index:40}
.top-in{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;margin-right:auto;color:#F4EFEC}
.brand b{font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.03em}
.brand span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--oro);text-transform:uppercase}
.nav{display:flex;gap:26px}
.nav a{
  font-family:var(--f-display);font-size:14px;font-weight:500;text-decoration:none;
  color:rgba(244,239,236,.82);padding:4px 0;border-bottom:1.5px solid transparent;transition:.18s
}
.nav a:hover{color:#fff;border-bottom-color:var(--oro)}
.tel{
  font-family:var(--f-mono);font-size:13.5px;font-weight:600;text-decoration:none;
  color:#fff;background:var(--granate);padding:9px 16px;border-radius:2px;white-space:nowrap;transition:.18s
}
.tel:hover{background:var(--granate-lite)}
@media(max-width:880px){.nav{display:none}}

/* ---------- hero sobre granate ---------- */
.hero{position:relative;overflow:hidden;background:var(--granate-deep)}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(205,153,51,.20) 0%, transparent 55%),
    linear-gradient(168deg,#7A0A10 0%,#5C060C 52%,#3D0308 100%)
}
.hero-bg svg{position:absolute;bottom:0;left:0;width:100%;height:42%}
.hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding:80px 0 86px}
@media(max-width:920px){.hero-in{grid-template-columns:1fr;gap:46px;padding:56px 0 62px}}

.hero .eyebrow{color:var(--oro)}
.hero .eyebrow::after{background:rgba(232,192,119,.32)}
h1{font-size:clamp(40px,5.4vw,68px);line-height:1.01;font-weight:800;letter-spacing:-.035em;color:#FCF7F4}
h1 em{font-style:normal;color:var(--oro-lite);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:3px;background:var(--oro)}
.lede{font-size:19.5px;line-height:1.62;color:rgba(252,247,244,.82);max-width:31em;margin:26px 0 0;font-weight:300}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{
  font-family:var(--f-display);font-size:15px;font-weight:600;text-decoration:none;
  padding:13px 24px;border-radius:2px;transition:.18s;display:inline-flex;align-items:center;gap:9px
}
.btn-a{background:var(--oro);color:#2A1503}
.btn-a:hover{background:var(--oro-lite)}
.btn-b{border:1.5px solid rgba(252,247,244,.32);color:#FCF7F4}
.btn-b:hover{border-color:var(--oro);color:var(--oro-lite)}

.hero-meta{
  display:flex;margin-top:44px;border-top:1px solid rgba(252,247,244,.18);padding-top:20px;
  font-family:var(--f-mono);font-size:12px;color:rgba(252,247,244,.6);flex-wrap:wrap
}
.hero-meta div{padding-right:26px;margin-right:26px;border-right:1px solid rgba(252,247,244,.14)}
.hero-meta div:last-child{border:0;margin:0;padding:0}
.hero-meta b{
  display:block;font-family:var(--f-display);font-size:22px;font-weight:700;
  color:var(--oro-lite);letter-spacing:-.02em;font-variant-numeric:tabular-nums
}

.window{position:relative;aspect-ratio:1/1.12;background:#F4EFEC;border:10px solid #F4EFEC;box-shadow:0 24px 60px -20px rgba(0,0,0,.55);border-radius:2px}
.window-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.35fr 1fr;gap:10px;background:#F4EFEC}
.pane{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--pane-a) 0%,var(--pane-b) 46%,var(--pane-c) 100%)}
.pane::before{
  content:"";position:absolute;top:-60%;left:-120%;width:60%;height:260%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:rotate(16deg);animation:sheen 9s ease-in-out infinite
}
.pane:nth-child(2)::before{animation-delay:.7s}
.pane:nth-child(3)::before{animation-delay:1.5s}
.pane:nth-child(4)::before{animation-delay:2.2s}
@keyframes sheen{0%,72%{left:-120%}100%{left:180%}}
@media(prefers-reduced-motion:reduce){.pane::before{animation:none;opacity:.2;left:-10%}}
.window-tag{
  position:absolute;right:-11px;bottom:26px;background:var(--oro);color:#2A1503;
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 13px
}
.window-cap{position:absolute;left:0;bottom:-34px;font-family:var(--f-mono);font-size:11px;color:rgba(252,247,244,.62);letter-spacing:.04em}

/* ---------- secciones ---------- */
section{padding:88px 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:end;margin-bottom:46px}
@media(max-width:820px){.sec-head{grid-template-columns:1fr;gap:20px}}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;font-weight:700}
.sec-head p{margin:0;color:var(--muted);font-size:17px;max-width:34em;font-weight:300}

/* ---------- catálogo ---------- */
.cat{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:2px;background:var(--line);border:1px solid var(--line)}
.cat a{
  position:relative;background:var(--surface);padding:22px;text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;transition:.2s;overflow:hidden
}
.cat a:hover{background:var(--wash)}
.cat a.big{grid-column:span 2;grid-row:span 2}
@media(max-width:900px){
  .cat{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .cat a.big{grid-column:span 2;grid-row:span 1}
}
.cat h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--granate)}
.cat a.big h3{font-size:29px}
.cat .sub{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.05em;margin-top:5px;line-height:1.5}
.cat .draw{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 0;min-height:0}
.cat .draw svg{width:100%;height:100%;max-height:100%;color:var(--navy);opacity:.9}
.cat a.iron .draw svg{color:var(--oro)}
.cat .idx{position:absolute;top:20px;right:22px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);letter-spacing:.1em}

/* ---------- franja técnica en marino ---------- */
.specs{background:var(--navy-deep);color:#EAF1F8}
.specs .wrap{padding-top:76px;padding-bottom:76px}
.specs h2{color:#F4F8FC}
.specs .eyebrow{color:var(--oro)}
.specs .eyebrow::after{background:rgba(255,255,255,.2)}
.specs .sec-head p{color:rgba(234,241,248,.72)}
.spec-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16)}
@media(max-width:880px){.spec-row{grid-template-columns:repeat(2,1fr)}}
.spec{background:var(--navy-deep);padding:26px 22px}
.spec .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.spec .v{
  font-family:var(--f-display);font-size:38px;font-weight:700;letter-spacing:-.03em;
  margin:12px 0 6px;font-variant-numeric:tabular-nums;line-height:1;color:#F4F8FC
}
.spec .v small{font-size:15px;font-weight:500;color:rgba(234,241,248,.58);margin-left:3px;letter-spacing:0}
.spec .d{font-size:14.5px;color:rgba(234,241,248,.68);line-height:1.5;font-weight:300}
.note{margin-top:20px;font-family:var(--f-mono);font-size:11.5px;color:rgba(234,241,248,.5);line-height:1.6}

/* ---------- taller ---------- */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
@media(max-width:880px){.story{grid-template-columns:1fr;gap:36px}}
.story p{margin:0 0 18px;font-size:18px;line-height:1.68;color:var(--ink-2);font-weight:300;max-width:34em}
.story p:first-of-type{font-size:21px;color:var(--ink)}
.zona{border-left:3px solid var(--oro);padding-left:22px}
.zona .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--granate);margin-bottom:14px}
.zona ul{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
.zona li{font-family:var(--f-display);font-size:15px;font-weight:500;padding:5px 0;color:var(--ink-2);break-inside:avoid}

/* ---------- contacto ---------- */
.contact{background:var(--surface-2);border-top:1px solid var(--line)}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:880px){.c-grid{grid-template-columns:1fr;gap:36px}}
.c-list{display:flex;flex-direction:column;margin-top:8px}
.c-item{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.c-item:first-child{border-top:1px solid var(--line)}
.c-item .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding-top:5px}
.c-item .v{font-size:17px;line-height:1.5}
.c-item .v a{font-family:var(--f-display);font-weight:600;text-decoration:none;color:var(--granate)}
.c-item .v a:hover{color:var(--naranja)}
.form{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--granate);padding:30px;box-shadow:var(--shadow)}
.form h3{font-size:21px;margin-bottom:6px}
.form>p{margin:0 0 22px;color:var(--muted);font-size:15px;font-weight:300}
.field{margin-bottom:15px}
.field label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:var(--ground);border:1px solid var(--line);border-radius:2px;padding:11px 13px
}
.field textarea{resize:vertical;min-height:82px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--granate);outline:none}
.form .btn-send{
  display:block;width:100%;text-align:center;font-family:var(--f-display);font-size:15px;
  font-weight:600;text-decoration:none;padding:13px 24px;border-radius:2px;
  background:var(--granate);color:#fff;transition:.18s
}
.form .btn-send:hover{background:var(--granate-lite)}
.form-note{margin:14px 0 0;font-family:var(--f-mono);font-size:11px;color:var(--muted);line-height:1.6;text-align:center}

/* ---------- blog ---------- */
.blog{background:var(--surface);border-top:1px solid var(--line)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.posts{grid-template-columns:1fr}}
.post{background:var(--surface);padding:0;text-decoration:none;display:flex;flex-direction:column;transition:.2s}
.post:hover{background:var(--wash)}
.post-fig{height:120px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.post-fig svg{position:absolute;inset:0;width:100%;height:100%}
.post-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post .meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--granate);display:flex;gap:10px;align-items:center}
.post .meta i{font-style:normal;color:var(--muted)}
.post h3{font-size:19px;line-height:1.22;color:var(--ink)}
.post p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);font-weight:300;flex:1}
.post .more{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--granate)}
.post:hover .more{color:var(--naranja)}

footer{background:var(--granate-deep);color:rgba(244,239,236,.66);padding:38px 0 30px;font-size:13.5px}
.f-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.f-in b{font-family:var(--f-display);color:#F4EFEC;font-weight:700;letter-spacing:-.02em}
.f-in span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em}

/* ---------- sello ueyia ---------- */
.sello{
  margin-top:28px;padding-top:22px;border-top:1px solid rgba(244,239,236,.16);
  display:flex;justify-content:center
}
.sello a{
  display:inline-flex;align-items:center;gap:13px;text-decoration:none;
  padding:9px 18px;border:1px solid rgba(232,192,119,.34);border-radius:2px;transition:.22s
}
.sello a:hover{border-color:var(--oro);background:rgba(205,153,51,.08)}
.sello .mark{
  width:26px;height:26px;flex:none;border-radius:50%;
  background:linear-gradient(140deg,var(--oro-lite),var(--oro));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:800;font-size:13px;color:#3D0308;letter-spacing:-.04em
}
.sello .txt{display:flex;flex-direction:column;line-height:1.35}
.sello .txt em{
  font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(244,239,236,.5)
}
.sello .txt b{font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--oro-lite);letter-spacing:.01em}
.sello a:hover .txt b{color:#fff}


/* ===========================================================================
   Páginas interiores: cabecera, prosa, fichas, blog, ofertas
   =========================================================================== */

.pagina-head{padding:62px 0 40px}
.pagina-head .eyebrow a{color:var(--granate);text-decoration:none}
.pagina-head .eyebrow a:hover{color:var(--naranja)}
.pagina-titulo{
  font-family:var(--f-display);font-size:clamp(32px,4.6vw,54px);line-height:1.03;
  font-weight:800;letter-spacing:-.035em;margin:0
}
.pagina-lede{
  font-size:19px;line-height:1.6;color:var(--ink-2);max-width:34em;
  margin:20px 0 0;font-weight:300
}
.firma{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line)
}
.wrap-lectura{max-width:760px}

/* --- prosa de artículos y páginas ---------------------------------------- */
.prosa{font-size:18px;line-height:1.7;color:var(--ink-2);font-weight:300;max-width:34em}
.prosa-ancha,.prosa-articulo{max-width:36em}
.prosa-articulo{font-size:19px}
.prosa p{margin:0 0 20px}
.prosa h2{
  font-family:var(--f-display);font-size:26px;font-weight:700;color:var(--ink);
  letter-spacing:-.025em;margin:40px 0 14px;line-height:1.15
}
.prosa h3{font-size:20px;color:var(--ink);margin:32px 0 12px}
.prosa ul,.prosa ol{margin:0 0 20px;padding-left:22px}
.prosa li{margin-bottom:8px}
.prosa strong{font-weight:500;color:var(--ink)}
.prosa a{color:var(--granate);text-decoration:underline;text-underline-offset:3px}
.prosa a:hover{color:var(--naranja)}
.prosa blockquote{
  margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--oro);
  font-style:italic;color:var(--ink)
}

/* --- ficha de producto ---------------------------------------------------- */
.ficha{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}
@media(max-width:860px){.ficha{grid-template-columns:1fr;gap:32px}}
.ficha-dibujo{
  background:var(--surface);border:1px solid var(--line);padding:34px;
  display:flex;align-items:center;justify-content:center;aspect-ratio:1/1
}
.ficha-dibujo svg{width:100%;height:100%;color:var(--navy)}

.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:44px}
@media(max-width:760px){.galeria{grid-template-columns:repeat(2,1fr)}}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

.otros{display:flex;flex-wrap:wrap;gap:2px}
.otros a{
  font-family:var(--f-display);font-size:15px;font-weight:600;text-decoration:none;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  padding:12px 20px;transition:.18s
}
.otros a:hover{background:var(--wash);color:var(--granate);border-color:var(--granate)}

/* --- franja de llamada a la acción ---------------------------------------- */
.cta-franja{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--granate-deep);color:#F7EFEC;padding:30px 34px;margin-top:52px;border-radius:2px
}
.cta-franja h3{font-family:var(--f-display);font-size:22px;color:#fff;margin:0 0 5px;font-weight:700}
.cta-franja p{margin:0;color:rgba(247,239,236,.76);font-size:16px;font-weight:300}
.cta-franja .btn-a{background:var(--oro);color:#2A1503;flex:none}
.cta-franja .btn-a:hover{background:var(--oro-lite)}

/* --- blog ----------------------------------------------------------------- */
.posts-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.posts-2{grid-template-columns:1fr}}
.paginacion{display:flex;gap:2px;justify-content:center;margin-top:34px}
.paginacion a{
  font-family:var(--f-mono);font-size:13px;text-decoration:none;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);padding:9px 15px;transition:.16s
}
.paginacion a:hover{border-color:var(--granate);color:var(--granate)}
.paginacion a[aria-current="page"]{background:var(--granate);color:#fff;border-color:var(--granate)}

/* --- ofertas -------------------------------------------------------------- */
.ofertas{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line)}
.oferta{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  background:var(--surface);padding:22px 24px;text-decoration:none;transition:.18s
}
.oferta:hover{background:var(--wash)}
.oferta-ico{
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  background:var(--granate);color:#fff;padding:9px 11px;border-radius:2px
}
.oferta h3{font-family:var(--f-display);font-size:18px;color:var(--ink);margin:0}
.oferta p{margin:4px 0 0;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.oferta-mas{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--granate);white-space:nowrap}
.oferta:hover .oferta-mas{color:var(--naranja)}

.vacio{
  background:var(--surface);border:1px dashed var(--line);padding:34px;
  text-align:center;color:var(--muted);font-size:16px
}
.vacio a{color:var(--granate)}

/* --- formulario: errores y campo trampa ----------------------------------- */
.field .err{
  display:block;margin-top:6px;font-family:var(--f-mono);font-size:11.5px;
  color:#B3261E;line-height:1.45
}
:root:not([data-theme="light"]) .field .err{color:#E8756A}
.field input:invalid:not(:placeholder-shown){border-color:#B3261E}
.form-error{
  background:#FBE7E4;border-left:3px solid #B3261E;color:#7A1810;
  padding:12px 15px;margin:0 0 18px;font-size:14.5px;line-height:1.5
}
:root:not([data-theme="light"]) .form-error{background:#341A17;color:#F0B5AE}
/* El campo trampa no puede ocultarse con display:none o los robots lo detectan */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
