/* ============================================================
   SEMILLA — joyería generativa
   Escala de grises priorizando el negro. Manuscrita brutalista
   para el display, mono para las etiquetas, grotesca para leer.
   ============================================================ */

:root {
  /* v24: PALETA INVERTIDA. Los nombres se conservan para no tocar cada
     uso: --negro es ahora el FONDO CLARO y --blanco es la TINTA oscura. */
  --negro: #f4f4f2;
  --negro-2: #ebebe8;
  --gris-90: #e2e2de;   /* bordes suaves */
  --gris-70: #c2c2bd;   /* bordes duros */
  --gris-50: #83837e;   /* texto secundario */
  --gris-30: #4a4a47;   /* texto normal sobre claro */
  --blanco: #0d0d0d;

  /* v8: Caveat, garabato caligrafico suelto (como el boceto de Martin).
     Fallbacks: Segoe Script en Windows, Bradley Hand en macOS/iOS. */
  --manuscrita: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --mono: "Space Mono", ui-monospace, monospace;
  --sans: "Space Grotesk", -apple-system, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--negro);
  color: var(--gris-30);
  font-family: var(--mono);   /* v11: todo el sitio escribe a maquina */
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blanco); color: var(--negro); }

/* v16: sin filtro de grises — las gemas son la excepcion de color */
img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ---------- cabecera ---------- */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(var(--negro) 60%, transparent);
  mix-blend-mode: normal;
}

.logo {
  font-family: var(--manuscrita);
  font-size: 1.6rem;
  color: var(--blanco);
  letter-spacing: 0.02em;
}

nav { display: flex; gap: 1.75rem; }

nav a {
  font-family: var(--mono);
  font-size: 0.6rem;          /* v11: menu mas discreto */
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gris-50);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

nav a:hover, nav a[aria-current="page"] {
  color: var(--blanco);
  border-bottom-color: var(--blanco);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--gris-90);
}

.hero video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.hero-texto { position: relative; text-align: center; padding: 0 1rem; }

.hero-texto h1 {
  font-family: var(--manuscrita);
  font-weight: 400;
  /* la marca tiene 15 letras: el tamano se calcula para que quepa entera
     en una sola linea en cualquier pantalla */
  font-size: min(9.5vw, 8.5rem);
  line-height: 0.95;
  white-space: nowrap;
  color: var(--blanco);
  text-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

.hero-texto p {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--gris-30);
  margin-top: 1.25rem;
}

.hero-abajo {
  position: absolute; bottom: 1.25rem; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 1.5rem;
  font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--gris-50);
}

/* ---------- hero a mano (v8) ----------
   La palabra entera, corrida: "Semill" y luego cientos de aes que se
   envuelven renglon tras renglon hasta llenar la pantalla, como una
   pagina garabateada a mano. word-break: break-all permite cortar la
   "palabra" donde tope con el margen, igual que al escribir de verdad. */
.hero-mano {
  position: relative;
  height: 100svh;
  overflow: hidden;
  padding: 5rem 1.25rem 0;
  border-bottom: 1px solid var(--gris-90);
  background: var(--negro);
}

/* el lienzo de la letra viva ocupa el hero entero; el h1 de abajo es el
   respaldo en Caveat para navegadores sin JS (letra_viva.js lo oculta) */
#letra-viva {
  position: absolute;
  /* v10: aire abajo para que la escritura no se encime con el pie */
  inset: 4.5rem 0 6.5rem 0;
  width: 100%;
  height: calc(100% - 11rem);
  cursor: pointer;
}

.hero-mano h1 {
  font-family: var(--manuscrita);
  font-weight: 600;
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  line-height: 0.78;
  letter-spacing: 0.015em;
  color: var(--blanco);
  word-break: break-all;
  overflow-wrap: anywhere;
  transform: rotate(-1.4deg) translateY(-0.5rem);
  user-select: none;
}

