/* Mezclilla Casa Ámbar — ver DESIGN.md. Tokens de color y fuente llegan desde content/marca.json. */
*,*::before,*::after { box-sizing:border-box; }
:root { --container:1200px; --gutter:20px; --ease-out:cubic-bezier(.23,1,.32,1); --section:96px; }
html { scroll-padding-top:80px; scroll-behavior:smooth; }
body { margin:0; color:var(--indigo); background:var(--algodon); font-family:var(--font),system-ui,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; } a { color:inherit; } button { font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,p,figure,fieldset,blockquote,dl,dd { margin:0; } ul { margin:0; padding:0; list-style:none; }
::selection { background:var(--ambar); color:var(--indigo); }
:focus-visible { outline:2px solid var(--indigo); outline-offset:4px; }
.container { width:min(calc(100% - 2 * var(--gutter)),var(--container)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:1000; left:16px; top:-80px; padding:12px 16px; background:var(--indigo); color:var(--algodon); } .skip-link:focus { top:12px; }
.section-title { font-size:44px; font-weight:700; font-stretch:75%; line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }

/* Encabezado */
.site-header { position:sticky; top:0; z-index:100; background:var(--algodon); border-bottom:1px solid var(--deslavado); }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; min-height:48px; } .brand img { width:112px; }
.primary-nav { display:flex; align-items:center; gap:28px; }
.nav-link { min-height:44px; display:inline-flex; align-items:center; font-size:15px; font-weight:500; text-decoration:none; }
.menu-toggle { display:none; }

/* Botones */
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 28px; border:1px solid var(--indigo); border-radius:2px; font-size:15px; font-weight:600; line-height:1.3; text-decoration:none; transition:background-color 160ms ease,color 160ms ease,transform 140ms var(--ease-out); }
.button:active { transform:scale(.97); }
.button-primary { background:var(--indigo); color:var(--algodon); }
.button-outline { background:transparent; color:var(--indigo); }
.button-ambar { background:var(--ambar); border-color:var(--ambar); color:var(--indigo); }
.text-link { min-height:44px; display:inline-flex; align-items:center; font-size:15px; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:var(--indigo-soft); }

/* Hero */
.hero { padding:56px 0 var(--section); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 512px; grid-template-areas:"title photo" "copy photo"; column-gap:64px; align-items:end; }
.hero-title { grid-area:title; font-size:96px; font-weight:800; font-stretch:62%; line-height:.92; letter-spacing:-.02em; }
.hero-title span { display:block; }
.hero-photo { grid-area:photo; }
/* El fondo blanco del logo y del estudio se funde con el algodón. */
.brand img, .footer-inner img, .hero-photo img { mix-blend-mode:multiply; }
.hero-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.hero-copy { grid-area:copy; align-self:start; padding-top:32px; border-top:1px solid var(--deslavado); margin-top:40px; max-width:560px; }
.hero-lede { font-size:20px; line-height:1.5; max-width:30ch; margin-bottom:32px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }

/* Categorías */
.categories { padding:0 0 var(--section); }
.categories .section-title { margin-bottom:28px; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.category { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 12px; text-decoration:none; }
.category img { grid-column:1/-1; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 22%; margin-bottom:12px; }
.category-name { font-size:24px; font-weight:700; font-stretch:75%; letter-spacing:-.01em; }
.category-count { font-size:14px; color:var(--indigo-soft); }

/* Catálogo: crece agregando prendas en content/catalogo.json */
.catalog { padding:var(--section) 0; background:#fff; border-block:1px solid var(--deslavado); }
/* Cabecera como barra editorial: los filtros son pestañas que descansan sobre la línea. */
.catalog-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px 32px; flex-wrap:wrap; margin-bottom:48px; border-bottom:1px solid var(--deslavado); }
.catalog-head .section-title { padding-bottom:20px; }
.filters { display:flex; gap:32px; margin-bottom:-1px; }
.filters button { min-height:48px; padding:12px 0; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--indigo-soft); font-size:15px; font-weight:500; transition:color 160ms ease,border-color 160ms ease; }
.filters button[aria-pressed='true'] { color:var(--indigo); border-bottom-color:var(--indigo); font-weight:600; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:64px 24px; }
.product { display:flex; flex-direction:column; }
.product[hidden] { display:none; }
.product img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; background:var(--deslavado); }
.product-info { display:flex; flex-direction:column; gap:2px; padding:16px 0 4px; }
.product-info h3 { font-size:22px; font-weight:700; font-stretch:75%; line-height:1.15; letter-spacing:-.01em; }
.product-info p { font-size:14px; color:var(--indigo-soft); }
.product-info .product-price, .garment-copy .product-price { font-size:16px; font-weight:700; color:var(--indigo); font-variant-numeric:tabular-nums; }
.product-consult { align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; font-size:15px; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:var(--deslavado); transition:text-decoration-color 160ms ease; }

