@font-face{font-family:"Jost";src:url("https://assets.pedasioceanproperties.com/brand/fonts/jost-latin.woff2") format("woff2");font-weight:200 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Jost";src:url("https://assets.pedasioceanproperties.com/brand/fonts/jost-latin-ext.woff2") format("woff2");font-weight:200 500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";src:url("https://assets.pedasioceanproperties.com/brand/fonts/cormorant-garamond-latin.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";src:url("https://assets.pedasioceanproperties.com/brand/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";src:url("https://assets.pedasioceanproperties.com/brand/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");font-weight:300 400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --navy:#0c1d35;
  --gold:#c9a96e;
  --gold-deep:#876c3a;
  --cream:#faf7f2;
  --paper:#ffffff;
  --ink:#16202e;
  --soft:#46535f;
  --rule:#ddd4c6;
  --hi:#f0e6d4;
  /* Los tres anchos de la landing, que ya estan aprobados. El marco de
     pagina es el tecnico; el texto y cada tabla toman su propia medida
     dentro de el, compartiendo todos el borde izquierdo. */
  --fp-lado: clamp(24px, 4vw, 64px); /* = --lp-lado */
  --fp-texto: 720px;                 /* = --lp-texto */
  --fp-datos: 1320px;                /* = --lp-tecnico */
  --fp-nav: 52px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Jost",-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* El marco de la pagina. Lo que va dentro NO hereda este ancho: cada
   bloque declara su medida y todos comparten el borde izquierdo. */
.shell{width:min(100% - var(--fp-lado)*2, var(--fp-datos));margin-inline:auto}

/* ---------- cabecera ---------- */
.masthead{background:var(--navy);color:var(--cream);padding:64px 0 56px}
.brand{display:flex;align-items:center;gap:24px;margin:0 0 52px;flex-wrap:wrap}
.brand .div{
  font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:400;line-height:2.1;
  padding-left:24px;border-left:1px solid rgba(201,169,110,.5)
}
@media (max-width:560px){
  .brand{flex-direction:column;align-items:flex-start;gap:18px}
  .brand .div{padding-left:0;border-left:0;line-height:1.4}
}
.logo{display:block;height:auto;width:184px;max-width:60%}
.logo-k{display:none}

.colophon{
  font-size:12px;line-height:1.7;color:#8496a8;margin-top:26px;
  letter-spacing:.02em
}
.masthead h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:clamp(38px,6.4vw,60px);line-height:1.06;
  margin:0 0 22px;text-wrap:balance;letter-spacing:-.005em
}
.masthead .sub{
  font-size:17px;color:#cfd8e2;font-weight:200;margin:0 0 40px;max-width:52ch
}
.meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px 34px;border-top:1px solid rgba(201,169,110,.34);padding-top:28px;margin:0
}
.meta div{display:flex;flex-direction:column;gap:7px}
.meta dt{
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);font-weight:400
}
.meta dd{margin:0;font-size:15px;color:var(--cream);font-weight:300}

