/* Tulum · páginas de categoría en marca 2026.
   Se carga DESPUÉS de tulum.css. Solo añade lo propio de las categorías: héroe, secciones editoriales,
   fichas de producto, stats, formulario de leads y variantes de fondo.
   Tokens y fuentes: los de tulum.css (:root). body.cat body.day aplican al mismo elemento. */

/* ===================================================================
   BASE DE PÁGINA
   =================================================================== */
body.cat{--col:62ch;--wide:1200px;background:var(--bone);color:var(--carbon);font:300 17px/1.65 var(--text)}
body.cat main{display:block}

/* ===================================================================
   HÉROE DE CATEGORÍA  (.cat-hero)
   =================================================================== */
.cat-hero{
  position:relative;min-height:clamp(480px,70vh,900px);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden
}
.cat-hero-bg{position:absolute;inset:0;z-index:0}
.cat-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.cat-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,18,17,.82) 0%,rgba(19,18,17,.3) 60%,transparent 100%)
}
.cat-hero-body{
  position:relative;z-index:1;
  max-width:var(--wide);width:100%;margin:0 auto;
  padding:var(--sec) var(--g) clamp(56px,7vw,96px)
}
.cat-hero-eyebrow{
  font:500 11px/16px var(--text);letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:clamp(18px,2.4vw,28px)
}
.cat-hero-h1{
  font:400 clamp(44px,7.5vw,116px)/1.02 var(--display);
  letter-spacing:-.018em;font-variation-settings:"opsz" 96;
  text-wrap:balance;max-width:22ch;color:var(--ink)
}
.cat-hero-h1 em{
  font-family:var(--italic);font-style:italic;font-weight:400;
  font-variation-settings:"opsz" 96;padding-right:.04em;display:inline
}
.cat-hero-desc{
  margin-top:clamp(20px,2.4vw,30px);max-width:48ch;
  font:300 clamp(16px,1.4vw,19px)/1.65 var(--text);color:rgba(242,239,233,.78)
}
.cat-hero-body::after{
  content:"";display:block;width:48px;height:1px;
  background:var(--gold);margin-top:clamp(28px,3.6vw,48px)
}

/* Héroe mínimo (sin foto: tailoring, uniforms) */
.cat-hero-plain{
  padding:clamp(140px,22vh,220px) var(--g) clamp(56px,7vw,96px);
  max-width:var(--wide);margin:0 auto
}
.cat-hero-plain .cat-hero-h1{color:var(--carbon)}
.cat-hero-plain .cat-hero-desc{color:#3b3833}
.cat-hero-plain::after{
  content:"";display:block;width:48px;height:1px;
  background:var(--gold);margin-top:clamp(28px,3.6vw,48px)
}

/* ===================================================================
   SECCIÓN EDITORIAL GENÉRICA  (.cat-ed)
   =================================================================== */
.cat-ed{padding:clamp(64px,9vw,128px) var(--g)}
.cat-ed-inner{max-width:var(--wide);margin:0 auto}
.cat-ed--tint{background:var(--sand)}
.cat-ed--deep{background:var(--carbon);color:var(--ink)}
.cat-ed--deep .cat-h2{color:var(--ink)}
.cat-ed--deep p{color:rgba(242,239,233,.8)}

/* Columna de texto de ancho editorial */
.cat-ed-text{max-width:var(--col)}
.cat-ed-text p{font:300 17px/1.75 var(--text);color:#2a2724;margin:0 0 1.15em}
.cat-ed-text p:last-child{margin-bottom:0}
.cat-ed--deep .cat-ed-text p{color:rgba(242,239,233,.8)}

/* Layouts de split */
.cat-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:start}
@media(max-width:860px){.cat-split{grid-template-columns:1fr;gap:40px}}

/* ===================================================================
   TÍTULOS H2 CON FILETE ORO  (.cat-h2)
   =================================================================== */
.cat-h2{
  position:relative;
  font:400 clamp(28px,3.6vw,52px)/1.1 var(--display);
  letter-spacing:-.012em;font-variation-settings:"opsz" 72;
  text-wrap:balance;margin:0 0 clamp(18px,2.2vw,28px);
  padding-top:26px;max-width:26ch
}
.cat-h2::before{
  content:"";position:absolute;left:0;top:0;
  width:0;height:1px;background:var(--gold);
  transition:width .8s var(--ease)
}
.cat-h2[data-line-done]::before{width:32px}

/* ===================================================================
   CIFRAS / STATS  (.cat-figures)
   =================================================================== */
.cat-figures{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);
  margin-top:clamp(32px,4.4vw,56px)
}
.cat-fig{flex:0 0 auto;min-width:140px}
.cat-fig-n{
  display:block;
  font:400 clamp(40px,6vw,80px)/1 var(--display);
  letter-spacing:-.02em;font-variation-settings:"opsz" 96;
  color:var(--gold-text-lt)
}
.cat-fig-u{
  display:block;margin-top:8px;
  font:500 11px/14px var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted-lt)
}
.cat-fig-b{
  margin-top:10px;font:300 14px/1.6 var(--text);
  color:#3b3833;max-width:24ch
}
.cat-ed--deep .cat-fig-b{color:rgba(242,239,233,.65)}
.cat-ed--deep .cat-fig-u{color:var(--gold-text)}

