/* Paleta tomada del sitio actual de OHRE: negro, grafito y blanco. El neutro
     no es un gris puro sino uno levemente cálido, para que el blanco no se
     sienta clínico junto a la fotografía de interiores. */
  :root {
    --tinta:      #0A0A0A;
    --grafito:    #2B2B2B;
    --apagado:    #6E6B67;
    --linea:      #DEDBD6;
    --superficie: #FFFFFF;
    --fondo:      #F4F3F1;
    --whatsapp:   #25D366;
    --cta-fondo:  #0A0A0A;
    --cta-texto:  #FFFFFF;
    --sombra: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06);

    --display: "Oswald", "Futura", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
    --cuerpo: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--cuerpo);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  .env { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

  .barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linea);
  }
  .marca {
    display: inline-flex; align-items: center;
    margin: 0; line-height: 0;
  }
  .marca img {
    height: 46px; width: auto; display: block;
  }
  .volver {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--apagado); text-decoration: none; white-space: nowrap;
  }
  .volver:hover { color: var(--tinta); }

  .galeria { margin: 28px 0 0; }
  .marco {
    position: relative; aspect-ratio: 3 / 2; overflow: hidden;
    background: var(--superficie); border-radius: 2px;
  }
  .marco img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
  .etiqueta {
    position: absolute; top: 16px; left: 16px;
    background: var(--cta-fondo); color: var(--cta-texto);
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    padding: 7px 14px;
  }
  .contador {
    position: absolute; bottom: 16px; right: 16px;
    background: rgba(10,10,10,.72); color: #FFFFFF;
    font-size: 11px; letter-spacing: .1em; padding: 6px 12px;
    font-variant-numeric: tabular-nums;
  }
  .flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; cursor: pointer;
    background: rgba(255,255,255,.92); color: #0A0A0A;
    font-size: 20px; line-height: 1; display: grid; place-items: center;
  }
  .flecha:hover { background: #FFFFFF; }
  .flecha.izq { left: 12px; }
  .flecha.der { right: 12px; }

  .tiras {
    display: flex; gap: 8px; margin-top: 8px;
    overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
  }
  .tiras button {
    flex: 0 0 108px; height: 72px; padding: 0; border: 0; cursor: pointer;
    background: none; opacity: .5; transition: opacity .18s;
  }
  .tiras button[aria-current="true"] { opacity: 1; outline: 2px solid var(--tinta); outline-offset: -2px; }
  .tiras button:hover { opacity: 1; }
  .tiras img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .cabecera { margin: 40px 0 0; }
  .tipo {
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--apagado); margin: 0 0 10px;
  }
  h1 {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08;
    letter-spacing: .04em; text-transform: uppercase;
    margin: 0; text-wrap: balance;
  }
  .zona { color: var(--grafito); margin: 12px 0 0; font-size: 17px; }

  .datos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px; margin: 32px 0 0;
    background: var(--linea); border: 1px solid var(--linea);
  }
  .dato { background: var(--superficie); padding: 20px 18px; margin: 0; }
  .dato dt {
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--apagado); margin: 0 0 6px;
  }
  .dato dd {
    margin: 0; font-family: var(--display); font-weight: 300;
    font-size: 24px; line-height: 1; letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
  }
  .dato dd small { font-size: 13px; color: var(--apagado); letter-spacing: .04em; }

  .cuerpo {
    display: grid; grid-template-columns: minmax(0,1fr) 348px;
    gap: 56px; margin: 56px 0 0; align-items: start;
  }
  h2 {
    font-family: var(--display); font-weight: 300;
    font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
    margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--linea);
  }
  .bloque + .bloque { margin-top: 44px; }
  .desc-intro { font-size: 17px; color: var(--grafito); margin: 0 0 28px; max-width: 62ch; }

  .nivel + .nivel { margin-top: 26px; }
  .nivel h3 {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--apagado); margin: 0 0 10px; font-weight: 600;
  }
  .nivel ul { margin: 0; padding: 0; list-style: none; }
  .nivel li {
    position: relative; padding-left: 20px; margin: 0 0 5px;
    color: var(--grafito); max-width: 62ch;
  }
  .nivel li::before {
    content: ""; position: absolute; left: 0; top: .72em;
    width: 7px; height: 1px; background: var(--apagado);
  }

  .fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px 24px; }
  .ficha { display: flex; gap: 10px; align-items: baseline; color: var(--grafito); }
  .ficha svg { flex: 0 0 auto; width: 13px; height: 13px; }

  .medidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; }
  .medida { border-top: 1px solid var(--linea); padding-top: 10px; }
  .medida span { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
  .medida strong { font-family: var(--display); font-weight: 300; font-size: 19px; letter-spacing: .02em; }

  .panel { position: sticky; top: 20px; }
  .tarjeta {
    background: var(--superficie); border: 1px solid var(--linea);
    padding: 26px 24px; box-shadow: var(--sombra); border-radius: 2px;
  }
  .precio {
    font-family: var(--display); font-weight: 300;
    font-size: 34px; line-height: 1.05; letter-spacing: .01em;
    margin: 0; font-variant-numeric: tabular-nums;
  }
  .precio-nota { font-size: 12px; color: var(--apagado); margin: 6px 0 0; letter-spacing: .04em; }
  .ref {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 20px 0; padding: 12px 0;
    border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
    font-size: 12px; color: var(--apagado);
  }
  .ref code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px; color: var(--tinta); letter-spacing: .06em;
  }
  .cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 17px 20px; border: 0; cursor: pointer;
    background: var(--cta-fondo); color: var(--cta-texto);
    font-family: var(--display); font-size: 13px; font-weight: 400;
    letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
    transition: opacity .18s;
  }
  .cta:hover { opacity: .86; }
  .cta svg { width: 19px; height: 19px; fill: var(--whatsapp); }
  .cta-nota { font-size: 12px; color: var(--apagado); text-align: center; margin: 12px 0 0; }

  .asesor {
    display: flex; gap: 12px; align-items: center;
    margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--linea);
  }
  .avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    background: var(--fondo); border: 1px solid var(--linea);
    display: grid; place-items: center;
    font-family: var(--display); font-size: 14px; letter-spacing: .06em; color: var(--apagado);
  }
  .asesor div { min-width: 0; }
  .asesor strong { display: block; font-size: 14px; font-weight: 600; }
  .asesor span { font-size: 12px; color: var(--apagado); }

  .cta-movil {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--linea);
    gap: 14px; align-items: center;
  }
  .cta-movil .precio { font-size: 20px; }
  .cta-movil .cta { width: auto; flex: 1; padding: 14px 18px; }

  footer {
    margin: 72px 0 0; padding: 28px 0 48px;
    border-top: 1px solid var(--linea);
    font-size: 12px; color: var(--apagado);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  }

  dialog.visor {
    width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
    padding: 0; border: 0; background: rgba(10,10,10,.96);
  }
  dialog.visor::backdrop { background: rgba(10,10,10,.9); }
  .visor-caja { width: 100%; height: 100%; display: grid; place-items: center; position: relative; }
  .visor-caja img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
  .visor .flecha { background: rgba(255,255,255,.14); color: #FFFFFF; }
  .visor .flecha:hover { background: rgba(255,255,255,.26); }
  .cerrar {
    position: absolute; top: 18px; right: 18px; width: 42px; height: 42px;
    border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 20px;
  }
  .visor .contador { bottom: 22px; left: 50%; right: auto; transform: translateX(-50%); }

  :focus-visible { outline: 2px solid var(--whatsapp); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  @media (max-width: 900px) {
    .cuerpo { grid-template-columns: 1fr; gap: 44px; }
    .panel { position: static; }
    .panel .tarjeta .cta { display: none; }
    .panel .tarjeta .cta-nota { display: none; }
    .cta-movil { display: flex; }
    body { padding-bottom: 86px; }
  }
  @media (max-width: 560px) {
    .env { padding: 0 16px; }
    .tiras button { flex-basis: 84px; height: 58px; }
  }