/* Real 72 · página de opciones (22-10). Va sobre lujo.css. */
.op-cab {
  position: sticky; top: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px var(--gutter); background: var(--tinta); color: var(--marfil); font-size: .82rem;
}
.op-cab nav { display: flex; gap: 20px; }
.op-rotulo {
  display: flex; align-items: center; gap: 14px; padding: 18px var(--gutter);
  background: #E2D9CB; font: 500 .8rem/1.3 var(--sans); letter-spacing: .04em; color: var(--tinta);
  border-block: 1px solid var(--linea);
}
.op-rotulo span { padding: 6px 10px; background: var(--granate); color: var(--marfil); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.op-fin { padding: 80px var(--gutter); text-align: center; font: 400 1.8rem/1.3 var(--serif); background: var(--marfil-2); }

/* ---------- Agencia A: foto y cita ---------- */
.ag-a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100svh; }
.ag-a__foto { position: relative; overflow: hidden; }
.ag-a__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86); }
.ag-a__texto { display: grid; align-content: center; gap: 30px; padding: clamp(60px, 8vw, 120px) clamp(24px, 6vw, 110px); }
.ag-a blockquote p { font: 400 clamp(1.8rem, 1rem + 2.2vw, 3rem)/1.15 var(--serif); text-wrap: pretty; }
.ag-a__sub { max-width: 32em; color: var(--tinta-2); }
.ag-a__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.ag-a__cifras div { display: flex; flex-direction: column-reverse; gap: 10px; padding: 20px 16px 0 0; }
.ag-a__cifras dd { font: 400 clamp(2rem, 1.4rem + 1.6vw, 3.2rem)/1 var(--serif); }
.ag-a__cifras dt { font: 500 .64rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.ag-a small, .ag-b small, .ag-c small { margin-left: 4px; font-size: .45em; color: var(--oro); vertical-align: .6em; }
@media (max-width: 900px) {
  .ag-a { grid-template-columns: 1fr; }
  .ag-a__foto { min-height: 60vh; }
  .ag-a__cifras { grid-template-columns: 1fr 1fr; row-gap: 20px; }
}

/* ---------- Agencia B: frase con fotos dentro ---------- */
.ag-b { display: grid; justify-items: center; gap: clamp(40px, 5vw, 70px); padding: clamp(100px, 13vw, 190px) var(--gutter); text-align: center; }
.ag-b__frase { max-width: 17em; font: 400 clamp(2.2rem, 1rem + 4.4vw, 5.6rem)/1.08 var(--serif); letter-spacing: -.015em; }
.ag-b__img {
  display: inline-block; width: 1.9em; height: .82em; margin: 0 .08em; vertical-align: -.06em; border-radius: 999px; overflow: hidden;
}
.ag-b__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ag-b__img:hover img { transform: scale(1.15); }
.ag-b__cifras { display: flex; gap: clamp(30px, 6vw, 100px); }
.ag-b__cifras div { display: grid; gap: 8px; }
.ag-b__cifras dd { font: 400 clamp(2.4rem, 1.6rem + 2vw, 3.6rem)/1 var(--serif); color: var(--granate); }
.ag-b__cifras dt { font: 500 .66rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
@media (max-width: 600px) { .ag-b__cifras { flex-direction: column; gap: 24px; } }

/* ---------- Agencia C: cifras grandes sobre la costa ---------- */
.ag-c { position: relative; min-height: 100svh; display: grid; align-items: center; color: var(--marfil); overflow: hidden; background: var(--noche); }
.ag-c__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.7) blur(1px); transform: scale(1.04); }
.ag-c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 17, 15, .6), rgba(21, 17, 15, .2) 40%, rgba(21, 17, 15, .85)); }
.ag-c__in { position: relative; z-index: 1; display: grid; gap: clamp(40px, 6vw, 80px); padding-block: 120px; }
.ag-c .etiqueta { color: rgba(244, 239, 231, .7); }
.ag-c .etiqueta--num span:first-child { color: var(--oro); }
.ag-c__cita { max-width: 30em; font: 400 clamp(1.4rem, 1rem + 1.2vw, 2.1rem)/1.3 var(--serif); color: rgba(244, 239, 231, .9); }
.ag-c__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(244, 239, 231, .25); }
.ag-c__cifras div { display: flex; flex-direction: column-reverse; gap: 12px; padding: 26px 18px 0 0; }
.ag-c__cifras dd { font: 400 clamp(3.4rem, 1.6rem + 5vw, 8rem)/.9 var(--serif); }
.ag-c__cifras dt { font: 500 .68rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 239, 231, .7); }
@media (max-width: 900px) { .ag-c__cifras { grid-template-columns: 1fr 1fr; row-gap: 28px; } }

