/* ==========================================================================
   MEDITERRANI STUDI · Página "En construcción"
   Línea de diseño: minimalista / Apple-like con acento orgánico.
   Tipografía única: Manrope. Color: paleta corporativa sobre blanco cal.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Paleta corporativa (documento del cliente, 8.5) */
  --cal:        #F7F4ED;
  --carbon:     #202826;
  --arena:      #D9C8AA;
  --oliva:      #7E8265;
  --terracota:  #A66E51;

  /* Derivados */
  /* Terracota rebajada para relleno con texto encima: #A66E51 sobre cal da
     3,85:1 y no alcanza el AA de la WCAG en un texto de 12 px. Esta da 5,06:1. */
  --terracota-fondo: #8F5C42;
  --ink:        var(--carbon);
  --ink-70:     rgba(32, 40, 38, .70);
  --ink-45:     rgba(32, 40, 38, .45);
  --ink-14:     rgba(32, 40, 38, .14);
  --ink-08:     rgba(32, 40, 38, .08);

  --font-sans:  "Manrope", -apple-system, "Segoe UI", sans-serif;

  --gutter:     clamp(1.35rem, 5vw, 5rem);
  --maxw:       1240px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--cal);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.95rem, .4vw + .85rem, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 1.5px solid var(--terracota);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ------------------------------------------------------------ 3. Atmósfera */
/* Luz que atraviesa una pérgola: el sol se desplaza y los listones dibujan
   sombra sobre la cal. Único gesto decorativo de la página.                 */
.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.atmosphere__sun {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(58% 46% at 78% 10%, rgba(255, 246, 226, .95), transparent 62%),
    radial-gradient(46% 40% at 10% 96%, rgba(217, 200, 170, .38), transparent 66%),
    radial-gradient(90% 70% at 50% 0%,  rgba(255, 252, 244, .70), transparent 70%);
  animation: sun 44s var(--ease) infinite alternate;
}

.atmosphere__slats {
  position: absolute;
  inset: -30% -60%;
  background: repeating-linear-gradient(
    101deg,
    transparent 0 46px,
    rgba(32, 40, 38, .026) 46px 50px,
    rgba(32, 40, 38, .046) 50px 74px,
    rgba(32, 40, 38, .026) 74px 78px,
    transparent 78px 124px
  );
  -webkit-mask-image: radial-gradient(78% 70% at 72% 6%, #000 10%, transparent 74%);
          mask-image: radial-gradient(78% 70% at 72% 6%, #000 10%, transparent 74%);
  animation: slats 70s linear infinite alternate;
}

.atmosphere__grain {
  position: absolute;
  inset: 0;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

@keyframes sun {
  from { transform: translate3d(-3%, -2%, 0) scale(1);   opacity: .9; }
  to   { transform: translate3d(4%, 3%, 0)  scale(1.08); opacity: 1; }
}
@keyframes slats {
  from { transform: translate3d(-4%, 0, 0) rotate(0deg); }
  to   { transform: translate3d(6%, 2%, 0) rotate(1.2deg); }
}

/* ------------------------------------------------------------ 4. Estructura */
.shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

/* ------------------------------------------------------------- 5. Cabecera */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(1.15rem, 2.2vw, 1.85rem) var(--gutter);
}

.head__brand img { width: clamp(118px, 10.5vw, 152px); }

.head__aside {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.status {
  position: relative;
  padding-left: 1.15rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-70);
  white-space: nowrap;
}
.status::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--terracota);
  animation: pulse 3.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(166, 110, 81, .45); }
  35%           { box-shadow: 0 0 0 7px rgba(166, 110, 81, 0); }
}

.lang { display: flex; align-items: center; gap: .55rem; }
.lang__btn {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-70);
  padding: .2rem 0;
  transition: color .35s var(--ease);
}
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-active {
  color: var(--ink);
  /* Subrayado dibujado con fondo, no con box-shadow: así se recorta al ancho
     real de las letras y no se come el hueco de tracking sobrante. */
  background-image: linear-gradient(var(--terracota), var(--terracota));
  background-repeat: no-repeat;
  background-size: calc(100% - .12em) 1px;
  background-position: left bottom;
}
.lang__sep { width: 1px; height: 11px; background: var(--ink-14); }

/* El tracking abre un hueco también DESPUÉS de la última letra. Sin compensarlo,
   todo rótulo espaciado que caiga contra el margen derecho queda por dentro de
   la línea que marcan el resto de elementos. Se resta el mismo valor del
   tracking, en em, para que escale con el cuerpo. */
.status { margin-right: -.14em; }    /* llega al borde en móvil */
.lang__btn { margin-right: -.12em; } /* y equilibra el hueco a ambos lados del separador */

/* ---------------------------------------------------------------- 6. Cuerpo */
.stage {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(1.25rem, 2.4vw, 2rem) var(--gutter) clamp(1.5rem, 3vw, 2.25rem);
}

/* Dos masas en tensión: el claim arriba a la izquierda, la paleta abajo a la
   derecha. El hueco resultante es el cuadrante superior derecho, que es donde
   cae la luz de la pérgola. */
.say {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: 100%;
}

.say__text { max-width: 38rem; }

