/* A·MAR — estilos de la portada. Compartido por la version en ingles (/index.html)
   y la version en espanol (/es/index.html): tocar aqui cambia las dos. */

  /* Bodoni Moda and Jost, both SIL Open Font License. Licences in assets/fonts/. */
  @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{
    /* Palette taken from the A·MAR logo files */
    --foam:#ffffff;
    --sand:#d6d1c4;
    --turquoise:#1dcad3;
    --deep:#04202e;
    --ink:#000f9f;

    --reveal:cubic-bezier(.22,.61,.36,1);
  }

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

  html,body{height:100%}

  body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    background:radial-gradient(120% 90% at 50% 15%, #0d4459 0%, var(--deep) 60%, #021721 100%);
    color:var(--foam);
    font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---------- The sea ---------- */

  .sea{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    animation:surface 3.2s var(--reveal) both;
  }

  /* Depth-of-water scrim: darkest where the type sits, lightest at the edges,
     so the sea keeps its colour but white stays legible over the foam. */
  .depth{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(75% 60% at 50% 56%,
        rgba(4,32,46,.62) 0%,
        rgba(4,32,46,.42) 45%,
        rgba(4,32,46,.10) 100%),
      linear-gradient(to bottom,
        rgba(4,32,46,.34) 0%,
        rgba(4,32,46,0) 28%,
        rgba(4,32,46,0) 62%,
        rgba(2,23,33,.48) 100%);
  }

  /* ---------- Content ---------- */

  main{
    position:relative;
    z-index:2;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:clamp(2rem,7vh,4.5rem) 1.5rem;
    padding-bottom:calc(clamp(2rem,7vh,4.5rem) + env(safe-area-inset-bottom));
  }

  .logo{
    width:clamp(122px,min(21vmin,24vh),218px);
    height:auto;
    display:block;
    filter:drop-shadow(0 2px 26px rgba(2,23,33,.45));
    animation:rise 1.1s var(--reveal) .35s both;
  }

  /* Horizon: the one rule on the page, separating who we are from what we say. */
  .horizon{
    width:clamp(48px,9vmin,78px);
    height:1px;
    margin:clamp(1.4rem,5vh,3.2rem) 0 clamp(1.1rem,4vh,2.4rem);
    border:0;
    background:rgba(214,209,196,.5);
    transform-origin:center;
    animation:draw .9s var(--reveal) 1.05s both;
  }

  h1{
    margin:0;
    font-family:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
    font-weight:400;
    font-size:clamp(1.7rem,min(6.4vw,7.4vh),3.35rem);
    line-height:1.06;
    letter-spacing:.005em;
    text-shadow:0 2px 30px rgba(2,23,33,.4);
    animation:rise 1.1s var(--reveal) 1.2s both;
  }

  .note{
    margin:clamp(.7rem,2.2vh,1.15rem) 0 0;
    max-width:26ch;
    font-size:clamp(.95rem,2.7vw,1.075rem);
    line-height:1.55;
    letter-spacing:.02em;
    color:rgba(255,255,255,.88);
    animation:rise 1.1s var(--reveal) 1.4s both;
  }

  .contact{
    margin-top:clamp(1.5rem,6vh,3.4rem);
    animation:rise 1.1s var(--reveal) 1.6s both;
  }

  .contact p{
    margin:0 0 .7rem;
    font-size:clamp(.85rem,2.3vw,.95rem);
    letter-spacing:.03em;
    color:rgba(214,209,196,.88);
  }

  a.mail{
    display:inline-block;
    font-weight:400;
    color:var(--foam);
    font-size:clamp(1.05rem,3.3vw,1.3rem);
    letter-spacing:.05em;
    text-decoration:none;
    padding:.22em .1em;
    border-bottom:1px solid rgba(29,202,211,.55);
    transition:border-color .25s ease,color .25s ease;
  }
  a.mail:hover{border-bottom-color:var(--turquoise);color:var(--turquoise)}
  a.mail:focus-visible{
    outline:2px solid var(--turquoise);
    outline-offset:6px;
    border-radius:2px;
  }

  .place{
    position:absolute;
    left:0;
    right:0;
    bottom:calc(clamp(2.9rem,4vh + 1.6rem,4rem) + env(safe-area-inset-bottom));
    margin:0;
    padding:0 1.5rem;
    font-size:clamp(.68rem,2.4vw,.78rem);
    letter-spacing:.13em;
    text-indent:.065em; /* half the tracking, so the last letter-space doesn't pull it off-centre */
    color:rgba(214,209,196,.76);
    animation:rise 1.1s var(--reveal) 1.85s both;
  }

  .legal{
    position:absolute;
    left:0; right:0;
    bottom:calc(clamp(.5rem,1.6vh,.9rem) + env(safe-area-inset-bottom));
    margin:0;
    padding:0 1.5rem;
    font-size:.72rem;
    letter-spacing:.04em;
    color:rgba(214,209,196,.62);
    animation:rise 1.1s var(--reveal) 1.95s both;
  }
  .legal a{display:inline-block;padding:.5rem .35rem;color:inherit;text-decoration:none;border-bottom:1px solid rgba(214,209,196,.3)}
  .legal a:hover{color:var(--foam);border-bottom-color:rgba(214,209,196,.7)}
  .legal a:focus-visible{outline:2px solid var(--turquoise);outline-offset:4px;border-radius:2px}
  .legal span{margin:0 .55em;opacity:.75}

  /* ---------- One reveal, on load ---------- */

  @keyframes surface{
    from{transform:scale(1.07);opacity:0}
    40%{opacity:1}
    to{transform:scale(1);opacity:1}
  }
  @keyframes rise{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }
  @keyframes draw{
    from{opacity:0;transform:scaleX(0)}
    to{opacity:1;transform:scaleX(1)}
  }

  /* Tall phones show the whole frame, so the horizon lands high. Drop the
     content into the water below it, where white has something to sit against. */
  @media (orientation:portrait) and (max-width:820px) and (min-height:700px){
    main{padding-top:calc(clamp(2rem,7vh,4.5rem) + 22vh)}
  }

  /* Short screens: drop the footer rather than shrinking the identity. */
  @media (max-height:600px){
    main{padding-top:1.25rem;padding-bottom:1.25rem}
    .note{margin-top:.5rem}
    .place{display:none}
    .legal{position:static;margin-top:1rem;font-size:.68rem}
    .legal a{padding:.35rem .3rem}
  }

  /* Phones held sideways: barely 380px of height. Shrink the mark and drop the
     supporting line, which only restates the headline, so nothing is cut off. */
  @media (max-height:460px){
    .logo{width:clamp(92px,min(21vmin,24vh),218px)}
    .horizon{margin:.7rem 0 .6rem}
    .note{display:none}
    .contact{margin-top:1rem}
    .legal{margin-top:.7rem}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation:none !important;
      transition:none !important;
    }
  }
  /* ---------- Selector de idioma ---------- */

  .idiomas{
    position:absolute;
    top:0;
    right:0;
    z-index:3;
    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;
    animation:rise 1.1s var(--reveal) 2.05s both;
  }

  .idiomas a{
    padding:.8rem .65rem;   /* area tactil de 44px, no solo el texto */
    color:rgba(255,255,255,.62);
    text-decoration:none;
    transition:color .25s ease;
  }
  .idiomas a:hover{color:#fff}
  .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);
  }

  /* El selector vive dentro de <main>, que en moviles altos se desplaza hacia
     abajo; anclarlo al viewport lo mantiene arriba del todo en todos los casos. */
  @media (orientation:portrait) and (max-width:820px) and (min-height:700px){
    .idiomas{position:fixed}
  }