/* ---------- cuerpo ---------- */
main{padding:0 0 20px}
section{padding:60px 0 4px;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.num{
  font-size:11px;letter-spacing:.2em;color:var(--gold-deep);
  font-weight:500;display:block;margin-bottom:16px
}
h2{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:clamp(28px,4.2vw,40px);line-height:1.14;
  margin:0 0 26px;text-wrap:balance;letter-spacing:-.005em;max-width:26ch
}
h3{
  font-size:12px;letter-spacing:.19em;text-transform:uppercase;
  font-weight:500;color:var(--gold-deep);margin:40px 0 16px
}
p{margin:0 0 20px;max-width:66ch}
/* Hereda el max-width:66ch de p, y en ch ESO CRECE con el cuerpo: a 25px
   daba 957px y 89 caracteres por linea, mas largos que los del parrafo
   normal. Un texto de apertura necesita MENOS caracteres, no mas. */
.lead{font-size:clamp(21px,2.6vw,25px);line-height:1.5;color:var(--ink);
  max-width:44ch}
a{color:var(--gold-deep);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
strong{font-weight:500}

/* ---------- tablas ---------- */
/* Una tabla de 2 columnas no debe medir lo mismo que una de 7. El limite
   lo pone el envoltorio segun lo que la tabla tiene que comparar. */
.tw{overflow-x:auto;margin:0 0 26px;-webkit-overflow-scrolling:touch;max-width:100%}
.tw-lotes {max-width:var(--fp-datos)} /* 7 columnas: la comparacion comercial */
.tw-fiscal{max-width:880px}           /* 5 columnas */
.tw-reglas{max-width:680px}           /* 2 columnas, valores en frase */
.tw-escala{max-width:440px}           /* 2 columnas, valor corto */
/* El ancho lo pone el CONTENIDO. Estirar la tabla hasta llenar su caja
   separa el rotulo de su dato sin que eso aporte nada: con porcentajes
   quedaban 212px de blanco entre "16A" y su superficie. Los .tw-* de
   arriba son un techo, no una medida. En movil, lo que no cabe rueda
   dentro de .tw, que ya lleva overflow-x. */
table{border-collapse:collapse;width:max-content;font-size:15px}
/* El rotulo de la tabla. Vive FUERA de <table>: dentro de <caption>
   estaba atado al ancho de la tabla y se partia en lineas cortadas por
   cualquier sitio, y como bloque contaba para el ancho maximo de la
   tabla y la ensanchaba. Es texto, asi que lleva medida de lectura. */
.tcap{
  max-width:64ch;margin:0 0 13px;
  font-size:14px;color:var(--soft);font-weight:300;line-height:1.55
}
/* Sin raya bajo cada fila: eso es una reticula y es lo que hace que una
   tabla parezca una hoja de calculo. Separa el aire, no la linea. */
/* La calle va a los DOS lados de cada columna, y desaparece en los bordes
   de la tabla. Antes el relleno iba solo a la derecha y .n lo anulaba:
   mientras la tabla se estiraba sobraba hueco y no se notaba, pero al
   tomar su ancho natural dos columnas de cifras quedaban tocandose y se
   leia "EXENTOBASE IMPONIBLEIMPUESTO ANUAL". */
th,td{
  text-align:left;padding:11px 15px;vertical-align:baseline
}
tr > :first-child{padding-left:0}
tr > :last-child{padding-right:0}
thead th{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:400;color:var(--soft);
  /* Lo unico que este filete separa son los rotulos de los datos, asi
     que es fino. En --ink pasaria a ser el trazo mas fuerte de la
     pagina ahora que no hay rayas de fila. */
  border-bottom:1px solid var(--rule)
}
.n{text-align:right;font-variant-numeric:tabular-nums}
th.n{text-align:right}
tbody th{font-weight:500;white-space:nowrap}
tr.total th,tr.total td{
  border-top:1px solid var(--ink);border-bottom:0;
  font-weight:500;padding-top:13px
}
.note{font-size:14px;color:var(--soft);max-width:74ch;margin:0 0 20px}
/* ---------- la tabla de los cuatro lotes ---------- */
/* Que "Finca n." se llevase la columna mas ancha se arreglo bajandola bajo
   el nombre del lote, no forzando el reparto: el algoritmo automatico del
   navegador ya reparte bien cuando el contenido de cada columna es el que
   le corresponde. */
/* El numero de finca es procedencia, no un dato que se compare: va bajo el
   nombre del lote, como el <small> de dl.pays, y deja de robar una columna. */
.tw-lotes thead th small{display:block;font-weight:400;color:var(--soft);
  margin-top:5px}
.tw-lotes tbody th{line-height:1.25}
.tw-lotes tbody th small{display:block;font-size:12px;font-weight:300;
  color:var(--soft);letter-spacing:.02em;margin-top:3px;line-height:1.3}
/* La cifra que decide va oscura; el dato de contexto, en gris. */
.tw-lotes td.precio{color:var(--ink);font-weight:400}
tr.applies th,tr.applies td{background:var(--hi)}

/* ---------- pasos y costes ---------- */
ol.steps{list-style:none;counter-reset:s;margin:0 0 26px;padding:0;
  display:flex;flex-direction:column;gap:26px}
ol.steps li{counter-increment:s;position:relative;padding-left:52px;max-width:64ch}
ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;
  width:32px;height:32px;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;font-size:14px;color:var(--gold-deep)
}
ol.steps h4{margin:0 0 6px;font-size:17px;font-weight:500}
ol.steps p{margin:0;font-size:16px;color:var(--soft)}

dl.pays{margin:0 0 26px;max-width:880px}
dl.pays>div{
  display:grid;grid-template-columns:1fr auto;gap:8px 24px;
  padding:15px 0;border-bottom:1px solid var(--rule);align-items:baseline
}
dl.pays>div:last-child{border-bottom:0}
dl.pays dt{font-weight:400}
dl.pays dt small{display:block;font-size:14px;color:var(--soft);font-weight:300;margin-top:3px;max-width:56ch}
dl.pays dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:500}
dl.pays dd.who{font-weight:300;color:var(--soft);font-size:15px}