/* Pieza destacada: una prenda, tres colores */
.garment { padding:var(--section) 0; }
.garment-grid { display:grid; grid-template-columns:472px minmax(0,1fr); gap:72px; align-items:center; }
.garment-photo { position:relative; aspect-ratio:4/5; background:#d9d2c8; }
.garment-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; filter:blur(2px); transition:opacity 180ms var(--ease-out),filter 180ms var(--ease-out); }
.garment-photo img.is-active { opacity:1; filter:none; }
.garment-copy { max-width:460px; }
.garment-copy h2, .consult h2 { font-size:44px; font-weight:700; font-stretch:75%; line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }
.garment-copy p { margin-top:16px; color:var(--indigo-soft); }
.swatches { margin:32px 0 36px; padding:0; border:0; display:flex; gap:12px; flex-wrap:wrap; }
.swatches legend { width:100%; margin-bottom:12px; padding:0; font-size:15px; font-weight:600; }
.swatch-name { font-weight:400; color:var(--indigo-soft); }
.swatch { position:relative; width:44px; height:44px; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px rgb(31 42 68 / .18); cursor:pointer; }
.swatch input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.swatch:has(input:checked) { outline:2px solid var(--indigo); outline-offset:3px; }
.swatch:has(input:focus-visible) { outline:2px solid var(--indigo); outline-offset:6px; }

/* Nosotros */
.about { padding:var(--section) 0; border-top:1px solid var(--deslavado); }
.about-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:72px; align-items:center; }
.about-title { font-size:96px; font-weight:800; font-stretch:62%; line-height:.92; letter-spacing:-.02em; margin-bottom:28px; }
.about-copy > p { max-width:46ch; color:var(--indigo-soft); }
.about-quote { margin-top:36px; padding-top:24px; border-top:1px solid var(--deslavado); }
.about-quote p { font-size:26px; font-weight:600; font-stretch:75%; line-height:1.2; }
.about-quote p::before { content:'«'; } .about-quote p::after { content:'»'; }
.about-photo img { width:100%; }

/* Ubicación y contacto */
.location { padding:var(--section) 0; background:#fff; border-top:1px solid var(--deslavado); }
.location .section-title { padding-bottom:20px; margin-bottom:40px; border-bottom:1px solid var(--deslavado); }
.location-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:72px; align-items:stretch; }
.stores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:40px; }
.store-city { font-size:36px; font-weight:800; font-stretch:62%; line-height:1; letter-spacing:-.01em; margin-bottom:8px; }
.stores p { color:var(--indigo-soft); }
.info-list > div { display:grid; grid-template-columns:112px 1fr; align-items:baseline; gap:16px; padding:18px 0; border-top:1px solid var(--deslavado); }
.info-list > div:last-child { border-bottom:1px solid var(--deslavado); }
.info-list dt { font-size:15px; font-weight:600; }
.info-list dd { color:var(--indigo); }
.pending { color:var(--indigo-soft); }
.social { display:flex; flex-direction:column; gap:4px; }
.social a { min-height:44px; display:inline-flex; align-items:baseline; gap:10px; margin-block:-10px; padding-block:10px; text-decoration:none; }
.social-name { font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--deslavado); transition:text-decoration-color 160ms ease; }
.social-user { font-size:15px; color:var(--indigo-soft); }
/* Superficie del mapa: fría como la mezclilla deslavada; el contenido descansa abajo. */
.map { position:relative; min-height:400px; display:flex; flex-direction:column; align-items:flex-start; padding:40px; background:var(--deslavado); overflow:hidden; }
.map-pin { flex:none; margin-bottom:auto; color:var(--indigo); }
.map-label { margin-top:40px; font-size:28px; font-weight:700; font-stretch:75%; line-height:1.1; letter-spacing:-.01em; max-width:16ch; }
.map-note { margin-top:8px; font-size:15px; color:var(--indigo-soft); max-width:36ch; }
.map-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:28px; }
.map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Consulta: la única banda índigo y el único uso fuerte de ámbar */
.consult { background:var(--indigo); color:var(--algodon); padding:88px 0; }
.consult :focus-visible { outline-color:var(--ambar); }
.consult-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:72px; align-items:end; }
.consult h2 { max-width:20ch; }
.consult-lede { margin-top:20px; color:var(--sobre-indigo); }
.consult-panel { padding-top:28px; border-top:1px solid rgb(185 195 211 / .35); }
.consult-choice { margin-bottom:20px; font-size:18px; transition:opacity 150ms var(--ease-out); }
.consult-choice.is-updating { opacity:0; }
.consult-label { display:block; margin-bottom:4px; font-size:14px; color:var(--sobre-indigo); }
.consult-panel .button { width:100%; max-width:360px; }
.demo-status { margin-top:16px; font-size:14px; color:var(--sobre-indigo); max-width:42ch; } .demo-status:empty { display:none; }

/* Pie */
.site-footer { padding:32px 0 40px; }
.footer-inner { display:flex; align-items:center; gap:32px; } .footer-inner img { width:88px; flex:none; }
.footer-inner p { font-size:14px; color:var(--indigo-soft); max-width:70ch; }
.footer-credit { margin-top:4px; }

