/* ============================================================
   OSHERON — sistema de diseño «Telar»
   Un solo archivo para los cinco sitios del grupo.
   No editar por sitio: si cambia aquí, cambia en todos.
   ============================================================ */

:root{
  /* --- paleta --- */
  --tinta:#1C1917;
  --grafito:#46403B;
  --humo:#8A817A;
  --bone:#F0EBE1;
  --papel:#FBF9F6;
  --linea:#DDD5C8;
  --oxido:#A34A2E;
  --oxido-claro:#C9714F;
  --oxido-oscuro:#8B3B22;

  /* --- tipografía --- */
  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  /* --- medidas --- */
  --wrap:1200px;
  --pad:60px;
  --radio:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--oxido);text-decoration:none}
a:hover{color:var(--oxido-oscuro)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------- tipografía ---------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;color:var(--tinta);margin:0 0 .5em;line-height:1.1;letter-spacing:-.005em}
h1{font-size:clamp(2.4rem,5.4vw,5.1rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
.lead{font-size:1.19rem;line-height:1.65;color:var(--grafito);max-width:62ch}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--humo);margin:0 0 1rem;
}
.rule{height:1px;background:var(--linea)}
.tick{height:2px;width:40px;background:var(--oxido)}

/* ---------------- encabezado ---------------- */
.top{
  position:sticky;top:0;z-index:60;background:rgba(251,249,246,.94);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--linea);
}
.top-in{display:flex;align-items:center;gap:32px;height:82px}
.brandmark{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brandmark svg{flex:0 0 auto}
.brandmark .o{font-family:var(--display);font-size:20px;letter-spacing:.15em;font-weight:500;color:var(--tinta);line-height:1}
.brandmark .suf{
  font-size:9px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--oxido);line-height:1;margin-top:5px;
}
.nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav a{font-size:14px;color:var(--grafito);padding-bottom:3px;border-bottom:1.5px solid transparent;transition:.16s}
.nav a:hover,.nav a.on{color:var(--tinta);border-color:var(--oxido)}
.langbtn{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--linea);background:transparent;color:var(--grafito);
  padding:7px 13px;cursor:pointer;transition:.16s;
}
.langbtn:hover{border-color:var(--oxido);color:var(--tinta)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--tinta);margin:4px 0}

/* ---------------- héroe ---------------- */
.hero{background:var(--tinta);position:relative;overflow:hidden;padding:118px 0 0}
.hero.short{padding:86px 0 78px}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(240,235,225,.05) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(0deg,rgba(240,235,225,.05) 0 1px,transparent 1px 14px);
}
.hero .mono-bg,.hero-photo .mono-bg{
  position:absolute;right:5%;top:50%;transform:translateY(-50%);
  height:min(74%,340px);width:auto;aspect-ratio:1/1;max-width:32vw;
  opacity:.075;pointer-events:none;z-index:1;
}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:var(--bone);max-width:15ch}
.hero .lead{color:rgba(240,235,225,.72);font-size:1.19rem}
.hero .eyebrow{color:var(--oxido-claro)}

/* ---------------- cifras ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(240,235,225,.16);position:relative;z-index:2}
.stat{padding:34px 26px 42px;border-right:1px solid rgba(240,235,225,.16)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:52px;font-weight:500;color:var(--bone);line-height:1}
.stat span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(240,235,225,.48);margin-top:10px;
}

/* ---------------- botones ---------------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:15px 30px;
  border:1px solid transparent;transition:.16s;
}
.btn-ox{background:var(--oxido);color:#fff}
.btn-ox:hover{background:var(--oxido-oscuro);color:#fff}
.btn-gh{border-color:rgba(240,235,225,.42);color:var(--bone)}
.btn-gh:hover{border-color:var(--bone);color:#fff;background:rgba(240,235,225,.08)}
.btn-line{border-color:var(--linea);color:var(--tinta)}
.btn-line:hover{border-color:var(--oxido);color:var(--oxido)}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------------- secciones ---------------- */
section{padding:88px 0}
.alt{background:var(--bone)}
.dark{background:var(--tinta);color:rgba(240,235,225,.72)}
.dark h2,.dark h3{color:var(--bone)}
.dark .eyebrow{color:var(--oxido-claro)}
.dark .lead{color:rgba(240,235,225,.68)}
.split{display:grid;grid-template-columns:340px 1fr;gap:72px;align-items:start}
.head{max-width:64ch;margin-bottom:44px}