/* ---------- Zonas A: foto grande que cambia ---------- */
.zn-a { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 110px); align-items: center; padding-block: clamp(90px, 11vw, 160px); }
.zn-a__foto { position: relative; aspect-ratio: 4 / 5; max-height: 80vh; overflow: hidden; background: var(--marfil-2); }
.zn-a__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); filter: saturate(.86); transition: opacity 1.4s var(--ease), transform 2.4s var(--ease); }
.zn-a__foto img.ve { opacity: 1; transform: scale(1); }
.zn-a__foto figcaption { position: absolute; left: 20px; bottom: 18px; z-index: 1; color: var(--marfil); font: 500 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.zn-a__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(21, 17, 15, .5)); }
.zn-a__lado { display: grid; gap: 28px; }
.zn-a__lista { border-top: 1px solid var(--linea); }
.zn-a__lista a {
  display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linea);
  font: 400 clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem)/1.1 var(--serif); color: rgba(28, 23, 20, .38); transition: color .6s var(--ease), padding .8s var(--ease);
}
.zn-a__lista a.activa { color: var(--tinta); padding-left: 14px; }
.zn-a__lista small { font: 400 .8rem/1 var(--sans); letter-spacing: .06em; color: var(--tinta-2); }
@media (max-width: 900px) { .zn-a { grid-template-columns: 1fr; } .zn-a__foto { aspect-ratio: 4 / 3; } }

/* ---------- Zonas B: tarjetas ---------- */
.zn-b { padding-block: clamp(90px, 11vw, 160px); }
.zn-b__cabeza { display: grid; gap: 26px; margin-bottom: clamp(36px, 5vw, 64px); }
.zn-b__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 24vw, 330px); gap: clamp(10px, 1.4vw, 20px); }
.zn-b__t { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: var(--marfil); }
.zn-b__t--grande { grid-column: span 2; grid-row: span 2; }
.zn-b__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86); transition: transform 1.8s var(--ease); }
.zn-b__t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(21, 17, 15, .7)); }
.zn-b__t:hover img { transform: scale(1.06); }
.zn-b__t span, .zn-b__t small { position: relative; z-index: 1; }
.zn-b__t span { font: 400 clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem)/1 var(--serif); }
.zn-b__t--grande span { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.4rem); }
.zn-b__t small { margin-top: 8px; font: 500 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
@media (max-width: 900px) { .zn-b__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } }

/* ---------- Zonas C: paneles que se abren ---------- */
.zn-c { padding-block: clamp(90px, 11vw, 160px); background: var(--noche); color: var(--marfil); }
.zn-c .etiqueta { color: rgba(244, 239, 231, .6); }
.zn-c .etiqueta--num span:first-child { color: var(--oro-suave); }
.zn-c .titulo-2 em { color: var(--oro-suave); }
.zn-c__cabeza { display: grid; gap: 26px; margin-bottom: clamp(36px, 5vw, 64px); }
.zn-c__fila { display: flex; gap: 10px; height: min(70vh, 640px); }
.zn-c__p {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 20px; transition: flex-grow 1.4s var(--ease);
}
.zn-c__p.abierto { flex-grow: 5; }
.zn-c__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.6); transition: filter 1.4s var(--ease), transform 2s var(--ease); transform: scale(1.1); }
.zn-c__p.abierto img { filter: saturate(.9) brightness(.85); transform: scale(1); }
.zn-c__p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(21, 17, 15, .75)); }
.zn-c__p > :not(img) { position: relative; z-index: 1; white-space: nowrap; }
.zn-c__n { position: absolute !important; top: 22px; left: 20px; font: 500 .68rem/1 var(--sans); letter-spacing: .14em; color: var(--oro-suave); }
.zn-c__nombre { font: 400 clamp(1.4rem, 1rem + 1.6vw, 3.4rem)/1 var(--serif); }
.zn-c__p:not(.abierto) .zn-c__nombre { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.5rem; }
.zn-c__p small { margin-top: 10px; font: 500 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .8s var(--ease); }
.zn-c__p.abierto small { opacity: .85; transition-delay: .5s; }
@media (max-width: 700px) {
  .zn-c__fila { flex-direction: column; height: 760px; }
  .zn-c__p:not(.abierto) .zn-c__nombre { writing-mode: horizontal-tb; transform: none; }
}