:root{
  /* El trozo NO hereda var(--navy) de la pagina: cada una declara la suya y no
     coinciden. Los trae puestos.

     OJO CON EL NAVY. No es el oficial de Gregoire (#112c4e): es el de la
     paleta anterior, porque la migracion aprobada el 28 de agosto de 2026 aun
     no se ha ejecutado y hoy el pie compartido sigue en #0c1d35. Cuando se
     migre, se cambia esta linea y el header va detras. */
  --oph-navy:#0c1d35;
  --oph-gold:#d7af74;
  --oph-cream:#faf7f2;
  --oph-acento:#9c7d43;  /* el oro OSCURECIDO: es el que se puede leer como
                            texto sobre crema. El claro solo vale de filete.
                            Se usaba en 7 sitios de esta hoja SIN estar definido,
                            asi que caia al color heredado y no se veia. */

  /* EL FONDO SOLIDO, en un solo sitio. Cambiar estas dos lineas es todo lo que
     hace falta para pasar el header de navy a crema: la tinta va con el. */
  --oph-fondo:var(--oph-navy);
  --oph-tinta:var(--oph-cream);
  --oph-tinta-suave:rgba(250,247,242,.62);
  --oph-realce:var(--oph-gold);

  --oph-alto:80px;                       /* la medida de Peninsula a 1280 */
  --oph-lado:30px;                       /* el margen lateral de Peninsula */
  /* El suelo son 336 y no 300 porque el rotulo mas largo de la
     navegacion --"Collection immobiliere", 227 px-- tiene que caber en
     UNA linea. Con 300 partia en dos. El texto no se encoge: se
     ensancha la columna. */
  --oph-col:clamp(336px,32vw,430px);     /* el tercio de Peninsula */
  --oph-pad:clamp(26px,2.4vw,40px);
  --oph-cuerpo:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media(max-width:900px){:root{--oph-alto:64px;--oph-lado:18px}}

/* ===== el conjunto ===== */
.oph{position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background-color .4s ease,box-shadow .4s ease}

/* Al ser fijo no ocupa sitio: las paginas sin foto necesitan el hueco. */
body:not([data-oph="foto"]){padding-top:var(--oph-alto)}

/* --- los dos estados ---
   Sobre foto nace transparente y solo se vuelve solido al hacer scroll. En el
   resto nace solido, y ahi si lleva sombra: es lo que lo despega del contenido
   claro. Lo de nacer solido va en CSS y no en el script a proposito: si
   dependiera del JavaScript, en el primer pintado la barra seria transparente
   sobre una pagina crema y las rayas del menu, que son crema, tendrian
   contraste 1,00. Es decir, boton invisible hasta que cargue -- y para siempre
   si el visitante no ejecuta JavaScript. */
.oph[data-oph-compacto],
body:not([data-oph="foto"]) .oph{
  background:var(--oph-fondo);
  box-shadow:0 1px 0 rgba(12,29,53,.06), 0 6px 24px rgba(12,29,53,.10)}

/* Sobre foto y sin scroll: transparente, con un velo apenas perceptible que
   da el tono justo para que se lea lo que hay encima. Sin el, la barra
   desaparece sobre un cielo claro. */
.oph::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(12,29,53,.34) 0%, rgba(12,29,53,.14) 62%, rgba(12,29,53,0) 100%);
  opacity:1;transition:opacity .4s ease}
.oph[data-oph-compacto]::before,
body:not([data-oph="foto"]) .oph::before{opacity:0}

/* ===== la fila unica =====
   Tres columnas con la del medio auto: asi el logo queda centrado de verdad,
   pese ellos lo que pesen los lados. Peninsula lo tiene exactamente asi. */
.oph-fila{height:var(--oph-alto);display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;
  padding-inline:var(--oph-lado);box-sizing:border-box}

/* --- las rayas, arriba a la izquierda --- */
.oph-menu{justify-self:start;background:none;border:0;padding:10px;margin-left:-10px;
  cursor:pointer;color:var(--oph-tinta);line-height:0;transition:color .3s ease}
.oph-menu:hover{color:var(--oph-realce)}
.oph-menu:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.oph-menu svg{display:block;width:24px;height:15px;
  stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
@media(max-width:900px){.oph-menu svg{width:20px;height:13px}}

/* --- el logotipo, centrado --- */
.oph-marca{justify-self:center;display:block;line-height:0}
.oph-marca img{display:block;width:170px;height:36px;object-fit:contain;
  transition:width .3s ease,height .3s ease}
@media(max-width:900px){.oph-marca img{width:126px;height:27px}}
@media(max-width:420px){.oph-marca img{width:104px;height:22px}}

/* --- idioma y reserva, a la derecha --- */
.oph-dcha{justify-self:end;display:flex;align-items:center;gap:clamp(10px,1.6vw,26px)}

.oph-lang{position:relative}
.oph-lang-b{display:flex;align-items:center;gap:8px;height:40px;padding:0 4px;
  background:none;border:0;cursor:pointer;
  font-family:var(--oph-cuerpo);font-weight:300;font-size:.62rem;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--oph-tinta);
  transition:color .3s ease}