/* ---------------- tarjetas ---------------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  display:block;background:#fff;border:1px solid var(--linea);
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:#C6BCAB;box-shadow:0 14px 34px rgba(28,25,23,.10)}
.card .shot{aspect-ratio:4/3;background:var(--bone);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .shot img{width:100%;height:100%;object-fit:contain;padding:5%}
.card .body{padding:20px 22px 22px;border-top:1px solid var(--linea)}
.card h3{margin:0 0 4px;font-size:1.14rem}
.card .seg{font-size:12.5px;color:var(--humo);line-height:1.5}
.card .tag{
  display:inline-block;margin-top:14px;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;
}
.tag.reg{background:#EDF2ED;color:#2F6B3E;border:1px solid #CFE0D3}
.tag.tram{background:#FAF0E4;color:#8B5A20;border:1px solid #E9D6B9}

/* tarjeta de sección/rama */
.seg-card{
  display:block;background:#fff;border:1px solid var(--linea);
  padding:30px 28px 26px;position:relative;overflow:hidden;transition:.2s;
}
.seg-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--oxido);
  transform:scaleY(0);transform-origin:top;transition:transform .22s ease;
}
.seg-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(28,25,23,.09);border-color:#C6BCAB}
.seg-card:hover::before{transform:scaleY(1)}
.seg-card h3{font-size:1.34rem;margin-bottom:.35em}
.seg-card p{color:var(--grafito);font-size:.94rem;margin:0 0 16px}
.seg-card .count{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oxido)}
.seg-card.soon{background:var(--bone);border-style:dashed}
.seg-card.soon .count{color:var(--humo)}
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ---------------- listas de renglones ---------------- */
.rows{border-top:1px solid var(--linea)}
.row{display:flex;align-items:baseline;gap:20px;padding:22px 0;border-bottom:1px solid var(--linea)}
.row .nm{font-family:var(--display);font-size:24px;min-width:170px;font-weight:500}
.row .dd{font-size:14.5px;line-height:1.6;color:var(--grafito);flex:1}
.row .rt{font-size:12.5px;color:var(--humo);white-space:nowrap;font-variant-numeric:tabular-nums}
.rows.tight .row{padding:15px 0}
.rows.tight .nm{font-size:19px;min-width:140px;color:var(--grafito)}
.rows.tight .dd{font-size:13.5px;color:var(--humo)}
.dark .rows{border-color:rgba(240,235,225,.18)}
.dark .row{border-color:rgba(240,235,225,.18)}
.dark .row .nm{color:var(--bone)}
.dark .row .dd{color:rgba(240,235,225,.68)}

/* ---------------- ficha de datos ---------------- */
.ficha{border:1px solid var(--linea);background:#fff}
.ficha .fh{
  padding:16px 22px;border-bottom:1px solid var(--linea);background:var(--bone);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.ficha .fh strong{font-family:var(--display);font-size:1.02rem;font-weight:500}
.ficha dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr)}
.ficha .fr{padding:15px 22px;border-bottom:1px solid var(--linea);border-right:1px solid var(--linea)}
.ficha .fr:nth-child(2n){border-right:0}
.ficha dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--humo);margin-bottom:5px}
.ficha dd{margin:0;font-size:1rem;font-variant-numeric:tabular-nums}
.ficha .note{padding:14px 22px;font-size:12.5px;color:var(--humo);background:var(--bone);margin:0}

/* ---------------- galería ---------------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.gal figure{margin:0;border:1px solid var(--linea);overflow:hidden;background:#fff}
.gal img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:4%}
.gal figcaption{padding:11px 15px;font-size:12.5px;color:var(--humo);border-top:1px solid var(--linea)}

/* ---------------- columnas ---------------- */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.cols h3{margin-bottom:.4em}
.cols p{color:var(--grafito);font-size:.96rem;margin:0}