/* Entrada única: la foto del hero parte visible y solo se destapa. */
@media (prefers-reduced-motion:no-preference) {
  .hero-photo img { animation:hero-reveal 560ms var(--ease-out); }
  @keyframes hero-reveal { from { clip-path:inset(10% 0 0 0); } to { clip-path:inset(0); } }
}
@media (hover:hover) and (pointer:fine) {
  .button-primary:hover { background:#2d3a5a; }
  .button-outline:hover { background:var(--indigo); color:var(--algodon); }
  .button-ambar:hover { background:var(--ambar-hover); }
  .nav-link:hover, .category:hover .category-name { text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
  .text-link:hover, .product-consult:hover, .social a:hover .social-name { text-decoration-color:var(--indigo); }
  .product:hover .product-consult { text-decoration-color:var(--indigo-soft); }
  .product .product-consult:hover { text-decoration-color:var(--indigo); }
  .filters button:hover:not([aria-pressed='true']) { color:var(--indigo); border-bottom-color:var(--deslavado); }
}

@media (max-width:1100px) {
  .hero-grid { grid-template-columns:minmax(0,1fr) 420px; column-gap:40px; }
  .hero-title, .about-title { font-size:80px; }
  .garment-grid { grid-template-columns:400px minmax(0,1fr); gap:48px; }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .about-grid, .location-grid { gap:48px; }
}

@media (max-width:920px) {
  :root { --section:72px; }
  .menu-toggle { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--indigo); border-radius:2px; background:transparent; font-size:15px; font-weight:600; }
  .primary-nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 16px; background:var(--algodon); border-bottom:1px solid var(--deslavado); }
  .primary-nav.is-open { display:flex; }
  .nav-link { padding:8px 0; font-size:17px; border-bottom:1px solid var(--deslavado); }
  .hero-grid { grid-template-columns:minmax(0,1fr) 340px; }
  .hero-title, .about-title { font-size:64px; }
  .garment-grid { grid-template-columns:340px minmax(0,1fr); gap:40px; }
  .section-title, .garment-copy h2, .consult h2 { font-size:36px; }
  .about-grid, .location-grid { grid-template-columns:1fr; }
  .about-photo { max-width:560px; }
  .map { min-height:340px; }
}

@media (max-width:760px) {
  :root { --section:56px; }
  html { scroll-padding-top:64px; }
  body { font-size:16px; }
  .header-inner { min-height:64px; } .brand img { width:96px; }
  .hero { padding-top:24px; }
  .hero-grid { grid-template-columns:1fr; grid-template-areas:"title" "photo" "copy"; }
  .hero-title { font-size:48px; line-height:1; }
  .hero-title span { display:inline; }
  .hero-photo { margin-top:-12px; }
  .hero-copy { margin-top:24px; padding-top:20px; }
  .hero-lede { font-size:18px; margin-bottom:24px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .button { width:100%; }
  .section-title, .garment-copy h2, .consult h2 { font-size:30px; }
  .categories .section-title { margin-bottom:20px; }
  .category-grid { gap:10px; }
  .category { grid-template-columns:1fr; }
  .category img { aspect-ratio:3/4; margin-bottom:8px; }
  .category-name { font-size:18px; }
  .category-count { font-size:13px; }
  .catalog-head { margin-bottom:28px; }
  .catalog-head .section-title { padding-bottom:4px; }
  .filters { width:100%; justify-content:space-between; gap:0; }
  .filters button { padding:12px 0; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 12px; }
  .product-info { padding-top:12px; }
  .product-info h3 { font-size:19px; }
  .product-info p { font-size:13px; }
  .garment-grid { grid-template-columns:1fr; gap:0; }
  .garment-copy { display:contents; }
  .garment-copy h2 { order:-2; }
  .garment-copy p { order:-1; margin:8px 0 20px; }
  .swatches { margin:20px 0 24px; }
  .garment-copy .button { width:100%; }
  .about-title { font-size:56px; margin-bottom:20px; }
  .about-quote p { font-size:22px; }
  .location .section-title { margin-bottom:28px; }
  .stores { gap:16px; margin-bottom:28px; }
  .store-city { font-size:30px; }
  .info-list > div { grid-template-columns:88px 1fr; gap:12px; padding:14px 0; }
  .social { gap:12px; }
  .social a { flex-direction:column; gap:0; }
  .map { min-height:300px; padding:24px; }
  .map-label { margin-top:28px; font-size:24px; }
  .map-actions { margin-top:20px; }
  .map-actions .button { width:100%; }
  .consult { padding:56px 0; }
  .consult-grid { grid-template-columns:1fr; gap:32px; }
  .consult-panel .button { max-width:none; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button, .button:active { transform:none; transition:background-color 160ms ease,color 160ms ease; }
  .garment-photo img { filter:none; transition:opacity 180ms linear; }
}