.oph-lang-b:hover{color:var(--oph-realce)}
.oph-lang-b:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.oph-globo{width:15px;height:15px;flex:0 0 auto;display:block}
.oph-globo circle,.oph-globo path,.oph-globo ellipse{
  fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.oph-flecha{width:8px;height:5px;flex:0 0 auto;stroke:currentColor;stroke-width:1.4;
  fill:none;transition:transform .3s ease}
.oph-lang-b[aria-expanded="true"] .oph-flecha{transform:rotate(180deg)}

/* La lista cuelga del boton. Sale del propio fondo del header para que se lea
   igual sobre foto que sobre pagina clara. */
.oph-lang-lista{position:absolute;top:calc(100% + 6px);right:0;z-index:2;
  margin:0;padding:8px 0;list-style:none;min-width:150px;
  background:var(--oph-fondo);border:1px solid rgba(215,175,116,.28);
  box-shadow:0 10px 30px rgba(12,29,53,.22);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s ease,visibility .28s,transform .28s ease}
.oph-lang[data-abierto] .oph-lang-lista{opacity:1;visibility:visible;transform:none}
.oph-lang-lista a{display:block;padding:9px 18px;text-decoration:none;
  font-family:var(--oph-cuerpo);font-weight:300;font-size:.62rem;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--oph-tinta-suave);
  border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease}
.oph-lang-lista a:hover{color:var(--oph-tinta);border-bottom-color:var(--oph-realce)}
.oph-lang-lista a:focus-visible{outline:1px solid currentColor;outline-offset:-4px}
/* El idioma en el que se esta va primero, en otro color y subrayado. */
.oph-lang-lista a[aria-current]{color:var(--oph-realce);border-bottom-color:var(--oph-realce);
  order:-1}
.oph-lang-lista{display:flex;flex-direction:column}
.oph-lang-lista li{display:contents}

/* --- Reserve. Filete y no macizo: en crema, un boton relleno del mismo crema
       de las paginas no se lee como boton, y en navy le gana al logotipo. --- */
.oph-reserva{flex:0 0 auto;
  font-family:var(--oph-cuerpo);font-weight:300;font-size:.62rem;
  letter-spacing:2.2px;text-transform:uppercase;
  color:var(--oph-tinta);background:transparent;
  border:1px solid var(--oph-realce);
  height:40px;display:inline-flex;align-items:center;padding:0 20px;
  text-decoration:none;white-space:nowrap;
  transition:background-color .3s ease,color .3s ease}
.oph-reserva:hover{background:var(--oph-realce);color:var(--oph-fondo)}
.oph-reserva:focus-visible{outline:1px solid var(--oph-tinta);outline-offset:3px}
@media(max-width:900px){
  .oph-reserva{font-size:.55rem;padding:0 14px;height:34px;letter-spacing:1.6px}
  .oph-lang-b{font-size:.55rem;letter-spacing:1.6px;height:34px}
}
@media(max-width:560px){.oph-lang-etq{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%)}}

/* ===== el menu =====
   Un panel, no una pagina. Ocupa un tercio y la fotografia se sigue viendo al
   lado: en cuanto tapa el viewport entero deja de leerse como menu.
   Al abrir una seccion con hijos el panel CRECE una columna a la derecha, como
   Peninsula. En movil no crece: la columna entra encima y se vuelve con Atras. */
.oph-velo{position:fixed;inset:0;z-index:60;background:rgba(12,29,53,.5);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.oph-velo[data-abierto]{opacity:1;visibility:visible}

.oph-panel{position:fixed;top:0;bottom:0;z-index:61;
  background:var(--oph-cream);
  display:flex;flex-direction:column;box-sizing:border-box;
  box-shadow:0 0 60px rgba(12,29,53,.28)}
.oph-panel-menu{left:0;width:var(--oph-col);transform:translateX(-100%);
  transition:transform .46s cubic-bezier(.22,1,.36,1),
             width .46s cubic-bezier(.22,1,.36,1)}
.oph-panel[data-abierto]{transform:translateX(0)}
.oph-panel-menu[data-sub]{width:calc(var(--oph-col) * 2)}
/* Sin esto, .oph-panel{display:flex} le gana al atributo hidden del navegador:
   el panel se queda fuera de pantalla pero sus enlaces siguen cogiendo el
   tabulador, y quien navegue con teclado se mete dentro sin verlo. */
.oph-panel[hidden]{display:none}

/* Marca a la izquierda y cierre a la derecha DEL PANEL, como Peninsula. No
   sobre la posicion de las rayas: con el panel a un tercio, la X ahi caeria
   en mitad de la nada. */
.oph-panel-alto{flex:none;display:flex;align-items:center;
  justify-content:space-between;gap:16px;
  height:var(--oph-alto);padding-inline:var(--oph-pad);box-sizing:border-box}
.oph-panel-tit{margin:0;font-family:var(--oph-cuerpo);font-weight:300;
  font-size:.62rem;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--oph-acento);white-space:nowrap}