/* ---------------- datos de contacto ---------------- */
.datos{border-top:1px solid var(--linea)}
.datos .dr{padding:22px 0;border-bottom:1px solid var(--linea)}
.datos dt{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--humo);margin-bottom:8px}
.datos dd{margin:0;font-size:17px}
.dark .datos{border-color:rgba(240,235,225,.18)}
.dark .datos .dr{border-color:rgba(240,235,225,.18)}
.dark .datos dt{color:rgba(240,235,225,.45)}
.dark .datos dd{color:var(--bone)}
.pend{display:inline-block;color:var(--oxido);font-weight:600;border-bottom:1.5px dotted var(--oxido)}
.stat .pend{font-size:30px;font-family:var(--display);font-weight:500;letter-spacing:.02em}
.dark .pend{color:var(--oxido-claro);border-color:var(--oxido-claro)}

/* ---------------- avisos y legales ---------------- */
.legal{max-width:76ch}
.legal h2{margin-top:2em;font-size:1.5rem}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.5em}
.warn{background:#FAF0E4;border:1px solid #E9D6B9;color:#7C5219;padding:14px 18px;font-size:.9rem;margin-bottom:26px}
.soonbox{border:1px dashed var(--linea);background:var(--bone);padding:40px 34px;max-width:70ch}
.soonbox h3{margin-top:0}
.pager{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pager a{font-size:14px;color:var(--grafito);border:1px solid var(--linea);padding:11px 20px;transition:.16s}
.pager a:hover{border-color:var(--oxido);color:var(--oxido)}

/* ---------------- pie ---------------- */
.foot{background:var(--tinta);color:rgba(240,235,225,.62);padding:56px 0 30px;font-size:14px}
.foot a{color:rgba(240,235,225,.62)}
.foot a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px;padding-bottom:32px;border-bottom:1px solid rgba(240,235,225,.14)}
.foot h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(240,235,225,.42);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot .brandmark .o{color:var(--bone)}
.foot .brandmark .suf{color:var(--oxido-claro)}
.foot-bot{padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:rgba(240,235,225,.42)}

/* ---------------- responsivo ---------------- */
@media (max-width:980px){
  :root{--pad:36px}
  .grid,.cols,.segs{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .split{grid-template-columns:1fr;gap:32px}
  .foot-top{grid-template-columns:1fr 1fr}
  .hero .mono-bg,.hero-photo .mono-bg{display:none}
}
@media (max-width:640px){
  :root{--pad:22px}
  body{font-size:15.5px}
  .grid,.cols,.segs,.gal,.stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(240,235,225,.16);padding:24px 0 26px}
  .ficha dl{grid-template-columns:1fr}
  .ficha .fr{border-right:0}
  section{padding:60px 0}
  .hero{padding:64px 0 0}
  .hero.short{padding:56px 0 52px}
  .row{flex-direction:column;gap:6px}
  .row .nm{min-width:0}
  .nav{
    display:none;position:absolute;top:82px;left:0;right:0;background:var(--papel);
    border-bottom:1px solid var(--linea);flex-direction:column;gap:0;padding:8px var(--pad) 18px;align-items:stretch;
  }
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--linea);width:100%}
  .nav .langbtn{margin-top:12px;align-self:flex-start}
  .burger{display:block}
  .foot-top{grid-template-columns:1fr}
}

/* ============================================================
   Piezas propias de Textil y Brands
   ============================================================ */

