/* ══════════════════════════════════════════════════════════════
   GLAMOUR NAILS BY FRANCIA · núcleo
   Negro absoluto · letras blancas · el oro solo en los detalles.
   Escrito de cero. Retícula de dos columnas en el celular.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── superficies: todo negro, tres niveles apenas distintos ── */
  --negro:      #000000;
  --capa-1:     #070707;
  --capa-2:     #0c0c0c;
  --capa-3:     #121212;
  --linea:      rgba(255, 255, 255, 0.09);
  --linea-2:    rgba(255, 255, 255, 0.16);

  /* ── letras: blancas ── */
  --blanco:     #ffffff;
  --texto:      rgba(255, 255, 255, 0.66);
  /* Era 0.42 = 3.95:1 sobre negro, por debajo del mínimo de 4.5. Afecta al pie
     (el © y la firma) y a los textos chicos de la escena oscura. 0.48 da 4.92:1.
     Calculado, no tanteado: 0.455 es justo el mínimo que pasa. */
  --texto-2:    rgba(255, 255, 255, 0.48);

  /* ── oro: detalles, nunca fondos grandes ── */
  --oro:        #e8c84a;
  --oro-logo:   #f2d64b;
  --oro-claro:  #f6e6a8;
  --oro-hondo:  #a9822c;
  --oro-linea:  rgba(232, 200, 74, 0.30);
  --oro-humo:   rgba(232, 200, 74, 0.07);
  --oro-btn-1:  #e4c77e;
  --oro-btn-2:  #c9a24b;
  --oro-grafico:#ae8a3b;

  /* ── estados ── */
  --ok: #7de3ad;  --ok-bg: rgba(125, 227, 173, 0.12);
  --pend: #f0c76a; --pend-bg: rgba(240, 199, 106, 0.13);
  --mal: #f08a8a;  --mal-bg: rgba(240, 138, 138, 0.12);

  /* ── tipografía: las letras de ella, intactas ── */
  --display: "Playfair Display", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --script:  "Parisienne", "Segoe Script", "Brush Script MT", cursive;
  --ui:      "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ── aire ── */
  --ancho: 1280px;
  --borde: 18px;                /* margen lateral en el celular */
  --aire: 76px;                 /* separación entre secciones */
  --hueco: 10px;                /* separación de la retícula 2x2 */
  --radio: 4px;                 /* esquinas casi rectas: se ve más caro */
  --radio-g: 10px;

  /* ── movimiento ── */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --barra: 74px;                /* alto de la isla inferior */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--negro);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

::selection { background: var(--oro); color: #000; }

:focus-visible {
  outline: 1px solid var(--oro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ══════════════ tipografía ══════════════ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blanco);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* el titular enorme de la portada */
.tit-xl {
  font-family: var(--display);
  font-size: clamp(3.1rem, 17vw, 8.4rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--blanco);
}

/* titular de sección */
.tit {
  font-family: var(--display);
  font-size: clamp(1.95rem, 9vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blanco);
}

.tit-sm {
  font-family: var(--display);
  font-size: clamp(1.35rem, 5.6vw, 1.9rem);
  line-height: 1.1;
  color: var(--blanco);
}

/* la firma manuscrita de ella */
.script {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blanco);
}

/* etiqueta chiquita en oro: aquí vive el dorado */
.eti {
  font-family: var(--ui);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--oro);
  display: inline-block;
}

.eti-blanca { color: var(--texto-2); }

/* número de sección en oro tenue */
.num-sec {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--oro);
  opacity: 0.55;
}

/* cifra grande (precios, estadísticas, teléfono) */
.cifra {
  font-family: var(--display);
  color: var(--blanco);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.oro { color: var(--oro); }
.blanco { color: var(--blanco); }
.tenue { color: var(--texto-2); }
.mini { font-size: 0.78rem; line-height: 1.6; }
.centro { text-align: center; }

p a:not(.btn) {
  color: var(--blanco);
  border-bottom: 1px solid var(--oro-linea);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--curva);
}
p a:not(.btn):hover { border-color: var(--oro); }

b, strong { font-weight: 600; color: var(--blanco); }

/* ══════════════ armazón de página ══════════════ */

.marco { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--borde); }

.bloque { padding: var(--aire) 0; position: relative; }
.bloque-corto { padding: calc(var(--aire) * 0.62) 0; }

/* separador: una línea de pelo con un punto de oro al centro */
.corte {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea) 22%, var(--linea) 78%, transparent);
  position: relative;
}
.corte::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: var(--oro);
  transform: rotate(45deg);
  opacity: 0.7;
}

/* ══════════════ el rótulo de cada sección ══════════════ */

.rotulo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
}
.rotulo .num-sec { grid-column: 1; grid-row: 1; }
.rotulo .eti { grid-column: 2; grid-row: 1; }
.rotulo h2 { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; }
.rotulo .sub {
  grid-column: 1 / -1; grid-row: 3;
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--texto-2);
  max-width: 46ch;
}

/* ══════════════ la retícula: dos columnas, una al lado de la otra ══════════════ */

.rej2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hueco);
}
.rej2 > .ancho { grid-column: 1 / -1; }

.rej3 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hueco); }

/* mosaico 2x2 donde la primera pieza manda */
.mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hueco);
}
.mosaico > *:nth-child(1) { grid-column: 1 / -1; }

/* ══════════════ utilidades de espacio ══════════════ */

.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }  .mt-3 { margin-top: 28px; }
.mt-4 { margin-top: 44px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 28px; }
.oculto { display: none !important; }

/* ══════════════ desktop: el mismo sistema con más aire ══════════════ */

@media (min-width: 760px) {
  :root {
    --borde: 40px;
    --aire: 132px;
    --hueco: 16px;
    --barra: 0px;
  }
  body { font-size: 16px; }

  .rotulo {
    grid-template-columns: auto 1fr auto;
    align-items: end;
    margin-bottom: 38px;
  }
  .rotulo h2 { grid-column: 1 / -1; grid-row: 2; }
  .rotulo .sub { grid-column: 1 / 3; grid-row: 3; }
  .rotulo .mas { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; }

  .rej3 { grid-template-columns: repeat(3, 1fr); }
  .mosaico > *:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
}

@media (min-width: 1100px) {
  :root { --borde: 56px; }
}