/* Landing de persil.com.ar: el diseño exportado de Claude Design, sin su runtime.
   Mismos colores, tipografías, medidas y textos; los estilos en línea pasaron a clases
   y el «style-hover» del runtime a :hover. */

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  /* El verde del pie, no el crema del diseño: en una pantalla más alta que la página, lo que
     queda debajo del pie sigue al pie en vez de mostrar una franja clara. */
  background: #0B1A12;
  color: #14201A;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: #2C5E3A; text-decoration: none; }
a:hover { color: #14201A; }
h1, h2, p, figure { margin: 0; }

.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Cabecera */
.cabecera { background: #0E2016; border-bottom: 1px solid rgba(143, 191, 77, 0.22); }
.cabecera__fila { padding-top: 16px; padding-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.marca { display: flex; align-items: baseline; gap: 9px; color: #F5F2E8; }
.marca:hover { color: #F5F2E8; }
.marca__nombre { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.marca__rubro { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #8FBF4D; }

/* Botones */
.boton {
  display: inline-block;
  background: #8FBF4D;
  color: #0E2016;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 26px;
  border-radius: 2px;
}
.boton:hover { background: #A6D45F; color: #0E2016; }
.boton--chico { margin-left: auto; font-size: 14px; padding: 10px 18px; white-space: nowrap; }

/* Portada */
.portada { background: #0E2016; color: #F5F2E8; }
.portada__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 52px; align-items: center; }
.portada__texto { padding: 76px 0; }
.sobretitulo { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #8FBF4D; margin-bottom: 24px; }
.portada h1 { font-weight: 500; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 22px; text-wrap: pretty; }
.bajada { font-size: 18px; line-height: 1.6; color: #C3CDBE; max-width: 44ch; margin-bottom: 34px; text-wrap: pretty; }
.portada__foto { position: relative; min-height: 400px; align-self: stretch; margin: 44px 0; }
.portada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hasta que llegue la foto, un panel liso en los verdes de la marca (sin cartel: la página es pública). */
.foto-pendiente {
  position: absolute; inset: 0;
  border: 1px solid rgba(143, 191, 77, 0.18);
  background: linear-gradient(160deg, #1B3A26 0%, #14301F 55%, #0E2016 100%);
}

/* Atributos */
.atributos { background: #14301F; color: #F5F2E8; border-top: 1px solid rgba(143, 191, 77, 0.2); }
.atributos__grilla { display: grid; grid-template-columns: repeat(3, 1fr); }
.atributo { padding: 42px 32px; }
.atributo:first-child { padding-left: 0; }
.atributo:last-child { padding-right: 0; }
.atributo + .atributo { border-left: 1px solid rgba(245, 242, 232, 0.12); }
.atributo h2 { font-size: 17px; font-weight: 600; margin-bottom: 9px; letter-spacing: -0.01em; }
.atributo p { font-size: 15px; line-height: 1.6; color: #B5C0AE; text-wrap: pretty; }

/* En angosto las tres columnas se apilan: el separador pasa de la izquierda a arriba
   (el diseño original dejaba un borde y un sangrado a la izquierda al apilar). */
@media (max-width: 800px) {
  .atributos__grilla { grid-template-columns: 1fr; }
  .atributo, .atributo:first-child, .atributo:last-child { padding: 32px 0; }
  .atributo + .atributo { border-left: 0; border-top: 1px solid rgba(245, 242, 232, 0.12); }
}

/* Pie */
.pie { background: #0B1A12; color: #8B9A85; padding: 36px 0; }
.pie__fila { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: baseline; justify-content: space-between; }
.pie__fila span { font-size: 13px; }
.pie__fila .pie__dominio { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }