/* ==========================================================================
   Catálogo Tiffany — hoja única de la home "simpleweb".
   No depende de Bootstrap ni de style.css: esta página no los carga.
   Criterio visual tomado del catálogo impreso: blanco y negro, mucho aire,
   tipografía fina con letterspacing amplio, placas negras por sección.
   ========================================================================== */

/* Nunito — es la tipografía del catálogo impreso. El PDF embebe Nunito-Light,
   Nunito-Medium y Nunito-Bold; acá se sirve la versión variable (un solo archivo
   cubre 300-700). SIL Open Font License 1.1, copia en fonts/nunito/OFL.txt.
   Local, sin CDN: el sitio no depende de fonts.gstatic.com. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/nunito/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/nunito/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --negro: #111111;
  --negro-suave: #1c1c1c;
  --blanco: #ffffff;
  --papel: #ffffff;
  --gris-texto: #767676;
  --gris-linea: #e4e4e4;
  --gris-fondo: #f7f7f7;
  --rojo: #c8102e;
  --ancho: 1280px;
  --track: 0.18em;
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--negro);
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Portada ----------------------------------------------------------- */

.portada {
  background: var(--negro);
  color: var(--blanco);
  text-align: center;
  padding: 96px 24px 88px;
}
.portada__marca {
  font-size: clamp(46px, 11vw, 92px);
  font-weight: 200;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}
.portada__bajada {
  margin: 14px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.portada__lema {
  margin: 54px 0 0;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.portada__lema::after {
  content: "";
  display: block;
  width: 190px;
  max-width: 60%;
  height: 1px;
  background: rgba(255,255,255,.28);
  margin: 22px auto 0;
}

/* --- Separador de sección (placa negra) --------------------------------- */

.seccion { scroll-margin-top: 0; }

.seccion__placa {
  background: var(--negro);
  color: var(--blanco);
  text-align: center;
  padding: 62px 24px;
  margin: 0;
}
/* La primera placa cae inmediatamente después de la portada, que también es
   negra: sin una línea que las separe se leen como un único bloque con un
   hueco en el medio. */
.portada + .seccion .seccion__placa {
  border-top: 1px solid rgba(255,255,255,.16);
}
.seccion__titulo {
  margin: 0;
  font-size: clamp(13px, 2.4vw, 17px);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  /* el letterspacing empuja el texto a la derecha: se compensa */
  text-indent: 0.42em;
}
.seccion__titulo::before,
.seccion__titulo::after {
  content: "·";
  margin: 0 0.7em;
  opacity: .55;
}

/* --- Grilla de fichas --------------------------------------------------- */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 56px 32px;
  padding: 72px 0 88px;
}

.ficha { display: flex; flex-direction: column; }

.ficha__marco {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Altura FIJA, no min-height: las fichas de recorte y las de ambiente tienen
     que ocupar exactamente lo mismo para que los nombres de una misma fila
     queden alineados. Con min-height + padding, la de recorte medía 16px más
     que la de ambiente y las etiquetas quedaban escalonadas.
     300px mantiene las fotos (100 ppi) cerca de su tamaño nativo. */
  height: 300px;
  padding: 8px;
}
.ficha__marco img { max-height: 100%; width: auto; }

/* Foto de ambiente: sin recorte, va a sangre dentro de su celda */
.ficha--ambiente .ficha__marco {
  background: var(--negro);
  padding: 0;
  overflow: hidden;
}
.ficha--ambiente .ficha__marco img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* Nombre con la barra vertical fina del catálogo impreso */
.ficha__nombre {
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--negro);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.5;
}
.ficha__nombre b { font-weight: 600; }

.ficha__medidas {
  margin: 7px 0 0 15px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--gris-texto);
}

/* Almohadones: círculos, igual que en el catálogo */
.almohadones {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0 15px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.almohadon {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid #b9b9b9;
  display: inline-block;
}
.almohadon--negro  { background: var(--negro); border-color: var(--negro); }
.almohadon--blanco { background: var(--blanco); }

/* Cartel destacado (el rojo de Pekín, el "se puede armar simple o doble") */
.ficha__nota {
  display: inline-block;
  margin: 12px 0 0 15px;
  padding: 4px 11px;
  background: var(--rojo);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Juego completo ----------------------------------------------------- */

/* --- Juego completo -----------------------------------------------------
   Replica la caja del catálogo impreso: marco fino, la placa negra encastrada
   en el borde superior izquierdo, y adentro columnas separadas por filetes
   verticales con el ícono de línea arriba.
   En la página 19 del PDF hay DOS cajas lado a lado (completo y completo XL),
   así que el contenedor es un grid que las acomoda. */

.juegos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 26px;
  margin: 8px 0 72px;
}

.juego {
  position: relative;
  border: 1px solid var(--negro);
  padding: 30px 0 22px;
  /* deja aire arriba para la placa encastrada en el borde */
  margin-top: 10px;
}
.juego__titulo {
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  margin: 0;
  padding: 6px 14px;
  background: var(--negro);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 3px;      /* la placa del PDF tiene las esquinas redondeadas */
}

.juego__items {
  display: grid;
  /* las columnas las define el propio bloque: Pekín tiene 4, el resto 3 */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.juego__item {
  position: relative;
  padding: 6px 14px;
  text-align: center;
}
/* Filete separador CORTO, como en el catálogo: no llega a los bordes de la caja */
.juego__item + .juego__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--gris-linea);
}

.juego__icono {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 44px;
  margin-bottom: 12px;
  color: var(--negro);
}
.juego__icono svg {
  max-width: 82%;
  max-height: 44px;
  width: auto;
  height: auto;
}