/* 6.1 Claim ------------------------------------------------------------- */
.claim {
  font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.claim span, .claim em { display: block; font-style: normal; }
.claim em { color: var(--terracota); }

/* Hairline que recorre la línea: la obra en marcha */
.rule {
  position: relative;
  height: 1px;
  max-width: 22rem;
  margin: clamp(1.6rem, 2.6vw, 2.15rem) 0 clamp(1.35rem, 2.2vw, 1.75rem);
  background: var(--ink-08);
  overflow: hidden;
}
.rule i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, var(--terracota), transparent);
  animation: draw 6.5s var(--ease) infinite;
}
@keyframes draw {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(260%); }
  100% { transform: translateX(260%); }
}

.lead {
  max-width: 42ch;
  color: var(--ink-70);
  font-weight: 300;
  font-size: clamp(1rem, .5vw + .9rem, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.signature {
  margin-top: clamp(1.25rem, 2vw, 1.6rem);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* 6.2 Acciones ---------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: clamp(1.6rem, 2.6vw, 2.15rem);
}

.btn {
  --btn-pad: 1.05rem 1.9rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: var(--btn-pad);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--solid { color: var(--cal); background: var(--carbon); }
/* El relleno es un ::before absoluto y, por orden de pintado, se dibuja por
   encima del contenido en línea. El rótulo va en un <span> con z-index para
   que el barrido pase por detrás y no lo tape. */
.btn--solid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--terracota-fondo);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn--solid:hover::before,
.btn--solid:focus-visible::before { transform: translateY(0); }
.btn--solid > span { position: relative; z-index: 1; }

.btn--ghost {
  --btn-pad: 1.05rem 1.55rem;
  color: var(--ink-70);
  border: 1px solid var(--ink-14);
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 500;
  font-size: .8125rem;
}
.btn--ghost:hover { color: var(--ink); border-color: var(--ink-45); }
.btn--ghost svg { opacity: .55; transition: transform .4s var(--ease); }
.btn--ghost:hover svg { transform: translate(2px, -2px); }

/* 6.3 Paleta de materiales ---------------------------------------------- */
.palette {
  display: flex;
  gap: clamp(.4rem, .8vw, .6rem);
  width: clamp(17rem, 26vw, 23rem);
}

.palette__chip {
  flex: 1;
  height: clamp(56px, 6.5vw, 84px);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(32, 40, 38, .05);
  transition: transform .6s var(--ease);
}
.palette__chip:hover { transform: translateY(-3px); }

/* Texturas: cal, madera, cerámica, textil y arena, sin fotografía */
.palette__chip--cal {
  background:
    radial-gradient(120% 90% at 25% 0%, #FFFCF3, transparent 62%),
    linear-gradient(168deg, #F6F1E5, #E9E1CF);
}
.palette__chip--roble {
  background:
    repeating-linear-gradient(91deg,
      rgba(90, 58, 32, .08) 0 2px,
      transparent 2px 9px,
      rgba(90, 58, 32, .05) 9px 10px,
      transparent 10px 18px),
    linear-gradient(150deg, #C9A87F, #AC8659 62%, #9C7749);
}
.palette__chip--terracota {
  background:
    radial-gradient(90% 120% at 76% 6%, rgba(255, 226, 205, .38), transparent 58%),
    linear-gradient(150deg, #B77C5C, var(--terracota) 60%, #8F5C42);
}
.palette__chip--oliva {
  background:
    radial-gradient(100% 130% at 14% 0%, rgba(232, 236, 214, .34), transparent 62%),
    linear-gradient(150deg, #8D916F, var(--oliva) 58%, #6B6F55);
}
.palette__chip--arena {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .32), transparent 55%),
    linear-gradient(150deg, #E4D6BC, var(--arena) 55%, #C9B694);
}

/* ------------------------------------------------------------------ 7. Pie */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(1.1rem, 2vw, 1.5rem) var(--gutter);
  border-top: 1px solid var(--ink-08);
}

/* Dos masas, como en la cabecera: a la izquierda quién es la empresa, a la
   derecha cómo llegar a ella. Los perfiles sociales, cuando existan, entran
   dentro de .foot__contact para no romper esa lectura. */
.foot__legal,
.foot__place,
.foot__mail {
  font-size: .75rem;
  font-weight: 400;
  color: var(--ink-70);
}

.foot__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem clamp(1.25rem, 2.6vw, 2.25rem);
}

/* El correo, con el mismo peso que el resto del pie: se lee, no se anuncia. */
.foot__mail a {
  padding-bottom: 2px;
  box-shadow: inset 0 -1px 0 0 var(--ink-14);
  transition: color .35s var(--ease), box-shadow .35s var(--ease);
}
.foot__mail a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--terracota); }

.foot__social {
  display: flex;
  gap: 1.5rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.foot__social li:last-child a { margin-right: -.16em; }
.foot__social a {
  color: var(--ink-70);
  padding-bottom: 2px;
  transition: color .35s var(--ease), box-shadow .35s var(--ease);
}
.foot__social a:hover {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 0 var(--terracota);
}

/* ----------------------------------------------------- 8. Entrada en escena */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 1.05s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------- 9. Adaptaciones */
@media (max-width: 1024px) {
  .say { grid-template-columns: 1fr; }
  .palette {
    width: 100%;
    max-width: 26rem;
    margin-top: clamp(1.9rem, 3.2vw, 2.6rem);
  }
}

@media (max-width: 640px) {
  .head { align-items: flex-start; }
  .head__aside { flex-direction: column; align-items: flex-end; gap: .55rem; }
  .claim { letter-spacing: -.03em; }
  .lead { max-width: none; }
  .btn { width: 100%; justify-content: center; }
  .actions { gap: .65rem; }
  .palette { max-width: none; width: 100%; }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot__contact { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}