/* ---------- croquis de la ficha tecnica ---------- */
.cqfig{margin:0 0 30px}
/* El plano es casi cuadrado, asi que a todo el ancho del marco medía
   1099px de alto: mas de una pantalla, y un plano que no se ve entero de
   una vez no sirve para orientarse. A 920px cabe completo. El aire de
   dentro no se pierde: esta en unidades del viewBox y escala con el. */
.cq{display:block;width:100%;max-width:920px;height:auto;background:var(--paper);
  border:1px solid var(--rule)}
/* Cada lote lleva SU trazo: con los fondos distintos, un marco rectangular
   alrededor de los cuatro mentiria sobre la forma del conjunto. */
.cq-lot{fill:var(--hi);stroke:var(--navy);stroke-width:1.5}
.cq-div{stroke:var(--navy);stroke-width:1;stroke-opacity:.45}
.cq-num{font-family:"Cormorant Garamond",Georgia,serif;font-size:44px;
  font-weight:400;fill:var(--navy);text-anchor:middle;letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1}
.cq-area{font-family:"Jost",sans-serif;font-size:16px;font-weight:300;
  fill:var(--soft);text-anchor:middle;
  font-variant-numeric:lining-nums tabular-nums}
/* Las medidas dentro del lote: mas discretas que la superficie, porque
   explican la forma y no son el dato que decide. */
.cq-fondo{font-family:"Jost",sans-serif;font-size:14px;font-weight:300;
  fill:var(--soft);text-anchor:middle;letter-spacing:.06em}
.cq-fr{font-family:"Jost",sans-serif;font-size:17px;font-weight:400;
  fill:var(--navy);text-anchor:middle;font-variant-numeric:tabular-nums}
.cq-lbl{font-family:"Jost",sans-serif;font-size:14px;font-weight:500;
  fill:var(--gold-deep);letter-spacing:.16em}
.cq-brk{fill:none;stroke:var(--gold);stroke-width:1.5}
/* El terreno protegido: un verde muy suave con matas de plano encima. La
   trama de rayas anterior se leia como "zona rayada" y no como naturaleza. */