/* la primera silaba respira un poco mas brillante que el mar de aes */
.hero-mano h1::first-line { color: #000000; }

/* ---------- hero diagonal (v7, ya no se usa en la landing) ----------
   La palabra recorre la diagonal que une la esquina superior derecha con
   la inferior izquierda. Se escribe con la manuscrita y se rota para que
   quede EXACTAMENTE sobre esa diagonal; los ecos de a's en gris casi negro
   llenan el resto. El tamano va en vmax: la palabra (21 letras) mide unas
   11.5 veces su tamano de fuente, y 10vmax por letra la deja abarcando la
   diagonal completa tanto en desktop como en celular. */
.hero-diagonal {
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--gris-90);
  background: var(--negro);
  /* EL ANGULO DE LA DIAGONAL, calculado del propio viewport: la recta que
     une la esquina superior derecha con la inferior izquierda. En un
     monitor ancho es tendida (~-32 grados) y en un celular casi vertical
     (~-65). El -24deg de la primera linea es el respaldo para navegadores
     sin trigonometria CSS. */
  --diag: -24deg;
  --diag: atan2(-100svh, 100vw);
}

.hero-diagonal h1 {
  /* absoluto y centrado a mano: con grid, el texto desbordado corre el
     centro hacia la derecha y la palabra pierde la esquina izquierda */
  position: absolute;
  top: 50%; left: 50%;
  font-family: var(--manuscrita);
  font-weight: 400;
  /* el largo de la diagonal es ~0.72*(ancho+alto); la palabra tiene 21
     letras: este calc la deja cubriendo la diagonal entera con margen */
  font-size: calc((100vw + 100svh) * 0.078);
  line-height: 1;
  white-space: nowrap;
  color: var(--blanco);
  transform: translate(-50%, -50%) rotate(var(--diag));
  user-select: none;
}

.a-eco {
  position: absolute;
  font-family: var(--manuscrita);
  font-size: calc((100vw + 100svh) * 0.045);
  line-height: 1;
  white-space: nowrap;
  transform: rotate(var(--diag));
  color: var(--gris-90);
  user-select: none;
  pointer-events: none;
}

.a-eco.uno  { top: 4%;    left: -30%; }
.a-eco.dos  { top: 38%;   left: -45%; color: #e9e9e6; font-size: calc((100vw + 100svh) * 0.058); }
.a-eco.tres { bottom: 2%; right: -35%; color: #e6e6e3; font-size: calc((100vw + 100svh) * 0.05); }

.hero-pie {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.25rem 0 1.75rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gris-30);
  /* que se lea sobre el mar de aes */
  background: linear-gradient(transparent, var(--negro) 55%);
}

/* ---------- la carta (v7): todo a maquina de escribir ---------- */
.carta { font-family: var(--mono); }

.carta-linea {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--gris-30);
}

/* la primera linea se ESCRIBE sola, a pasos, como maquina */
.carta-linea.escribe {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  border-right: 2px solid var(--gris-50);
  animation: teclear 2.6s steps(38, end) 0.3s both,
             parpadeo 0.9s step-end 2.9s 4;
}

@keyframes teclear { from { width: 0; } to { width: 38ch; } }
@keyframes parpadeo { 50% { border-color: transparent; } }

.carta-lista { display: flex; flex-direction: column; }

.carta-lista a {
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--gris-90);
  font-size: clamp(0.78rem, 2.4vw, 0.95rem);
  letter-spacing: 0.04em;
  color: var(--gris-30);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.carta-lista a:hover { color: var(--blanco); padding-left: 0.9rem; }

.carta-nota {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--gris-50);
  max-width: 46em;
}

.carta-nota a { color: var(--gris-30); border-bottom: 1px solid var(--gris-70); }

.cursor-maquina { animation: parpadeo 0.9s step-end infinite; color: var(--gris-30); }

/* ---------- secciones ---------- */
section { padding: 6rem 1.5rem; border-bottom: 1px solid var(--gris-90); }

.marco { max-width: 1080px; margin: 0 auto; }

.etiqueta {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gris-50);
  margin-bottom: 2.5rem;
}

/* v11: TODO el interior va a maquina de escribir; la unica letra
   manuscrita del sitio es la de la landing (y su respaldo). */
.titulo {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--blanco);
  margin-bottom: 2rem;
}

.manifiesto p {
  max-width: 34em;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--gris-30);
}

.manifiesto p + p { margin-top: 1.4em; }

.manifiesto strong { color: var(--blanco); font-weight: 500; }

/* ---------- rejilla de piezas ---------- */
.piezas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--gris-90);       /* las juntas de 1px entre tarjetas */
  border: 1px solid var(--gris-90);
}

