/* Páginas legales de A·MAR. Comparten tipografía y paleta con la portada,
   pero sin vídeo: aquí lo que importa es leer. */

@font-face{
  font-family:"Bodoni Moda";
  src:url("fonts/bodoni-moda-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("fonts/jost-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("fonts/jost-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --foam:#ffffff;
  --sand:#d6d1c4;
  --turquoise:#1dcad3;
  --deep:#04202e;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(120% 80% at 50% 0%, #0d4459 0%, var(--deep) 55%, #021721 100%)
    fixed;
  color:rgba(255,255,255,.9);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:1.02rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:68ch;
  margin:0 auto;
  padding:clamp(2.5rem,8vh,5rem) 1.5rem clamp(3rem,10vh,6rem);
  padding-bottom:calc(clamp(3rem,10vh,6rem) + env(safe-area-inset-bottom));
}

/* Identity, back to the front page */
.mark{display:inline-block;margin-bottom:clamp(2rem,6vh,3.5rem);border-bottom:0}
.mark:hover{border-bottom:0}
.mark img{display:block;width:104px;height:auto}
.mark:focus-visible{outline:2px solid var(--turquoise);outline-offset:8px;border-radius:2px}

h1{
  font-family:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.9rem,5.5vw,2.7rem);
  line-height:1.15;
  margin:0 0 .4rem;
}

.updated{
  margin:0 0 clamp(2rem,5vh,3rem);
  font-size:.85rem;
  letter-spacing:.03em;
  color:rgba(214,209,196,.7);
}

h2{
  font-family:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.2rem,3.4vw,1.5rem);
  line-height:1.25;
  margin:clamp(2.2rem,5vh,3rem) 0 .75rem;
  color:var(--foam);
}

p{margin:0 0 1.1rem}
ul{margin:0 0 1.1rem;padding-left:1.2rem}
li{margin-bottom:.5rem}

a{color:var(--foam);text-decoration:none;border-bottom:1px solid rgba(29,202,211,.5)}
a:hover{color:var(--turquoise);border-bottom-color:var(--turquoise)}
a:focus-visible{outline:2px solid var(--turquoise);outline-offset:3px;border-radius:2px}

/* Identification block: this is reference data, so it reads as a table, not prose. */
.datos{
  margin:0 0 1.5rem;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.45rem 1.5rem;
}
.datos dt{
  color:rgba(214,209,196,.75);
  font-size:.9rem;
  letter-spacing:.02em;
}
.datos dd{margin:0}

@media (max-width:480px){
  .datos{grid-template-columns:1fr;gap:.1rem 0}
  .datos dd{margin-bottom:.8rem}
}

.volver{
  display:inline-block;
  margin-top:clamp(2.5rem,6vh,3.5rem);
  font-size:.9rem;
  letter-spacing:.04em;
}

/* ---------- Selector de idioma ---------- */

.idiomas{
  position:absolute;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  gap:.15rem;
  padding:clamp(.5rem,1.6vh,.9rem) clamp(.6rem,2.2vw,1.4rem);
  font-size:.8rem;
  letter-spacing:.12em;
}
.idiomas a{
  padding:.8rem .65rem;   /* area tactil de 44px, no solo el texto */
  color:rgba(255,255,255,.62);
  text-decoration:none;
  border-bottom:0;
  transition:color .25s ease;
}
.idiomas a:hover{color:#fff;border-bottom:0}
.idiomas a[aria-current="true"]{color:#fff}
.idiomas a:focus-visible{outline:2px solid var(--turquoise);outline-offset:2px;border-radius:2px}
.idiomas .barra{width:1px;height:.7rem;background:rgba(214,209,196,.4)}

/* Nota de prevalencia del texto en espanol, al pie de las versiones inglesas */
.prevalece{
  margin:2.5rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid rgba(214,209,196,.18);
  font-size:.85rem;
  line-height:1.6;
  color:rgba(214,209,196,.72);
}