/* ===================================================================
   GALERÍA DE PRODUCTO  (.cat-gallery)
   =================================================================== */
.cat-gallery{
  padding:clamp(56px,8vw,112px) var(--g);
  background:var(--carbon)
}
.cat-gallery-inner{max-width:var(--wide);margin:0 auto}
.cat-gallery-label{
  font:500 11px/16px var(--text);letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:clamp(28px,4vw,48px)
}
.cat-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(12px,1.4vw,20px)
}
.cat-card{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;background:var(--raised)
}
.cat-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)
}
.cat-card:hover img{transform:scale(1.04)}
.cat-card-label{
  position:absolute;bottom:0;left:0;right:0;
  padding:clamp(14px,2vw,22px) clamp(14px,2vw,22px);
  background:linear-gradient(to top,rgba(19,18,17,.7),transparent);
  font:500 11px/14px var(--text);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink)
}

/* "Toque de Midas" en galería: data-midas lo activa tulum.js */
.cat-card [data-midas]{cursor:crosshair}

/* ===================================================================
   FOTO EDITORIAL GRANDE  (.cat-ph)
   =================================================================== */
.cat-ph{
  padding:0 var(--g) clamp(56px,7vw,96px);
  max-width:calc(var(--wide) + 2 * var(--g));margin:0 auto
}
.cat-ph figure{margin:0}
.cat-ph .ph{
  overflow:hidden;aspect-ratio:16/9;
  background:var(--sand)
}
@media(max-width:600px){.cat-ph .ph{aspect-ratio:4/3}}
.cat-ph .ph img{width:100%;height:100%;object-fit:cover}

/* ===================================================================
   CAPABILITIES CARDS  (.cat-caps)
   =================================================================== */
.cat-caps{padding:clamp(56px,8vw,112px) var(--g)}
.cat-caps-inner{max-width:var(--wide);margin:0 auto}
.cat-caps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1px;background:var(--line-lt);
  margin-top:clamp(28px,4vw,48px)
}
.cat-cap{
  background:var(--bone);
  padding:clamp(24px,3vw,36px);
  transition:background .4s
}
.cat-cap:hover{background:var(--sand)}
.cat-cap-icon{
  width:28px;height:1px;background:var(--gold);
  margin-bottom:clamp(18px,2.4vw,26px)
}
.cat-cap-title{
  font:400 clamp(17px,1.6vw,21px)/1.2 var(--display);
  letter-spacing:-.006em;margin:0 0 10px;color:var(--carbon)
}
.cat-cap-body{font:300 14px/1.65 var(--text);color:#3b3833}

/* ===================================================================
   PARES CLAVE/VALOR  (.cat-pairs)
   =================================================================== */
.cat-pairs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
@media(max-width:520px){.cat-pairs{grid-template-columns:1fr}}
.cat-pair-k{
  font:500 11px/14px var(--text);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-text-lt);margin-bottom:8px
}
.cat-pair-v{font:300 15px/1.65 var(--text);color:#2a2724;margin:0}

/* ===================================================================
   PRECIOS  (.cat-price)
   =================================================================== */
.cat-price{
  display:flex;flex-direction:column;gap:2px;
  font:400 clamp(28px,3.5vw,48px)/1 var(--display);
  letter-spacing:-.012em;font-variation-settings:"opsz" 72;
  color:var(--carbon)
}
.cat-price small{
  font:300 13px/1.4 var(--text);letter-spacing:.02em;
  color:var(--muted-lt);margin-top:6px
}

/* ===================================================================
   TABLA COMPARATIVA  (.cat-table-wrap)
   =================================================================== */
.cat-table-wrap{
  max-width:min(100%,980px);overflow-x:auto;
  margin:clamp(28px,3.4vw,44px) 0;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)
}
.cat-table{
  width:100%;min-width:540px;border-collapse:collapse;
  font:300 15px/1.55 var(--text);color:#2a2724
}
.cat-table th{
  background:var(--sand);text-align:left;
  font:500 11px/16px var(--text);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text-lt);padding:16px 18px;
  border-bottom:1px solid var(--gold);vertical-align:bottom
}
.cat-table td{
  padding:14px 18px;border-bottom:1px solid var(--line-lt);vertical-align:top
}
.cat-table tr:last-child td{border-bottom:0}
.cat-table td:first-child{font-weight:400;color:var(--carbon)}