.pieza {
  background: var(--negro);
  padding: 1.25rem;
  transition: background 0.15s ease;
}

.pieza:hover { background: var(--negro-2); }

.pieza figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--negro); }

.pieza figure > * { width: 100%; height: 100%; object-fit: cover; }

/* tarjetas 3D: giran al pasar el cursor (ver script al pie de la pagina) */
.pieza figure model-viewer {
  display: block;
  width: 100%; height: 100%;
  --poster-color: transparent;
  cursor: grab;
}

.pieza h3 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--blanco);
  margin-top: 1rem;
}

.pieza .dato {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gris-50);
  margin-top: 0.35rem;
}

/* ---------- visor 3D ---------- */
.visor3d {
  display: block;   /* antes de que cargue el script, que el marco ya exista */
  width: 100%;
  height: min(72svh, 640px);
  /* v12: el anillo flota sobre el MISMO fondo de la pagina, sin caja */
  background: var(--negro);
  border: none;
  --poster-color: transparent;
  --progress-bar-color: var(--gris-50);
}

.visor3d-selector { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }

/* v12: sin recuadros — los numeros de semilla son texto plano y el
   elegido se marca solo con el subrayado */
.visor3d-selector button {
  padding: 0.2rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--gris-50);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.visor3d-selector button:hover { color: var(--blanco); }

.visor3d-selector button.activo { color: var(--blanco); border-bottom-color: var(--blanco); }

.visor3d-aviso {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: 0.8rem;
  align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gris-50);
  text-align: center;
  padding: 1rem;
}

/* ---------- generador en vivo (siembra.html) ---------- */
.siembra-controles {
  display: flex; flex-wrap: wrap; gap: 2rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

.campo { display: flex; flex-direction: column; gap: 0.5rem; }

.campo > span {
  font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--gris-50);
}

.campo input, .campo select {
  background: transparent;
  border: 1px solid var(--gris-70);
  color: var(--blanco);
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.12em;
  padding: 0.6rem 0.9rem;
  min-width: 11ch;
}

.campo input:focus, .campo select:focus {
  outline: none; border-color: var(--blanco);
}

.campo select option { background: var(--negro); }

.swatches { display: flex; gap: 0.6rem; }

/* los swatches son la UNICA excepcion de color del sitio: son la gema */
.swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gris-70);
  cursor: pointer;
  padding: 0;
}

.swatch:hover { border-color: var(--gris-30); }

.swatch.activo { border: 2px solid var(--blanco); }

.lienzo3d {
  width: 100%;
  height: min(72svh, 640px);
  background: var(--negro-2);
  border: 1px solid var(--gris-90);
  position: relative;
  overflow: hidden;
}

.lienzo3d canvas { display: block; width: 100%; height: 100%; }

/* ---------- botones ---------- */
.boton {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--blanco);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--blanco);
  transition: background 0.15s ease, color 0.15s ease;
}

.boton:hover { background: var(--blanco); color: var(--negro); }

/* ---------- filtros del catalogo (v22) ---------- */
.filtros {
  display: flex; flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  margin-bottom: 1.25rem;
}

.filtros .campo input, .filtros .campo select { min-width: 9ch; font-size: 0.85rem; padding: 0.5rem 0.7rem; }

/* ---------- portal de compra (v10) ---------- */
.compra-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 820px) { .compra-cuerpo { grid-template-columns: 1fr; } }

/* el sello: la semilla escrita enorme para piezas a medida.
   v14: con [hidden] se apaga DE VERDAD — antes el display de esta clase
   ganaba al atributo y el sello vacio se veia como un cuadro gris abajo
   del anillo en las compras de catalogo. */
.compra-sello[hidden] { display: none; }

.compra-sello {
  display: grid; place-items: center;
  height: min(52svh, 460px);
  border: 1px solid var(--gris-90);
  background: var(--negro-2);
  font-family: var(--mono);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  letter-spacing: 0.08em;
  color: var(--blanco);
}

.compra-lineas div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0.25rem;
  border-bottom: 1px solid var(--gris-90);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.compra-lineas span { color: var(--gris-50); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.7rem; }

.compra-lineas strong { color: var(--blanco); font-weight: 400; text-align: right; }

.compra-precio {
  font-family: var(--mono);
  font-size: 1.7rem;
  color: var(--blanco);
  margin-top: 1.5rem;
}