.cq-verde{fill:#eef1e9;stroke:var(--rule);stroke-width:1}
.cq-mata{fill:#dbe3d2;stroke:#b9c6ab;stroke-width:1}
.cq-verde-t{fill:#7e8c6e;font-size:13px}
.cq-road{fill:var(--navy)}
.cq-road-t{font-family:"Jost",sans-serif;font-size:15px;font-weight:400;
  fill:var(--cream);letter-spacing:.2em}
.cq-arw{fill:none;stroke:var(--cream);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cq-beach-t{fill:var(--cream);font-size:15px;letter-spacing:.14em}
.cq-dim{stroke:var(--navy);stroke-width:1;stroke-opacity:.5}
.cq-tick{stroke:var(--navy);stroke-width:1;stroke-opacity:.5}
.cq-total{font-family:"Jost",sans-serif;font-size:14px;font-weight:400;
  fill:var(--soft);letter-spacing:.06em}
.cq-cap{font-size:14px;color:var(--soft);margin:14px 0 0;max-width:74ch;
  line-height:1.6}
@media (max-width:560px){
  .cq-num{font-size:48px}
  .cq-area{font-size:19px}
  .cq-lbl,.cq-beach-t,.cq-road-t{font-size:17px}
  .cq-fr{font-size:20px}
}

/* ===== NAVEGACION DE CAPITULOS =====
   Mismo patron que .lp-caps en la landing: filete arriba y abajo,
   versalitas diminutas, el capitulo en curso con un filete dorado. */
.fp-caps{position:sticky;top:var(--oph-alto,80px);z-index:30;
  background:var(--navy);border-top:1px solid rgba(250,247,242,.14);
  border-bottom:1px solid rgba(250,247,242,.14)}
.fp-caps-in{width:min(100% - var(--fp-lado)*2, 1320px);
  margin-inline:auto;display:flex;align-items:center;gap:8px;
  height:var(--fp-nav)}
.fp-caps ol{display:flex;align-items:center;gap:clamp(14px,2vw,32px);
  list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.fp-caps ol::-webkit-scrollbar{display:none}
.fp-caps a{display:block;padding:6px 0;text-decoration:none;white-space:nowrap;
  font-size:.6rem;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(250,247,242,.62);border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease}
.fp-caps a:hover{color:var(--cream)}
.fp-caps a[aria-current]{color:var(--cream);border-bottom-color:var(--gold)}
.fp-caps a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.fp-caps-movil{display:none}
@media (max-width:900px){
  .fp-caps ol{display:none}
  .fp-caps-movil{display:block;position:relative;flex:1}
  .fp-caps-movil summary{list-style:none;cursor:pointer;padding:6px 0;
    font-size:.62rem;letter-spacing:2.2px;text-transform:uppercase;
    color:var(--cream);display:flex;align-items:center;gap:10px}
  .fp-caps-movil summary::-webkit-details-marker{display:none}
  .fp-caps-movil summary svg{width:11px;height:7px;stroke:var(--gold);
    stroke-width:1.4;fill:none;transition:transform .3s ease}
  .fp-caps-movil[open] summary svg{transform:rotate(180deg)}
  .fp-caps-movil ul{position:absolute;left:calc(var(--fp-lado)*-1);
    right:calc(var(--fp-lado)*-1);top:calc(100% + 13px);
    background:var(--navy);border-top:1px solid rgba(250,247,242,.14);
    border-bottom:1px solid rgba(250,247,242,.14);
    list-style:none;margin:0;padding:8px var(--fp-lado) 18px}
  .fp-caps-movil li a{display:block;padding:13px 0;font-size:.68rem;
    border-bottom:1px solid rgba(250,247,242,.09)}
  .fp-caps-movil li:last-child a{border-bottom:0}
}

/* ===== LAS DOS ACCIONES DE LA BARRA =====
   Iconos sueltos, sin caja, del mismo tono apagado que los capitulos y
   encendiendose en dorado al pasar por encima. Ninguna palabra: un icono
   se lee igual en cualquier idioma. El rotulo va en title y aria-label. */
.fp-acc{margin-left:auto;display:flex;align-items:center;gap:2px;flex:none}
.fp-acc svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fp-acc button,.fp-acc a{appearance:none;cursor:pointer;font-family:inherit;
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:8px;
  color:rgba(250,247,242,.8);transition:color .3s ease}
.fp-acc button:hover,.fp-acc a:hover{color:var(--gold)}
.fp-acc button:focus-visible,.fp-acc a:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
/* 16px de icono con 8 de relleno da 32x32: pasa el minimo, pero es corto
   para un dedo. En movil se dobla el relleno vertical y no el horizontal:
   el area util sube a 44px de alto, la comoda, y el ancho no cambia, asi
   que el sumario del desplegable conserva su sitio. Va DESPUES de la regla
   base: con la misma especificidad, manda la ultima. */
@media (max-width:900px){
  .fp-acc button,.fp-acc a{padding:14px 8px}
}
/* El aviso de "enlace copiado", para cuando el navegador no tiene menu
   de compartir propio. */
.fp-aviso{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--navy);color:var(--cream);padding:13px 22px;
  font-size:13px;letter-spacing:.04em;border:1px solid var(--gold);
  opacity:0;pointer-events:none;z-index:60;text-align:center;
  max-width:calc(100% - 32px);transition:opacity .3s ease,transform .3s ease}
.fp-aviso[data-visible]{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){
  .fp-aviso,.fp-acc button,.fp-acc a{transition:none}
}
[id]{scroll-margin-top:calc(var(--oph-alto,80px) + var(--fp-nav) + 20px)}

/* ---------- destacado ---------- */
.pull{
  background:var(--paper);border-left:2px solid var(--gold);
  padding:26px 30px;margin:0 0 28px;max-width:var(--fp-texto)
}
.pull p{max-width:62ch}
.pull p:last-child{margin-bottom:0}

/* ---------- fuentes ---------- */
ul.src{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:22px}
ul.src li{max-width:74ch}
ul.src .t{display:block;font-weight:400;margin-bottom:4px}
ul.src .d{display:block;font-size:14px;color:var(--soft);margin-bottom:5px}
ul.src a{display:block;font-size:13px;word-break:break-word;margin-top:4px}

/* ---------- pie ---------- */
footer{background:var(--navy);color:var(--cream);padding:60px 0 54px;margin-top:60px}
footer h2{color:var(--cream);margin-bottom:18px}
footer p{color:#cfd8e2;max-width:58ch}
footer a{color:var(--gold)}
.sig{
  display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;
  border-top:1px solid rgba(201,169,110,.34);margin-top:34px;padding-top:28px
}
.sig-id{display:flex;align-items:center;gap:15px}
.logo.mark{width:36px;flex:none}
.sig .who{font-size:17px;color:var(--cream)}
.sig .role{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.legal{
  font-size:13px;line-height:1.6;color:#94a3b4;max-width:78ch;
  margin-top:34px;padding-top:24px;border-top:1px solid rgba(201,169,110,.2)
}

/* ---------- impresion: este documento ES el PDF ---------- */
@media print{
  @page{margin:16mm 14mm}
  body{background:#fff;font-size:10.5pt;line-height:1.5}
  .shell{width:100%}
  .masthead{background:#fff;color:var(--ink);padding:0 0 22pt;
    border-bottom:1.5pt solid var(--navy)}
  .masthead h1{font-size:30pt;color:var(--navy)}
  .masthead .sub{color:var(--soft)}
  .meta dd,.sig .who{color:var(--ink)}
  .brand,.meta dt,.sig .role{color:var(--gold-deep)}
  .logo-w{display:none}
  .logo-k{display:block}
  .colophon{color:var(--soft)}
  .meta{border-top-color:var(--rule)}
  footer{background:#fff;color:var(--ink);margin-top:26pt;
    border-top:1.5pt solid var(--navy);padding:22pt 0 0}
  footer h2{color:var(--navy)}
  footer p,.legal{color:var(--soft)}
  footer a,ul.src a{color:var(--soft)}
  .sig,.legal{border-top-color:var(--rule)}
  section{padding-top:24pt}
  h2,h3,.tcap{break-after:avoid}
  table,ol.steps li,dl.pays>div,.pull,ul.src li{break-inside:avoid}
  .tw{overflow:visible}
  /* En la hoja no pinta nada una barra de navegacion ni la cabecera fija
     del sitio. Sin esto, lo primero del PDF es una franja navy con el
     menu; el padding-top del body compensa esa cabecera fija, asi que
     tambien se va. */
  .oph,.fp-caps,.fp-aviso{display:none}
  body{padding-top:0}
  .cq{border-color:#c9bfae}
  .cqfig{break-inside:avoid}
  /* Las medidas de pantalla no manejan la hoja: aqui el ancho lo pone la
     pagina. Los selectores .tw-* llevan su propio min-width y ganan por
     especificidad al table{min-width:0} de aqui abajo, asi que hay que
     anularlos con un selector del mismo peso o la tabla de lotes se sale
     de la hoja al imprimir. */
  table{min-width:0;width:auto;max-width:100%}
  .tw-lotes,.tw-fiscal,.tw-reglas,.tw-escala{max-width:100%}
  a{text-decoration:none}
}

@media (max-width:640px){
  body{font-size:16px}
  .shell{width:calc(100% - 36px)}
  .masthead{padding:46px 0 42px}
  section{padding-top:46px}
  dl.pays>div{grid-template-columns:1fr}
  dl.pays dd{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== INICIO SISTEMA DE PIE PUBLICO =====================================
   Identico en las cuatro paginas publicas. Si se toca, se tocan todas.
   No lleva ni un color literal: todo deriva de --navy, --gold y --cream, para
   que la migracion de paleta aprobada solo tenga que cambiar el token.
   ======================================================================== */
.op-pie{background:var(--navy);color:var(--cream);margin-top:64px}
.op-pie-shell{max-width:1200px;margin-inline:auto;padding:72px 48px 28px}
@media (max-width:1279px){ .op-pie-shell{padding-left:32px;padding-right:32px} }

/* --- fila de marca --- */
.op-pie-marca{display:flex;align-items:center}
.op-pie-logo{display:block;width:200px;max-width:62%;height:auto}
.op-pie-sep{flex:none;width:1px;height:36px;margin:0 24px;
  background:var(--gold);opacity:.55}
.op-pie-division{font-family:"Jost",-apple-system,"Segoe UI",sans-serif;
  font-size:12px;font-weight:300;letter-spacing:.31em;text-transform:uppercase;
  color:var(--cream);opacity:.78;line-height:1}

/* --- fila de informacion --- */
/* 60/40 en fr, no en %. Con porcentajes el gap SE SUMA al 100% y la columna
   derecha se sale del contenedor; con fr se reparte lo que queda tras el gap.
   El minmax(0,...) es lo que permite que el correo largo encoja en vez de
   empujar la columna. */
.op-pie-info{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:52px;align-items:start;margin-top:52px}
.op-pie-lugar,.op-pie-contacto{min-width:0}
.op-pie-proyecto{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:27px;line-height:1.15;margin:0 0 15px;color:var(--cream)}
.op-pie-geo{font-family:"Jost",-apple-system,"Segoe UI",sans-serif;
  font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  margin:0;color:var(--cream);opacity:.66}
.op-pie-rotulo{font-family:"Jost",-apple-system,"Segoe UI",sans-serif;
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 12px;color:var(--cream);opacity:.6}
.op-pie-rotulo-2{margin-top:34px}
.op-pie-dato{margin:0;font-size:15px;line-height:1.5;
  /* El correo es largo y no tiene por donde partirse: si la columna se estrecha
     se sale. Se deja partir solo cuando no cabe de ninguna otra forma. */
  min-width:0;overflow-wrap:anywhere}
.op-pie-dato + .op-pie-dato{margin-top:12px}
.op-pie-dato a{color:var(--cream);text-decoration:none;border-bottom:1px solid transparent}
.op-pie-dato a:hover{border-bottom-color:var(--gold)}
.op-pie-social{margin:14px 0 0;font-size:13px;line-height:1.7;
  color:var(--cream);opacity:.66}
.op-pie-social a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.op-pie-social a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* --- filete y base --- */
.op-pie-filete{border:0;height:1px;width:100%;background:var(--gold);opacity:.25;
  margin:60px 0 0}
.op-pie-base{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;margin-top:22px;
  font-family:"Jost",-apple-system,"Segoe UI",sans-serif;font-size:11px;
  letter-spacing:.04em}
.op-pie-base a{color:var(--cream);opacity:.8;text-decoration:none;
  border-bottom:1px solid transparent}
.op-pie-base a:hover{opacity:1;border-bottom-color:var(--gold)}
.op-pie-copy{margin:0;color:var(--cream);opacity:.66}
.op-pie-nota{margin:0;color:var(--cream);opacity:.8}

/* --- foco visible, dentro del pie --- */
.op-pie a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;
  border-bottom-color:transparent}

/* --- variante minima de la politica de privacidad --- */
.op-pie-min .op-pie-nota{margin-top:48px}
.op-pie-min .op-pie-filete{margin-top:56px}
.op-pie-min .op-pie-base{margin-top:20px;justify-content:flex-start}

/* --- movil: una columna, todo a la izquierda --- */
@media (max-width:767px){
  .op-pie-shell{padding:48px 24px 24px}
  .op-pie-marca{display:block}
  .op-pie-logo{width:172px;max-width:78%}
  /* En movil el separador deja de ser vertical y pasa a ser un filete corto
     bajo el logo: la barra vertical de escritorio aqui no cabe con calma. */
  /* El separador es un <span>: en escritorio funciona porque es hijo de un
     flex y se blockifica, pero aqui el padre pasa a display:block y volveria a
     ser inline, ignorando width y height. */
  .op-pie-sep{display:block;width:36px;height:1px;margin:22px 0 15px}
  .op-pie-info{display:block;margin-top:0}
  .op-pie-lugar{margin-top:48px}
  .op-pie-proyecto{font-size:25px;margin-bottom:13px}
  .op-pie-contacto{margin-top:44px}
  .op-pie-rotulo-2{margin-top:38px}
  .op-pie-filete{margin-top:52px}
  .op-pie-base{display:block;margin-top:20px}
  .op-pie-copy{margin-top:16px}
  .op-pie-min .op-pie-nota{margin-top:48px}
}

@media (prefers-reduced-motion:reduce){
  .op-pie a{transition:none!important}
}

/* --- impresion: el pie no se lleva un bloque navy a la hoja --- */
@media print{
  .op-pie{background:transparent;color:var(--ink);margin-top:18pt;
    border-top:1.5pt solid var(--navy)}
  .op-pie-shell{padding:16pt 0 0;max-width:none}
  .op-pie-logo{display:none}
  .op-pie-division,.op-pie-geo,.op-pie-rotulo,.op-pie-copy,.op-pie-social{
    color:var(--soft);opacity:1}
  .op-pie-proyecto,.op-pie-dato a,.op-pie-base a{color:var(--ink)}
  .op-pie-sep,.op-pie-filete{background:var(--rule);opacity:1}
}
/* ===== FIN SISTEMA DE PIE PUBLICO ======================================== */