/* tira de logotipos de marca */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.logo-tile{display:block;border:1px solid var(--linea);background:#fff;overflow:hidden;transition:.18s}
.logo-tile:hover{border-color:#C6BCAB;transform:translateY(-2px)}
.logo-tile .im{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-tile .im img{width:100%;height:100%;object-fit:contain;padding:9%}
.logo-tile .nm{padding:11px 14px;border-top:1px solid var(--linea);font-size:13.5px;font-weight:600;color:var(--tinta)}
.logo-tile .nm small{display:block;font-weight:400;color:var(--humo);font-size:12px;margin-top:3px}
.wordtile{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:var(--bone);font-family:var(--display);font-size:1.25rem;
  letter-spacing:.1em;color:var(--tinta);text-align:center;padding:14px;
}

/* familias de producto */
.lineas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.lineas li{padding:17px 0;border-bottom:1px solid var(--linea);display:flex;gap:20px;align-items:baseline}
.lineas b{font-family:var(--display);font-weight:500;min-width:180px;font-size:1.05rem}
.lineas span{color:var(--grafito);font-size:.95rem}

/* contacto a dos columnas */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* la ficha del IMPI también acepta .row (marcado antiguo) */
.ficha dl > .row{
  display:block;padding:15px 22px;border-bottom:1px solid var(--linea);
  border-right:1px solid var(--linea);
}
.ficha dl > .row:nth-child(2n){border-right:0}
.ficha dl > .row .nm,.ficha dl > .row .dd,.ficha dl > .row .rt{all:unset}

/* héroe con textura de tejido (Textil) */
.hero-photo{background:var(--tinta);position:relative;overflow:hidden;padding:110px 0 96px;color:var(--bone)}
.hero-photo.short{padding:78px 0 66px}
.hero-photo::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(240,235,225,.028) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(240,235,225,.028) 0 1px,transparent 1px 7px);
}
.hero-photo .veil{position:absolute;inset:0;background:linear-gradient(105deg,rgba(18,16,14,.55) 0%,rgba(18,16,14,.16) 100%);pointer-events:none}
.hero-photo .wrap{position:relative;z-index:2}
.hero-photo h1{color:var(--bone)}
.hero-photo .lead{color:rgba(240,235,225,.75)}
.hero-photo .eyebrow{color:var(--oxido-claro)}

@media (max-width:980px){
  .logos{grid-template-columns:repeat(3,1fr)}
  .contact{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .logos{grid-template-columns:repeat(2,1fr)}
  .lineas li{flex-direction:column;gap:4px}
  .lineas b{min-width:0}
  .hero-photo{padding:64px 0 56px}
}

/* héroe de página de marca (Brands) */
.mhero{padding:78px 0 66px;color:#fff;position:relative;overflow:hidden}
.mhero::after{content:"";position:absolute;inset:0;background:radial-gradient(760px 380px at 82% 12%,rgba(255,255,255,.12),transparent 62%);pointer-events:none}
.mhero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mhero h1{color:#fff;margin-bottom:.35em;font-size:clamp(2.1rem,4.4vw,3.4rem)}
.mhero .tagline{font-family:var(--display);font-style:italic;font-size:1.3rem;color:rgba(255,255,255,.92);margin:0 0 1.1em}
.mhero p{color:rgba(255,255,255,.78)}
.mhero .eyebrow{color:rgba(255,255,255,.62)}
.logoframe{background:#fff;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.30)}
.logoframe img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:6%}
@media (max-width:900px){.mhero .wrap{grid-template-columns:1fr;gap:34px}}

/* ---------------- familias de producto (Textil) ---------------- */
.familias{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.familia{background:#fff;border:1px solid var(--linea);padding:26px 26px 22px;display:flex;flex-direction:column}
.familia h3{font-size:1.22rem;margin:0 0 16px}
.familia ul{list-style:none;margin:0 0 18px;padding:0;flex:1;columns:1}
.familia li{
  font-size:14px;color:var(--grafito);padding:7px 0;border-bottom:1px solid #F0EBE1;
  line-height:1.4;
}
.familia li:last-child{border-bottom:0}
.familia .cuenta{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oxido);padding-top:12px;border-top:1px solid var(--linea);
}
.alt .familia{background:var(--papel);border-color:#D2C9B6}

@media (max-width:980px){.familias{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.familias{grid-template-columns:1fr}}

/* marca de un tercero, bajo licencia: se distingue de las propias */
.logo-tile.licencia{border-style:dashed}
.logo-tile.licencia .nm small{color:var(--oxido);font-weight:600}

/* la lista de prendas es muestra, no catálogo cerrado */
.nolimite{
  margin:26px 0 0;font-size:14.5px;line-height:1.75;color:var(--grafito);
  max-width:78ch;padding-left:18px;border-left:2px solid var(--oxido);
}