/* solmatas.xyz — hoja de estilos única, sin dependencias. */

/* ── Tipografías ─────────────────────────────────────────── */
@font-face {
  font-family: "Confiteria Script";
  src: url("fonts/confiteria-script-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("fonts/bitter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("fonts/bitter-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Variables ───────────────────────────────────────────── */
:root {
  --negro: #000;
  --gris-nota: #333;
  --gris-placeholder: #b2b2b2;
  --gris-borde: #e0e0e0;

  /* Retícula (misma lógica que tenía la página en Squarespace):
     en móvil, 8 columnas que se adaptan al ancho y filas de alto fijo;
     por eso el recorte de las fotos cambia con el tamaño de pantalla. */
  --hueco: 11px;
  --margen: 6vw;
  --columna-max: calc((1500px - 7 * var(--hueco)) / 8);
  --fila: 24px;
  --relleno: 3.3vmax;

  --texto: calc(1rem + 0.003 * min(100vh, 900px));
  --titulo: min(calc(1rem + 0.04584 * min(100vh, 900px)), 14.5vw);
  --menor: 1.025rem;
}

/* Desde 768px: 24 columnas, y las filas crecen con el ancho. */
@media (min-width: 768px) {
  :root {
    --margen: 4vw;
    --columna-max: calc((1500px - 23 * var(--hueco)) / 24);
    --fila: calc(min(1500px, 92vw) * 0.0228);

    --texto: min(calc(1rem + 0.3vw), 1.25rem);
    --titulo: min(calc(1rem + 4.584vw), 4.82rem);
  }
}

/* ── Base ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: #fff;
  color: var(--negro);
  font-family: "Bitter", Georgia, "Times New Roman", serif;
  font-size: var(--texto);
  line-height: 1.36;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.16em;
}

:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 3px;
}

h1 {
  margin: 0;
  font-family: "Confiteria Script", "Bitter", Georgia, serif;
  font-size: var(--titulo);
  font-weight: 700;
  line-height: 1.2;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Retícula ────────────────────────────────────────────── */
.pagina {
  display: grid;
  grid-template-columns:
    minmax(calc(var(--margen) - var(--hueco)), 1fr)
    repeat(8, minmax(0, var(--columna-max)))
    minmax(calc(var(--margen) - var(--hueco)), 1fr);
  grid-template-rows: repeat(38, minmax(var(--fila), auto));
  gap: var(--hueco);
  padding: var(--relleno) 0;
  overflow-x: clip;
}

/* Cada foto llena su celda; lo que sobra se recorta. */
.foto {
  position: relative;
  overflow: hidden;
}

.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.foto-neon img {
  object-position: 38.4% 50%;
}

.foto-cirilico img {
  object-position: 80.5% 50%;
}

/* Posiciones en móvil: columna inicial / final, fila inicial / final.
   La columna 1 y la 10 son los márgenes: las fotos que las ocupan llegan al borde. */
.foto-toldo        { grid-column: 2 / 6;  grid-row: 1 / 7; }
.foto-neon         { grid-column: 7 / 11; grid-row: 2 / 8; }
.cabecera          { grid-column: 2 / 10; grid-row: 8 / 13; }
.foto-herramientas { grid-column: 6 / 10; grid-row: 13 / 19; }
.foto-cirilico     { grid-column: 1 / 5;  grid-row: 16 / 21; }
.texto             { grid-column: 2 / 10; grid-row: 22 / 28; }
.suscripcion       { grid-column: 2 / 8;  grid-row: 31 / 39; }

.cabecera {
  align-self: start;
  margin-top: 29px;
  text-align: center;
}

.subtitulo {
  margin: 1.4em 0 0;
  font-style: italic;
}

.texto p {
  margin: 0;
}

.texto p + p {
  margin-top: 0.87em;
}

/* ── Formulario ──────────────────────────────────────────── */
.suscripcion {
  align-self: center;
  margin-bottom: 10px;
  font-size: var(--menor);
}

.suscripcion input[type="email"] {
  display: block;
  width: 100%;
  height: 4.03em;
  padding: 0 2em;
  border: 1px solid var(--gris-borde);
  border-radius: 0;
  background: #fff;
  color: var(--negro);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.suscripcion input[type="email"]::placeholder {
  color: var(--gris-placeholder);
  opacity: 1;
}

.suscripcion input[type="email"]:focus-visible {
  outline-offset: 0;
}

.suscripcion button {
  display: block;
  width: max-content;
  max-width: calc(100vw - 2 * var(--margen));
  margin-top: 0.97em;
  padding: 1.435em 1.97em;
  border: 0;
  border-radius: 999px;
  background: var(--negro);
  color: #fff;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.024em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nota {
  width: max-content;
  max-width: calc(100vw - 2 * var(--margen));
  margin: 1.54em 0 -6px;
  color: var(--gris-nota);
  font-style: italic;
  line-height: 1.4;
}

/* ── Escritorio (desde 768px) ────────────────────────────── */
@media (min-width: 768px) {
  .pagina {
    grid-template-columns:
      minmax(calc(var(--margen) - var(--hueco)), 1fr)
      repeat(24, minmax(0, var(--columna-max)))
      minmax(calc(var(--margen) - var(--hueco)), 1fr);
    grid-template-rows: repeat(30, minmax(var(--fila), auto));
  }

  .foto-toldo        { grid-column: 4 / 9;   grid-row: 1 / 8; }
  .foto-cirilico     { grid-column: 24 / 27; grid-row: 4 / 13; }
  .cabecera          { grid-column: 2 / 26;  grid-row: 5 / 12; }
  .foto-neon         { grid-column: 1 / 4;   grid-row: 11 / 21; }
  .foto-herramientas { grid-column: 18 / 23; grid-row: 13 / 24; }
  .texto             { grid-column: 7 / 16;  grid-row: 15 / 23; }
  .suscripcion       { grid-column: 7 / 16;  grid-row: 23 / 31; }

  .foto-toldo {
    margin-bottom: calc(var(--fila) * 0.3);
  }

  .cabecera {
    align-self: end;
    margin: 0 0 -2px;
  }

  .suscripcion {
    margin-bottom: 0;
  }

  .suscripcion button {
    white-space: nowrap;
  }
}

/* ── Página de agradecimiento ────────────────────────────── */
.gracias {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}

.gracias p {
  margin: 1.6em 0 0;
  font-style: italic;
}