/* ===================================================================
   FORMULARIO DE LEADS  (.cat-contact)
   =================================================================== */
.cat-contact{
  background:var(--carbon);color:var(--ink);
  padding:clamp(72px,10vw,136px) var(--g)
}
.cat-contact-inner{max-width:var(--wide);margin:0 auto}
.cat-contact .cat-h2{color:var(--ink)}
.cat-contact .cat-h2::before{background:var(--gold-text)}

/* Heredamos los estilos del formulario del blog (misma estructura HTML) */
.contact-form{
  margin-top:clamp(32px,4.4vw,48px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)
}
@media(max-width:660px){.contact-form{grid-template-columns:1fr}}
.contact-form .form-full{grid-column:1/-1}

.form-label{
  display:block;
  font:500 11px/14px var(--text);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:8px
}
.form-control{
  width:100%;
  background:var(--raised);color:var(--ink);
  border:1px solid var(--line);border-radius:0;
  padding:14px 16px;
  font:300 15px/1.5 var(--text);
  transition:border-color .3s,box-shadow .3s;
  -webkit-appearance:none
}
.form-control:focus{
  outline:0;border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(201,160,78,.18)
}
.form-control option{background:var(--carbon)}
.form-group{display:flex;flex-direction:column}

/* MOQ alert */
#tf-moq{
  grid-column:1/-1;
  padding:14px 18px;background:rgba(201,160,78,.12);
  border-left:2px solid var(--gold);
  font:300 14px/1.6 var(--text);color:var(--gold-text)
}
.opt{opacity:.55;font-weight:400}

/* Botón de envío: magnético */
.form-submit{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 36px;
  font:500 12px/1 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--carbon);background:var(--gold);
  border:0;cursor:pointer;
  transition:background .3s,transform .25s var(--ease)
}
.form-submit:hover{background:var(--gold-text)}
.form-submit:active{transform:translateY(1px)}
.form-submit[data-magnetic]{display:inline-flex}   /* tulum.js lo activa */

/* ===================================================================
   REVELADO SUAVE (fallback CSS; sin JS todo visible)
   =================================================================== */
html.js .cat .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)
}
html.js .cat .reveal.in{opacity:1;transform:none}

/* ===================================================================
   LINKS DENTRO DE CONTENIDO DE CATEGORÍA
   =================================================================== */
.cat :is(.cat-ed-text,.cat-pairs,.cat-caps-grid) a:not(.form-submit):not(.cta-pri){
  color:inherit;
  text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1px;text-underline-offset:.24em;
  transition:text-decoration-thickness .25s,color .25s
}
.cat :is(.cat-ed-text,.cat-pairs,.cat-caps-grid) a:not(.form-submit):not(.cta-pri):hover{
  text-decoration-thickness:2px;color:var(--gold-text-lt)
}

/* CTAs (hereda patrón del blog) */
.cat-cta-row{
  display:flex;flex-wrap:wrap;gap:8px 44px;
  margin-top:clamp(28px,3.4vw,44px)
}
.cta-pri,.cta-sec{
  position:relative;display:inline-flex;align-items:center;gap:18px;min-height:44px;
  font:500 12px/1 var(--text);letter-spacing:.26em;text-transform:uppercase;
  text-decoration:none;color:var(--carbon);padding:10px 0 14px;
  border-bottom:1px solid var(--gold);transition:gap .5s var(--ease),color .3s
}
.cta-pri::after{content:"";display:block;width:28px;height:1px;background:currentColor}
.cta-sec{border-bottom-color:var(--line-lt)}
.cta-pri:hover{gap:28px;color:var(--gold-text-lt)}
.cta-sec:hover{color:var(--gold-text-lt);border-bottom-color:var(--gold)}

/* ===================================================================
   CLASES HEREDADAS DE LOS HTML VIEJOS (mantener sin romper SEO/accesibilidad)
   Se reasignan visualmente a la nueva marca. No cambian la semántica.
   =================================================================== */