.oph-cerrar{background:none;border:0;padding:9px;margin-right:-9px;cursor:pointer;
  color:var(--oph-navy);line-height:0;transition:opacity .3s ease}
.oph-cerrar:hover{opacity:.5}
.oph-cerrar:focus-visible{outline:1px solid var(--oph-navy);outline-offset:4px}
.oph-cerrar svg{width:15px;height:15px;display:block;
  stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}

.oph-cols{flex:1;min-height:0;display:grid;
  grid-template-columns:var(--oph-col) var(--oph-col)}
.oph-col{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:8px var(--oph-pad) 26px;box-sizing:border-box}
.oph-col-1{display:flex;flex-direction:column}
.oph-col-2{border-left:1px solid rgba(12,29,53,.12)}

/* Cada seccion: nombre en Cormorant. Sin recuadro y sin fondo que cambie. */
.oph-lista{list-style:none;margin:0;padding:0}
.oph-seccion{display:flex;align-items:center;justify-content:space-between;
  gap:14px;width:100%;min-height:58px;padding:0;
  background:none;border:0;text-align:left;cursor:pointer;
  text-decoration:none;color:var(--oph-navy);
  font-family:var(--oph-display);font-weight:300;font-size:1.5rem;
  line-height:1.16;letter-spacing:.2px;transition:color .3s ease}
.oph-seccion:hover{color:var(--oph-acento)}
.oph-seccion:focus-visible{outline:1px solid var(--oph-navy);outline-offset:3px}
.oph-seccion svg{flex:none;width:8px;height:12px;fill:none;stroke:currentColor;
  stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.72;
  transition:opacity .3s ease,transform .3s ease}
.oph-seccion:hover svg{opacity:1;transform:translateX(2px)}
/* La seccion abierta se queda marcada mientras miras su columna. */
.oph-seccion[aria-expanded="true"]{color:var(--oph-acento)}
.oph-seccion[aria-expanded="true"] svg{opacity:1}
/* Donde estas ahora: filete dorado a la izquierda. El oro como filete si va
   sobre claro; como texto no. */
.oph-seccion[aria-current]{box-shadow:inset 3px 0 0 var(--oph-gold);padding-left:16px}

/* La columna de hijos. Solo se ve la de la seccion abierta. */
.oph-sub{list-style:none;margin:0;padding:0;display:none}
.oph-sub[data-visible]{display:block}
.oph-sub a{display:block;padding:10px 0;text-decoration:none;
  font-family:var(--oph-cuerpo);font-weight:300;font-size:.88rem;
  letter-spacing:.3px;color:rgba(12,29,53,.78);
  border-bottom:1px solid transparent;width:fit-content;
  transition:color .3s ease,border-color .3s ease}
.oph-sub a:hover{color:var(--oph-navy);border-bottom-color:var(--oph-gold)}
.oph-sub a:focus-visible{outline:1px solid var(--oph-navy);outline-offset:2px}
.oph-sub a[aria-current]{color:var(--oph-navy);border-bottom-color:var(--oph-gold)}
/* La primera de cada columna es la seccion entera, como el All Regions de
   Peninsula: da salida a la pagina indice sin robarle sitio a las demas. */
.oph-sub .todo{font-size:.64rem;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--oph-acento);padding:16px 0 14px;margin-bottom:6px;
  border-bottom:1px solid rgba(12,29,53,.12);width:auto}
.oph-sub .todo:hover{color:var(--oph-navy);border-bottom-color:rgba(12,29,53,.12)}

/* Lo que todavia no existe: se queda en la arquitectura, en gris apagado y sin
   etiqueta. Esta para saber que viene y para ir rellenandolo, no para leerse.
   Y no se puede pulsar: un enlace a una pagina que no esta es un 404. */
.oph-pend{display:block;padding:10px 0;cursor:default;
  font-family:var(--oph-cuerpo);font-weight:300;font-size:.88rem;
  letter-spacing:.3px;color:rgba(12,29,53,.34)}

/* Atras: solo en movil, donde la columna entra encima en vez de al lado. */
.oph-atras{display:none;align-items:center;gap:10px;background:none;border:0;
  padding:14px 0 4px;margin:0;cursor:pointer;color:var(--oph-acento);
  font-family:var(--oph-cuerpo);font-weight:400;font-size:.62rem;
  letter-spacing:2.4px;text-transform:uppercase}