.boton.secundario { border-color: var(--gris-70); color: var(--gris-30); margin-left: 0.75rem; }

.boton.secundario:hover { background: var(--gris-70); color: var(--blanco); }

.boton.apagado { opacity: 0.35; cursor: not-allowed; }

.boton.apagado:hover { background: transparent; color: var(--blanco); }

/* boton chico de compra en las tarjetas del catalogo */
.boton-compra {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--gris-70);
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gris-30);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.boton-compra:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }

/* ---------- crea el tuyo (v10) ---------- */
.crear-forma {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  max-width: 760px;
}

.crear-forma .campo-ancho { grid-column: 1 / -1; }

.crear-forma textarea {
  background: transparent;
  border: 1px solid var(--gris-70);
  color: var(--blanco);
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 0.7rem 0.9rem;
  width: 100%;
  resize: vertical;
}

.crear-forma textarea:focus { outline: none; border-color: var(--blanco); }

.crear-forma .boton { margin-top: 0.5rem; cursor: pointer; background: transparent; }

/* ---------- encuentranos (v10) ---------- */
.lugares { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--gris-90); border: 1px solid var(--gris-90); }

.lugar { background: var(--negro); padding: 1.75rem 1.5rem; }

.lugar h3 { font-family: var(--mono); font-weight: 400; font-size: 1rem; letter-spacing: 0.05em; color: var(--blanco); }

.lugar .dato { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gris-50); margin-top: 0.5rem; }

.lugar-info { font-size: 0.9rem; color: var(--gris-30); margin-top: 0.9rem; }

.lugar-mapa { display: inline-block; margin-top: 1rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.15em; color: var(--gris-30); border-bottom: 1px solid var(--gris-70); }

.lugar-mapa:hover { color: var(--blanco); border-color: var(--blanco); }

/* ---------- contacto ---------- */
.contacto-lineas { border-top: 1px solid var(--gris-90); }

.contacto-lineas a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.6rem 0.25rem;
  border-bottom: 1px solid var(--gris-90);
  transition: padding-left 0.15s ease, background 0.15s ease;
}

.contacto-lineas a:hover { padding-left: 1rem; background: var(--negro-2); }

.contacto-lineas .medio {
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--gris-50);
}

.contacto-lineas .valor {
  font-family: var(--mono);
  font-size: clamp(0.85rem, 2.6vw, 1.1rem);
  color: var(--blanco);
}

/* ---------- pie ---------- */
footer {
  padding: 3rem 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--gris-50);
}

footer .firma { font-family: var(--mono); font-size: 0.72rem; color: var(--gris-30); }

@media (max-width: 640px) {
  header { padding: 0.85rem 1rem; }
  nav { gap: 0.7rem; flex-wrap: wrap; justify-content: flex-end; }
  nav a { font-size: 0.5rem; letter-spacing: 0.14em; }
  section { padding: 4rem 1rem; }
  /* la landing ocupa el alto completo del telefono, con la escritura
     encuadrada entre el menu y el pie */
  #letra-viva { inset: 3.2rem 0 4.5rem 0; height: calc(100% - 7.7rem); }
  .hero-pie { padding: 1.5rem 0 1.1rem; font-size: 0.58rem; letter-spacing: 0.2em; }
  .boton.secundario { margin-left: 0; margin-top: 0.75rem; }

  /* ---- v13, SOLO LA LANDING EN CELULAR ----
     La pagina crece a tres pantallas de aes: hay que scrollear el mar
     completo para llegar al fondo, donde espera el menu (centrado)
     justo arriba del pie. El viaje es parte del diseno. */
  .portada { position: relative; }   /* ancla del menu absoluto de abajo */
  .portada .hero-mano { height: 300svh; }
  .portada #letra-viva { inset: 1.1rem 0 7.6rem 0; height: calc(100% - 8.7rem); }
  .portada header {
    position: absolute;
    top: auto; bottom: 3.1rem; left: 0; right: 0;
    background: none;
    justify-content: center;
    padding: 0.6rem 1rem;
  }
  .portada header > span { display: none; }
  .portada nav { justify-content: center; gap: 1rem; }
  .portada nav a { font-size: 0.62rem; padding: 0.4rem 0; }  /* tocable */
}