/* Hero viejo */
.hero-spread,.cover{
  position:relative;min-height:clamp(440px,65vh,860px);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden
}
.hero-spread-bg,.cover-bg,.hero-img-wrap{position:absolute;inset:0}
.hero-spread-bg img,.cover-bg img,.hero-img-wrap img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%
}
.hero-spread-bg::after,.cover-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,18,17,.82) 0%,rgba(19,18,17,.25) 65%,transparent 100%)
}
.hero-spread-content,.cover-content{
  position:relative;z-index:1;
  max-width:var(--wide);width:100%;margin:0 auto;
  padding:var(--sec) var(--g) clamp(56px,7vw,96px)
}
/* hero sin foto (.hero en tailoring) */
.hero{
  padding:clamp(140px,22vh,220px) var(--g) clamp(48px,6vw,80px);
  max-width:var(--wide);margin:0 auto
}
.hero h1{
  font:400 clamp(38px,6.5vw,96px)/1.02 var(--display);
  letter-spacing:-.018em;font-variation-settings:"opsz" 96;
  text-wrap:balance;max-width:22ch;color:var(--carbon);margin:0
}
.hero h1 em{
  font-family:var(--italic);font-style:italic;font-weight:400;
  font-variation-settings:"opsz" 96;padding-right:.04em
}
.hero p{
  margin-top:clamp(18px,2vw,26px);max-width:48ch;
  font:300 17px/1.65 var(--text);color:#3b3833
}

/* Eyebrows y labels del héroe viejo */
.label,.eyebrow{
  font:500 11px/16px var(--text);letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-text)
}
.display-xl,.display-lg{
  font:400 clamp(40px,7vw,108px)/1.02 var(--display);
  letter-spacing:-.018em;font-variation-settings:"opsz" 96;
  text-wrap:balance;max-width:22ch;color:var(--ink)
}
.display-xl em,.display-lg em{
  font-family:var(--italic);font-style:italic;font-weight:400;
  font-variation-settings:"opsz" 96;padding-right:.04em
}
.body-text{
  margin-top:clamp(16px,1.8vw,22px);max-width:48ch;
  font:300 17px/1.65 var(--text);color:rgba(242,239,233,.78)
}

/* secciones editoriales .ed */
.ed{background:var(--bone);color:var(--carbon)}
.ed-section{padding:clamp(56px,8vw,112px) var(--g);border-top:1px solid var(--line-lt)}
.ed-section:first-child{border-top:0}
.ed-section--tint{background:var(--sand)}
.ed-section--deep{background:var(--carbon);color:var(--ink)}
.ed-section--deep h2,.ed-section--deep .ed-h{color:var(--ink)}
.ed-section--deep p,.ed-section--deep .ed-lede{color:rgba(242,239,233,.8)}
.ed-wrap{max-width:var(--wide);margin:0 auto}
.ed-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:start}
@media(max-width:860px){.ed-split{grid-template-columns:1fr;gap:32px}}
.ed-h{
  font:400 clamp(24px,3vw,44px)/1.1 var(--display);
  letter-spacing:-.01em;font-variation-settings:"opsz" 72;
  text-wrap:balance;max-width:26ch;margin:0 0 clamp(12px,1.8vw,18px);
  color:var(--carbon)
}
.ed-h--light{color:var(--ink)}
.ed-lede{font:300 17px/1.75 var(--text);color:#2a2724;margin:0 0 1em;max-width:56ch}
.ed-eyebrow{
  font:500 11px/14px var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-text-lt);margin-bottom:10px
}