/* En el catálogo estos dos textos van en caja normal ("3 cuerpos x 1"), no en
   versalita como los nombres de producto. Sin text-transform. */
.juego__cant {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.juego__medida {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--gris-texto);
}

/* --- Contacto ----------------------------------------------------------- */

.contacto { background: var(--gris-fondo); padding: 84px 0; }
.contacto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
}
.contacto__titulo {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.contacto__texto { margin: 0 0 26px; color: var(--gris-texto); font-size: 14px; }

.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--gris-texto);
}
.campo input, .campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gris-linea);
  background: var(--blanco);
  font: inherit;
  font-size: 15px;
  border-radius: 0;
}
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--negro);
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo--doble { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }

.trampa {
  position: absolute; left: -9999px;
  width: 0; height: 0; opacity: 0;
}

.boton {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 40px;
  background: var(--negro);
  color: var(--blanco);
  border: 1px solid var(--negro);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.boton:hover { background: transparent; color: var(--negro); }

.aviso {
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  border-left: 3px solid;
}
.aviso--ok    { background: #eef7ee; border-color: #2f7a34; color: #205323; }
.aviso--error { background: #fdeeee; border-color: var(--rojo); color: #8d0b20; }

.datos { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.datos li { margin-bottom: 12px; }
.datos span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin-bottom: 2px;
}

/* --- Pie ---------------------------------------------------------------- */

.pie {
  background: var(--negro);
  color: rgba(255,255,255,.72);
  padding: 64px 0 34px;
  font-size: 13.5px;
}
.pie__marca {
  font-size: 40px;
  font-weight: 200;
  color: var(--blanco);
  line-height: 1;
  margin: 0 0 6px;
}
.pie__bajada {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0 0 30px;
}
.pie__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;
}
.pie__titulo {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blanco);
  margin: 0 0 12px;
}
.pie a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.pie a:hover { color: var(--blanco); }
.pie__legal {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  color: rgba(255,255,255,.5);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
}

/* --- Botones flotantes -------------------------------------------------- */

.flotantes {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cada botón lleva su propio disco de color con el ícono en blanco adentro.
   Un ícono suelto se perdía al pasar sobre la portada, sobre las placas negras
   de sección y sobre las fotos de ambiente. El anillo blanco del box-shadow es
   lo que despega el disco cuando el fondo también es negro; sobre fondo claro
   no se nota y el contraste lo da el propio disco. */
.flotante {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--negro);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.92),
              0 4px 14px rgba(0,0,0,.38);
  transition: transform .16s ease, box-shadow .16s ease;
}
.flotante:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.92),
              0 7px 18px rgba(0,0,0,.46);
}
.flotante:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.flotante svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* Instagram con el degradado de la marca */
.flotante--instagram {
  background: radial-gradient(circle farthest-corner at 28% 100%,
              #fdd76a 0%, #fbb040 10%, #f26b3a 25%,
              #e5316b 40%, #cf2e92 60%, #7c3fcf 90%);
}

@media (max-width: 560px) {
  .portada { padding: 66px 20px 58px; }
  .seccion__placa { padding: 44px 20px; }
  .grilla { gap: 40px 20px; padding: 48px 0 56px; }
  .contenedor { padding: 0 18px; }
  .flotantes { right: 14px; bottom: 14px; }
  .flotante { width: 46px; height: 46px; }

  /* En una columna, un marco de 300px deja poco más de una ficha por pantalla
     y el scroll se hace eterno. 220px sigue mostrando bien el producto. */
  .ficha__marco { height: 220px; margin-bottom: 18px; }

  /* El bloque de juego pasa a 2 columnas: en una sola se estira a lo largo y
     queda un bloque larguísimo. Con 2 columnas, uno de 3 items deja el tercero
     centrado abajo y uno de 4 (Pekín) queda en 2x2. */
  .juegos { grid-template-columns: 1fr; gap: 20px; margin-bottom: 52px; }
  .juego__items {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
  }
  .juego__item { padding: 12px 10px; }
  /* en 2 columnas el filete va solo entre la izquierda y la derecha */
  .juego__item:nth-child(2n+1)::before { display: none; }
  .juego__item + .juego__item::before { top: 12%; bottom: 12%; }
  .juego__icono { height: 38px; margin-bottom: 9px; }
  .juego__icono svg { max-height: 38px; }

  .campo--doble { grid-template-columns: 82px 1fr; }

  /* Botones flotantes en móvil.
     Un elemento fijo siempre se cruza con algo mientras se scrollea; lo que hay
     que garantizar es que no tape nada EN REPOSO (arriba y abajo del documento)
     ni deje contenido inalcanzable. Para eso:
       - se reserva un carril a la derecha, así ningún texto llega hasta la zona
         de los botones (a 390px se habían medido 8 fragmentos solapados:
         nombres largos, el cartel de Pekín, el título de Lámparas, las medidas
         de Estantería Loft y los horarios del pie);
       - se agrega padding-bottom al body para que el final del pie no quede
         nunca debajo de los botones. */
  body { padding-bottom: 78px; }

  .contenedor { padding-left: 16px; padding-right: 64px; }

  .flotantes { right: 12px; bottom: 12px; gap: 10px; }
  .flotante {
    width: 44px; height: 44px;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.92), 0 3px 10px rgba(0,0,0,.34);
  }
  .flotante:hover { transform: none; }

  /* El título de sección va centrado y con mucho letterspacing: a 390px llegaba
     al borde derecho y se cruzaba con los botones. */
  .seccion__placa { padding-left: 16px; padding-right: 64px; }
  .seccion__titulo { letter-spacing: 0.3em; text-indent: 0.3em; }
}