.oph-atras svg{width:7px;height:11px;fill:none;stroke:currentColor;
  stroke-width:1.2;vector-effect:non-scaling-stroke;transform:rotate(180deg)}
.oph-atras:focus-visible{outline:1px solid var(--oph-navy);outline-offset:3px}

/* El pie vive DENTRO de la primera columna, como en Peninsula: su filete no
   cruza hasta la segunda. */
.oph-pie{margin-top:auto;padding-top:26px;
  border-top:1px solid rgba(12,29,53,.16)}
.oph-pie-a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;text-decoration:none;
  font-family:var(--oph-cuerpo);font-weight:400;font-size:.64rem;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--oph-navy);
  transition:color .3s ease}
.oph-pie-a:hover{color:var(--oph-acento)}
.oph-pie-a svg{width:7px;height:11px;fill:none;stroke:currentColor;
  stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.42}
.oph-pie-min{display:flex;gap:22px;padding:8px 0 14px}
.oph-pie-min a{font-family:var(--oph-cuerpo);font-weight:300;font-size:.58rem;
  letter-spacing:2px;text-transform:uppercase;text-decoration:none;
  color:rgba(12,29,53,.52);transition:color .3s ease}
.oph-pie-min a:hover{color:var(--oph-navy)}

/* Lo que cuelga de una PAGINA y no de la seccion. La ficha tecnica y los
   intermediarios son de los lotes: si van al mismo nivel que Studios o Villas
   parecen temas de Own, y no lo son. Los ata la sangria, el cuerpo mas
   pequeno y el aire: ni filetes ni cajas. Un filete vertical ahi era un arbol
   de explorador de archivos, que no es el lenguaje de la casa.
   Cuando entre cada producto traera los suyos. */
/* Rotulo de grupo dentro de un submenu. No es un enlace y no debe parecerlo:
   va en dorado apagado, en versalitas y sin filete, que es lo que lo separa
   de los .todo, que si llevan a alguna parte. */
.oph-grupo{margin:22px 0 2px;font-family:var(--oph-cuerpo);font-weight:400;
  font-size:.58rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--oph-gold)}
.oph-sub > li:first-child + li .oph-grupo{margin-top:16px}
.oph-grupo-l{list-style:none;margin:0;padding:0}

/* Los idiomas, al pie del panel: tres palabras en una linea, separadas por el
   punto medio que ya usa la casa -PEDASI · PENINSULA DE AZUERO · PANAMA-. Sin
   desplegable y sin filetes: eran tres rayas horizontales apiladas y lo que
   hacian era enredar la vista. El que esta puesto va en dorado. */
.oph-idiomas{display:flex;align-items:center;gap:10px;padding:12px 0 4px}
.oph-idiomas .oph-globo{flex:none;width:13px;height:13px;fill:none;
  stroke:rgba(12,29,53,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.oph-idiomas ul{list-style:none;margin:0;padding:0;display:flex;
  flex-wrap:wrap;align-items:baseline}
.oph-idiomas a{font-family:var(--oph-cuerpo);font-weight:300;font-size:.6rem;
  letter-spacing:2px;text-transform:uppercase;text-decoration:none;
  color:rgba(12,29,53,.5);transition:color .3s ease}
.oph-idiomas a:hover{color:var(--oph-navy)}
.oph-idiomas a:focus-visible{outline:1px solid var(--oph-navy);outline-offset:3px}
.oph-idiomas a[aria-current]{color:var(--oph-acento)}
.oph-idiomas li + li::before{content:"\00b7";margin:0 9px;
  color:rgba(12,29,53,.3);font-size:.7rem}


@media(max-width:860px){
  /* Aqui no se ensancha: la columna de hijos entra encima y se vuelve con
     Atras. El corte sube de 760 a 860 por la tableta: dos columnas de 336
     son 672 de 768 y no queda aire. Con el panel simple el rotulo tiene
     430 px en vez de 336. */
  .oph-panel-menu,.oph-panel-menu[data-sub]{width:min(430px,90vw)}
  /* OJO: los porcentajes de grid-template-columns se miden contra el
     CONTENEDOR, que aqui ya mide 200%. Con 100% cada columna salia del doble
     de ancho que el panel y el texto se iba fuera. 50% de 200% = un panel. */
  .oph-cols{grid-template-columns:repeat(2,50%);width:200%;
    transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .oph-panel-menu[data-sub] .oph-cols{transform:translateX(-50%)}
  .oph-col-2{border-left:0}
  .oph-atras{display:flex}
  .oph-seccion{min-height:54px;font-size:1.38rem}
}

@media(prefers-reduced-motion:reduce){
  .oph,.oph::before,.oph-panel,.oph-velo,.oph-cols,.oph-marca img,
  .oph-lang-lista,.oph-seccion svg{transition:none}
}