/* Cifras del ed-section */
.ed-figures{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);
  margin-top:clamp(28px,4vw,48px)
}
.ed-fig{flex:0 0 auto;min-width:120px}
.ed-fig-n{
  display:block;
  font:400 clamp(36px,5vw,72px)/1 var(--display);
  letter-spacing:-.02em;font-variation-settings:"opsz" 96;
  color:var(--gold-text-lt)
}
.ed-fig-u{
  display:block;margin-top:6px;
  font:500 11px/14px var(--text);letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted-lt)
}
.ed-fig-b{margin-top:8px;font:300 14px/1.6 var(--text);color:#3b3833;max-width:24ch}

/* precios */
.ed-price{
  font:400 clamp(28px,3.5vw,48px)/1 var(--display);
  letter-spacing:-.012em;font-variation-settings:"opsz" 72;
  color:var(--carbon)
}
.ed-section--deep .ed-price{color:var(--ink)}
.ed-price small{display:block;font:300 13px/1.4 var(--text);color:var(--muted-lt);margin-top:6px}
.ed-section--deep .ed-price small{color:var(--gold-text)}

/* pares */
.ed-pairs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);margin-top:clamp(24px,3vw,36px)}
@media(max-width:520px){.ed-pairs{grid-template-columns:1fr}}
.ed-pair-k{
  font:500 11px/14px var(--text);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-text-lt);margin-bottom:8px
}
.ed-pair-v{font:300 15px/1.65 var(--text);color:#2a2724;margin:0}
.ed-section--deep .ed-pair-v{color:rgba(242,239,233,.8)}
.ed-section--deep .ed-pair-k{color:var(--gold-text)}

/* crédito de desarrollo */
.ed-credit{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin:clamp(28px,3.6vw,44px) 0}
.ed-credit-n{font:400 clamp(36px,5vw,72px)/1 var(--display);letter-spacing:-.02em;color:var(--gold-text)}
.ed-credit-l{font:300 14px/1.6 var(--text);color:rgba(242,239,233,.65);max-width:22ch;margin-top:8px}
.ed-fine{font:300 13px/1.7 var(--text);color:rgba(242,239,233,.5);max-width:56ch;margin-top:clamp(16px,2vw,24px)}

/* accordion de Q&A */
.faq-item{border-top:1px solid var(--line-lt)}
.faq-item:last-child{border-bottom:1px solid var(--line-lt)}
details.faq-item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:clamp(16px,2vw,22px) 0;
  font:400 clamp(15px,1.4vw,18px)/1.35 var(--display);
  letter-spacing:-.006em;color:var(--carbon)
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{
  content:"+";flex:none;
  font:300 22px/1 var(--text);color:var(--gold-text-lt);
  transition:transform .35s var(--ease)
}
details.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-body{
  padding:0 0 clamp(16px,2vw,22px);
  font:300 15px/1.75 var(--text);color:#3b3833;max-width:56ch
}

/* product sections */
.product-section{padding:clamp(56px,8vw,112px) var(--g)}
.product-section .ed-wrap{max-width:var(--wide);margin:0 auto}
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(28px,4vw,44px)
}

/* nota */
.note{
  max-width:820px;margin:2rem auto 0;
  padding:1rem 1.4rem;
  background:rgba(201,160,78,.08);
  border-left:2px solid var(--gold);
  font:300 14px/1.65 var(--text);color:#2a2724
}
.note strong{font-weight:500;color:var(--carbon)}

/* Back link */
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font:500 11px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text-lt);text-decoration:none;
  padding:clamp(80px,13vh,120px) var(--g) 0;max-width:calc(var(--wide) + 2*var(--g));
  margin:0 auto;display:flex
}

/* scroll-progress */
.scroll-progress{
  position:fixed;top:0;left:0;z-index:50;
  height:2px;width:0;background:var(--gold);
  transition:width .1s linear;pointer-events:none
}

/* ===================================================================
   RESPONSIVE EXTRAS
   =================================================================== */
@media(max-width:600px){
  .ed-figures,.cat-figures{flex-direction:column;gap:20px}
  .cat-gallery-grid{grid-template-columns:1fr 1fr}
  .contact-form{grid-template-columns:1fr}
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media(prefers-reduced-motion:reduce){
  html.js .cat .reveal{opacity:1;transform:none;transition:none}
  .cat-hero-bg img,.cat-card img{transition:none}
  .cat-h2::before{transition:none}
}

/* Enlace cruzado de SEO (guía de swimwear, versión ES de sportswear): antes iba bajo el pie en línea */
.cat .cat-xlink{margin:0;padding:clamp(28px,4vw,48px) var(--gutter,24px);text-align:center;background:var(--hueso,#F2EFE9);font:400 .95rem/1.5 'Jost',system-ui,sans-serif}
.cat .cat-xlink a{color:#131211;text-decoration:none;border-bottom:1px solid #C9A04E;padding-bottom:2px;transition:color .3s,border-color .3s}
.cat .cat-xlink a:hover,.cat .cat-xlink a:focus-visible{color:#8a6a24;border-color:#131211}

/* Más colecciones: enlazado interno entre categorías, editorial y sobrio */
.cat .cat-related{background:#131211;color:#F2EFE9;padding:clamp(48px,7vw,96px) var(--gutter,24px)}
.cat .cat-related-in{max-width:1180px;margin:0 auto}
.cat .cat-rel-k{margin:0 0 clamp(20px,3vw,36px);font:400 .72rem/1 'Jost',system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#C9A04E}
.cat .cat-rel-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,4vw,56px)}
.cat .cat-rel-t{margin:0 0 14px;font:400 clamp(1.3rem,2.2vw,1.7rem)/1.1 'Bodoni Moda',serif;color:#F2EFE9}
.cat .cat-related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cat .cat-related a{color:#E7E0D4;text-decoration:none;font:300 1rem/1.4 'Jost',system-ui,sans-serif;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.cat .cat-related a:hover,.cat .cat-related a:focus-visible{color:#C9A04E;border-color:#C9A04E}

/* 29-sep: brillos con inset negativo (::before de .cta y .blog-card) sumaban 4 px de desborde en móvil de 390 */
.cat section.cta{overflow-x:clip}

/* ===================================================================
   PORTADA IA (29-sep): banda a todo el ancho arriba de cada categoría.
   21:9 en escritorio, 4:3 en móvil. Esquinas rectas, sin sombras, sin texto encima
   (el H1 queda debajo, en su bloque). Un solo movimiento: zoom lento 1,00 -> 1,04 en 14 s.
   =================================================================== */
.cat .cat-cover{
  position:relative;margin:0;padding:0;overflow:hidden;background:var(--carbon);
  aspect-ratio:21/9;max-height:58vh;width:100%
}
.cat .cat-cover picture{display:block;width:100%;height:100%}
.cat .cat-cover img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:68% 50%;
  transform-origin:68% 50%;animation:cat-cover-zoom 5s cubic-bezier(.16,.84,.3,1) both
}
@keyframes cat-cover-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}   /* 29-sep: antes 14 s y 1,04 ("va muy lento") */
@media(max-width:720px){
  .cat .cat-cover{aspect-ratio:4/3;max-height:none}
}
@media(prefers-reduced-motion:reduce){
  .cat .cat-cover img{animation:none;transform:none}
}
/* con portada arriba, el hueco de 100 px que despejaba el menú fijo sobra */
.cat .cat-cover + div[style*="padding: 100px"]{padding-top:28px !important}
.cat .cat-cover + .hero{padding-top:clamp(28px,3.2vw,44px)}
/* hero heredado sin foto (men/casual-wear): fondo carbón para que el H1 claro se lea */
.cat .hero-spread{background:var(--carbon)}
/* tulum.css tiene un `.cat{padding:var(--sec) 0 0}` de la home que también cae sobre <body class="cat">: la portada sube hasta el borde */
body.cat{padding-top:0}
/* `.hero` de la home (100svh, fondo carbón) también cae sobre el encabezado de tailoring: H1 en carbón sobre carbón */
.cat header.hero{height:auto;min-height:0;overflow:visible;background:transparent}
/* legibilidad del H1 heredado sobre fotos claras: velo carbón más firme detrás del texto (antes .25 a mitad de altura) */
.cat .hero-spread-bg::after{background:linear-gradient(to top,rgba(19,18,17,.9) 0%,rgba(19,18,17,.78) 45%,rgba(19,18,17,.5) 80%,rgba(19,18,17,.25) 100%)}

/* Clip de la portada: arranca solo al abrir la página (sin scroll ni cursor) y se repite al pasar el cursor; la foto queda debajo */
.cat .cat-cover[data-clip] img{animation:none;transform:none}
.cat .cat-cover-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s ease;z-index:1;pointer-events:none;background:transparent}
.cat .cat-cover-vid.on{opacity:1}
@media(prefers-reduced-motion:reduce){.cat .cat-cover-vid{display:none}}

/* 30-sep-2026: bajo la portada v3 el héroe viejo queda solo como texto (sin foto de stock, sin velo, sin botón verde) */
.hero-spread--solo{min-height:0;background:var(--carbon)}
.hero-spread--solo .hero-spread-content{padding:clamp(28px,3.2vw,44px) var(--g) clamp(40px,5vw,72px)}
.cat-cover + .hero,.cat-cover ~ .hero{padding-top:clamp(28px,3.2vw,44px)}

/* ===================================================================
   CONTACTO DE CATEGORÍA (.contact-section) — design-review 30-sep FINDING-001
   El HTML de las 13 categorías usa .contact-section/.contact-grid/.form-input,
   no .cat-contact: sin fondo el texto hueso quedaba hueso sobre hueso (invisible),
   pegado al borde y con campos grises del navegador. Mismo lenguaje que el
   formulario de la home (campos con filete inferior, sin cajas, botón filete oro).
   =================================================================== */
.contact-section{background:var(--carbon);color:var(--bone);padding:clamp(72px,10vw,136px) var(--g)}
.contact-section .container{max-width:var(--wide);margin:0 auto}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.contact-info{position:sticky;top:112px}
.contact-section .label{display:block;margin-bottom:22px;color:var(--gold-text)}
.contact-section .display-lg{color:var(--bone);margin:0 0 24px}
.contact-section .body-text{color:#CFC8BC;max-width:42ch}
.contact-details{margin-top:40px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:22px}
.contact-detail-item .label{margin-bottom:8px;font-size:10px;letter-spacing:.24em}
.contact-detail-item .small-detail{margin:0;font-family:var(--text);font-size:15px;line-height:1.55;color:var(--bone);overflow-wrap:anywhere}
.contact-detail-item a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.contact-detail-item a:hover{color:var(--gold-text);border-bottom-color:var(--gold-text)}

.contact-section .contact-form{margin:0;display:block;background:var(--raised);border:1px solid var(--line);padding:clamp(28px,4vw,56px)}
.contact-section .contact-form h3{margin:0;font:400 clamp(26px,2.4vw,36px)/1.15 var(--display);color:var(--bone)}
.contact-section .form-subtitle{margin:10px 0 36px;font-size:15px;color:var(--muted)}
.contact-section .form-group{display:block;margin-bottom:28px}
.contact-section .form-label{margin-bottom:10px;font:500 11px/1.5 var(--text);letter-spacing:.18em;color:#CFC8BC}
.contact-section .form-input,.contact-section .form-select{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid #4A4540;border-radius:0;padding:12px 0 13px;color:var(--bone);font:300 16px/1.3 var(--text);color-scheme:dark;transition:border-color .3s}
.contact-section .form-select{-webkit-appearance:none;appearance:none;padding-right:28px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A8A195' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center}
.contact-section .form-select option{background:var(--carbon);color:var(--bone)}
.contact-section .form-input::placeholder{color:#8C857A;opacity:1}
.contact-section .form-input:hover,.contact-section .form-select:hover{border-bottom-color:var(--muted)}
.contact-section .form-input:focus,.contact-section .form-select:focus{outline:none;border-bottom-color:var(--gold-text)}
.contact-section .form-input:focus-visible,.contact-section .form-select:focus-visible{outline:2px solid var(--gold-text);outline-offset:4px}
.contact-section .form-input:user-invalid,.contact-section .form-select:user-invalid{border-bottom-color:#E08A7A}
.contact-section .form-submit{display:block;width:100%;margin-top:32px;padding:19px 20px;font:500 12px/1.3 var(--text);letter-spacing:.24em}
.contact-section #tf-moq{margin:-4px 0 28px!important;padding:20px 22px!important;border:1px solid rgba(224,189,114,.42)!important;border-left:1px solid rgba(224,189,114,.42)!important;border-radius:0!important;background:rgba(201,160,78,.06)!important;color:#CFC8BC;font-size:14px!important;line-height:1.65!important}
.contact-section #tf-moq strong{color:var(--gold-text);font:400 19px/1.3 var(--display);margin-bottom:8px!important}
@media(max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}.contact-info{position:static}}

/* ===================================================================
   TAILORING: bloques heredados sin estilos (.section / .caps / .cap / .cta)
   design-review 30-sep FINDING-002: quedaban pegados al borde izquierdo, en negrita de
   sistema y sin la columna del resto de la página.
   =================================================================== */
.cat section.section{max-width:var(--wide);margin:0 auto;padding:clamp(40px,6vw,88px) var(--g) clamp(64px,9vw,128px)}
.cat section.section > h2{position:relative;margin:0 0 clamp(32px,4vw,56px);padding-top:26px;max-width:26ch;font:400 clamp(28px,3.6vw,52px)/1.1 var(--display);letter-spacing:-.012em;font-variation-settings:"opsz" 72;text-wrap:balance;color:var(--carbon)}
.cat section.section > h2::before{content:"";position:absolute;left:0;top:0;width:32px;height:1px;background:var(--gold)}
.cat .caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
.cat .cap{border-top:1px solid var(--line-lt);padding-top:24px}
.cat .cap h3{margin:0 0 12px;font:400 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.005em;color:var(--carbon)}
.cat .cap p{margin:0;max-width:38ch;font:300 16px/1.7 var(--text);color:#3b3833}
@media(max-width:860px){.cat .caps{grid-template-columns:minmax(0,1fr);gap:36px 0}}
.cat section.cta{display:block;width:auto;margin:0;background:var(--sand);padding:clamp(56px,7vw,104px) var(--g)}
.cat section.cta > *{max-width:var(--wide);margin-left:auto;margin-right:auto}
.cat section.cta > h2{margin-top:0;margin-bottom:16px;font:400 clamp(28px,3.6vw,52px)/1.1 var(--display);letter-spacing:-.012em;color:var(--carbon);text-transform:none}
.cat section.cta > p{margin:0 auto 28px max(0px,calc((100% - var(--wide))/2));max-width:56ch!important;font:300 17px/1.65 var(--text);letter-spacing:0;text-transform:none;color:#3b3833}
.cat section.cta > .btn{display:flex;width:fit-content;max-width:none;margin-top:0;margin-left:max(0px,calc((100% - var(--wide))/2));padding:10px 0 14px;font:500 12px/1 var(--text);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:var(--carbon);border-bottom:1px solid var(--gold);background:transparent;transition:color .3s}
.cat section.cta > .btn:hover{color:var(--gold-text-lt)}

/* ===================================================================
   ÍNDICES women/men: tarjetas de verticales — design-review 30-sep FINDING-003
   `.blur-fade` (marca vieja) nace en opacidad 0 y nada la revela: quedaban ~2.700 px en blanco.
   Tarjetas rectas, foto vertical de la portada v3, texto sobre velo carbón.
   =================================================================== */
.cat .blur-fade{opacity:1!important;filter:none!important;transform:none!important}
.cat .product-section{padding:clamp(48px,6vw,88px) 0 clamp(72px,9vw,128px)}
.cat .product-section .container{max-width:var(--wide);margin:0 auto;padding:0 var(--g)}
.cat .sub-section-header{margin:0 0 clamp(28px,3.4vw,48px)!important}
.cat .sub-section-header .label{display:block;margin-bottom:14px}
.cat .sub-section-header h2{margin:0;font:400 clamp(28px,3.6vw,52px)/1.1 var(--display);letter-spacing:-.012em;color:var(--carbon)}
.cat .sub-section-header .divider{display:none}
.cat .product-grid-4{display:grid;gap:clamp(16px,1.8vw,24px)!important}
.cat .product-grid-4 > a.product-card{overflow:hidden;background:var(--carbon)}
.cat .product-grid-4 > a.product-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:56% 18%;transition:transform 1.1s var(--ease)}
.cat .product-grid-4 > a.product-card:hover img{transform:scale(1.03)}
.cat .product-grid-4 > a.product-card > div{background:linear-gradient(to top,rgba(19,18,17,.86),rgba(19,18,17,0))!important;padding:56px 24px 26px!important}
.cat .product-grid-4 > a.product-card .label{color:rgba(242,239,233,.9)!important;letter-spacing:.24em}
.cat .product-grid-4 > a.product-card h3{margin:6px 0 0!important;font:400 clamp(24px,2vw,30px)/1.15 var(--display);color:var(--bone)!important}
.cat .hero-spread + div[style*="max-width: 900px"]{max-width:var(--wide)!important;margin:clamp(40px,5vw,72px) auto 0!important;padding:0 var(--g)!important;text-align:left!important}
.cat .hero-spread + div[style*="max-width: 900px"] p{max-width:62ch;margin:0!important;font:300 17px/1.75 var(--text)!important;color:#2a2724!important}
.cat .product-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:900px){.cat .product-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}.cat .product-grid-4 > a.product-card h3{font-size:22px}}

/* design-review 30-sep: el subtítulo del formulario caía en Inter (fuente vieja de Google) */
.contact-section .form-subtitle{font-family:var(--text)}

/* ===================================================================
   ACCESIBILIDAD — contraste (design-review 30-sep, Lighthouse color-contrast)
   El eyebrow `.label` usaba el oro OSCURO (#7A5518, pensado para fondo hueso) sobre carbón: 2,79:1.
   Sobre carbón se usa el oro claro (#E0BD72); el subtítulo del formulario y el "optional" no bajan de #A8A195.
   =================================================================== */
.hero-spread .label,.hero-spread .eyebrow,.ed-section--deep .label,.ed-section--deep .ed-eyebrow,.contact-section .label,.cat-related .cat-rel-k{color:var(--gold-text)}
.contact-section .form-subtitle{color:#CFC8BC}
.contact-section .form-label span{opacity:1!important;color:var(--muted)!important}
.contact-section .contact-detail-item .label{color:var(--gold-text)}
/* Causa raíz del contraste: `.day` (cuerpo claro) redefine --gold-text=#7A5518 y --muted=#6A645B para TODA la página, también en las bandas oscuras.
   Las bandas oscuras restauran los tokens de carbón. */
.hero-spread,.ed-section--deep,.contact-section,.cat-related,.cat-cover{--gold-text:#E0BD72;--muted:#A8A195;--line:#34302B}
.ed-fine--dk{color:#4a453e}
footer.foot .f2-base span,footer.foot .f2-base a{color:#A8A195}